I am building a NextJs app: How to use dynamic hostnames in api calls instead of .env variables?
For example sometimes in my local dev environment the app sometimes runs in port 3001. How do I accommodate such scenarios by dynamically passing the appropriate hostname during requests?
I use next-absolute-url. From the docs:
This module enables you to easily get the protocol and host of your
Next.js app, both on the server and the client. Optionally, you can
set a localhost variable, which is useful for local development if you
have local lambda functions running on a different port.
import absoluteUrl from "next-absolute-url";
// in express we have req.get('host')
const { origin } = absoluteUrl(req);
Related
i try to host my application on AWS S3 and the static file can export to the S3 folder by export command in next.js, but when it goes to ISR, I don't know how to make it happen, i don't use vercel, i want to update the static html when the revalidate option is in our code, how to write the pre-render function and host it to a seperate serverless service, is there any way to make this happen? better have a simple example here! after set the serverless service up, how to config my next.js app to make it know that it will call the service when ISR is configured?
when i set locally in the next.js app, and run it locally, the ISR is good to go, meaning i put the pre-render function together with my ISR code, this is the way next.js document want us to do, i guess, but now, i want to host my static file in aws s3, just don't know how to set the config to make it call my pre-render function, because i want the pre-render function to host in a different servie endpoint
I have a Vue frontend through which I want to communicate with a backend built with lumen. I have the backend on apache virtual host. It is a local development setup. The virtual host works and I can access it from http://dawn.axeapi.com/ and postman works fine with it.
I've set VUE_APP_API to http://dawn.axeapi.com/ in the .env file. The Vue app is being served with npm run serve.
I am getting following errors in the console and the network tab in developer tools.
But if I double click the requests (e.g. 3304272), I can see JSON data from the backend.
If I serve the backend with php -S localhost:8000 -t public and update VUE_APP_API accordingly, everything works as it should.
Is this because of CORS?
Does apache configuration affect this?
I read in Vue documentation that API requests to the API server need to be proxied during development if the frontend and the backend API server are not running on the same host. So I tried adding
devServer: {
proxy: 'http://dawn.axeapi.com/'
}
to vue.config.js but didn't work.
I am running Apache that ships with macOS.
What am I missing here?
For anyone running Apache that ships with macOS, disable these Apache modules and it should work. I had to disable all eight. You can try one at a time.
mod_authn_file.so
mod_authn_core.so
mod_authz_host.so
mod_authz_groupfile.so
mod_authz_user.so
mod_access_compat.so
mod_auth_basic.so
mod_reqtimeout.so
We have build nuxt js multi tenancy web site. Now we want to fetch environment variable by domain for ex. We have 5 domain as below.
Note: We have used same source code for all domain.
test1.com
test2.com
test3.com
test4.com
test5.com
So for this if i open test2.com then it should consider my test2.env or if i open test5.com then it should consider test5.com.
But the main problem is we have dynamic web side so any user will create his own website from our platform. So how can we create dynamic env file for web site and how to access that dynamically created env file
You should not try to reach a specific file but configure your environment to serve the proper variables. Either in a static way or dynamically.
Otherwise, if you really need to specify a new directory or filename, you can use this solution when launching your app.
yarn dev --dotenv variables/.env_file
I'm currently developing a simple webapp with seperated frontend (Vue) and backend (quarkus REST API) project. For now, I've setup a MVP, where the frontend is displaying some simple data which is called from the backend. To get a working MVP i need to setup CORS support. However, first i want to explain my setup:
Setup
I'm starting developing environment of my frontend with npm run serve and of my backend with ./mvnw quarkus:dev. Frontend is running on localhost:8081 and backend running on localhost:8080.
Heroku allows to run your apps locally aswell with the command heroku local web. Frontend is running on port 0.0.0.0:5001 and backend on 0.0.0.0:5000.
To achieve this setup i setup two .env files on my frontend which are pointing to my backend api. If i want to work in development mode the file .env.development is loaded:
VUE_APP_ROOT_API=http://localhost:8080
and if i run heroku local web the file .env.local with
VUE_APP_ROOT_API=0.0.0.0:5000
is loaded.
In my backend I've set
quarkus.http.cors=true
in my application.properties.
Now I want to deploy those two projects to heroku and use it in production. Therefore I setup two heroku projects and set a config variable in my frontend project with the following value:
VUE_APP_ROOT_API:https://mybackend.herokuapp.com
Calls from my frontend are successfully working!
Question
For the next step, I want to restrict it more and just enable my frontend to call my API. I know i can set something like
quarkus.http.cors.origins=myfrontend.herokuapp.com
However, I dont know how i could do this on quarkus with different environments (development, local and production)? I've found this link but I don't know how to configure heroku and my backend app correctly. Do i need to setup different profiles which are applied on my different environments? Or is there another solution? Do i need Herokus Config Variables?
Thanks for the help so far!
quarkus.http.cors.origins is overridable at runtime so you have several possibilities.
You could use a profile and have everything set up in your application.properties with %prod.quarkus.http.cors.origins=.... Then you either use -Dquarkus.profile=prod when launching your application or you use QUARKUS_PROFILE=prod as an environment variable.
Another option is to use an environment variable for quarkus.http.cors.origins. That would be QUARKUS_HTTP_CORS_ORIGINS=....
My recommendation would be to use a profile. That way you can safely check that all your configuration is consistent at a glance.
I'm having trouble setting up a development workflow that will do both of the following tasks simultaneously:
Recompile static assets (js, css) on file change. Serve these static assets. Notify the browser that the page must reload whenever assets are changed. Use react-hot-loader.
Use express to run a server which serves an API which the static assets will "consume". Have this express server restart any time my server files change.
Is the best practice to have webpack-dev-server serve the static assets, and have a separate web server serve the API on a different port? If so, the API calls in the javascript will need to specify the host and port, and will need to be changed before going to production. It seems all the tutorials online focus on #1, and don't set up an API server. Can anyone point me in the correct direction?
I'm not opposed to using gulp and browserify or SystemJS instead of webpack, but it seems that if I want to use react-hot-loader, I need to use webpack.
You can do something like this:
Create an express() proxy
Create a webpack-dev-server
Link the assets with absolute url
Start both servers.
Note: Make sure to have different ports to run both the servers.
var proxy = require('proxy-middleware');
var express = require('express');
var url = require('url');
//----------------- Web Proxy--------------------
var app = express();
app.use('/assets', proxy(url.parse('http://localhost:8000/dist/assets')));
app.get('/api/url', function(req, res) {}
app.post('/api/url', function(req, res) {}
// ---------------Webpack-dev-server---------------------
var server = new WebpackDevServer(webpack(config), config.devServer);
// ---------------Run both servers-----------------------
server.listen(config.port, 'localhost', function(err) {});
app.listen(8080);
We have been using gulp+webpack for the last year and it has been great. We have an API Gateway which only serves up one static html file(the index.html) and everything else is just REST end points. Then in the index.html we reference a css file or two and a couple scripts that load from our CDN(Cloudfront).
If you run that way in production, your local setup just needs to use the webpack dev server as your "local CDN". You are correct, your javascript will need to know what the api url is since that will change local vs production. We actually have local, dev, stage, and production - once you have it setup to work in 2 environments its not hard to add more(which is good!)
Now our index.html has some template variables that get filled in by the API Gateway when it serves it up. Similar to this:
<script>
var siteConfig = {
apiBase: '<%=apiBaseUri%>',
cdnBase: '<%=cdnBaseUri%>'
};
</script>
<script src="<%=cdnBaseUri%>/assets/js/bundle.min.js"></script>
Then you just pull in siteConfig when your react app is starting up and prepend those variables to any api/cdn calls. Swap the variables depending on your environment, and bam, you're done!
A slightly simpler approach is instead of filling in those vars when the page is served up you could do it at build time. Thats how we started but as things evolved it turned out easier to manage at run time.
BTW, I am pretty sure you can accomplish all of this using just webpack - gulp probably isn't necessary but it was easier for us at the time to use gulp for running unit tests, linting, etc.