I will like my baseUrl to be my domain name instead of localhost. Something like https://domain/api/post/allpost. I developed with nuxt and deployed with zeit now. But when i try to access the api using mydomain/api/post/all, it fails. But it works only in localhost:3000/api. I use axios.
in nuxt.config.js
...
env: {
baseUrl: process.env.baseUrl || "http://localhost:3000"
}
in nuxt page
Axios.get(`${process.env.baseUrl}/api/post/all`)
even when i change the baseUrl from localhost to "https://my-domain.com", It still cannot call my api routes. Please i need help
Related
I have a full-stack application with Node js and express in the back-end serving the statics files from Angular as front-end.
In development I have my /api endpoints poiting to my back-end in localhost:3000/api and the static index.html from Angular in localhost:3000
Everything works fine. I go to 3000 and I get my Angular app and if I go to 3000/api I get my api endpoints.
The problem comes when trying to deploy the app in production in AWS ELB.
When going to the the domain provided, once is deployed, like: http.example.amazon.domain.com I get CANNOT GET / but when going to the /api from the back-end like http.example.amazon.domain.com/api I get a 200 status response.
How can I make it work so once the app is deployed, the baseUrl from my Angular listen to the domain that ELB gives me? for example: http.example.amazon.domain.com
How can I set up baseUrl variable so it could be changed after the app is deployed and I can set up the new domain provided?
I have tried also setting up the environment.environment.ts and environment.environment.prod.ts files with the baseUrl pointing to localhost:3000 like:
export const environment = {
production: true,
baseUrl: 'http://localhost:3000',
};
I have Vue.JS front app with nodeJS backend based on expressJS. ExpressJS also used as web server for statically built Vue.JS app
Front app communicates with express backend via rest and websocket. It uses url host from window.location instance and easily communicates with backend
In production mode, when built application in static expressJS server area, everything work perfect
In dev mode, Vue use it's own web server, and backend urls based on window.location are incorrect because no expresJS on same host and port.
So my question is it possible change some code blocks if running in dev mode ?
Like something this :
if( devmode)
{
const url = "http://somebackendhost/rest"
}
else {
const url = location.host ....
}
}
I will assume you are developing your Vue app using Vue CLI
Changing app behavior depending on environment
In Vue CLI you can use Environment Variables
if(process.env.NODE_ENV === "development")
{
}
This works thanks to Webpack's Define plugin and big advantage is that process.env.NODE_ENV is replaced at build time by the real value. So in production build Webpack will see just if("production" === "development") {} and happily removes the code in optimization phase because it knows this can never be true
Better solution
But I would not use this approach for your problem. Using different API server (not same as the server used for serving Vue SPA) can easily lead to CORS problems
Exactly for this use case, Vue CLI (and Webpack Dev server used under the hood) supports proxying
vue.config.js
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'http://localhost:58300/',
ws: true, // websockets
changeOrigin: true,
}
}
},
},
This config makes Vue Dev server to proxy any request to /api to other server running at http://localhost:58300/ (your node/express app) and change the origin (so browser thinks response came from the dev server)
All of this can be done without Vue CLI but you will need to set it up by yourself in Webpack config...
The problem
You can't access this information from your browser.
But there are three solutions:
Solution #1
On compilation time create a variable in code which defines devmode (const devmode = true;)
Solution #2
Because your bundler can minify your variable names or changing the scope for security reasons, may be the situation where you can't access it.
So second solution is to define devmode in your localStorage.
Solution #3
Third solution is almost the best.
If you are developing, you are probably accessing your web app via localhost.
location.hostname will return the name of host, so you can make something like:
const devmode = location.hotname == 'localhost';
Best solution
Do not do this. Develop a fully working web app using local REST API and define the URL of REST API in some variable, so when you are preparing your production app, you or compiler just changes the URL adress variable in code of your REST API.
Why is this the best solution?
Because it do not impacts your end-user's performance and they will be loading less code, which is the best practise.
Post Scriptum
Don't forget to remove all devmode codepaths when compiling production version!
In development, when i was running the react server on localhost:3000. I used proxy in package.json to set the baseurl for my backend server, which was running on loacalhost:5000. So i just edited proxy in package.json to "localhost:5000". So all the api requests sent from axios will be directed to that url.
axios.get("/name").then(res=>({...}))
A request identical to the above would be redirected to:
localhost:5000/name
In production, when i deployed the app on online platforms like heroku and vercel. The api requests sent from react-app through axios, all failed. When deploying on heroku/vercel, I changed the proxy to the online backend url.
I want to know how to change the proxy when a react app is deployed online (preferably on heroku/vercel). So that my api requests won't fail.
Tech stack: react for frontend, axios to send requests and firebase for the backend. The backend is also deployed on heroku.
Any kind of support would be appreciated. Even if there's a better platform to deploy the app, I can switch to that as well.
You should create a config object and pick base_url based on the env.
On local, it will pick development url and on Heroku it will use production.
const configs = {
development: {
SERVER_URI: 'localhost:5000',
},
production: {
SERVER_URI: 'HEROKU_URI',
},
};
module.exports.config = configs[process.env.NODE_ENV];
Also replace your axios calls like this:
axios.get(`${config.SERVER_URI}/name`).then(res=>({...}))
I just created a react-node-SQL app and I want it to run on Google Cloud (not firebase)
My React app runs on different port and my node app runs on different port.
I followed this article and added this line in my react-app package.json but I didn't worked out i.e href in button was still going to localhost:8081 but It didn't worked
I had my node running on port 8080, In package.json of my react app i added "proxy": "http://localhost:8080/" and in button when I did href="/api/status" it was going to localhost:8081 on which the react app was running
Now, Is it possible to run both node and react under the same project? or we need to create separate project for them.
[Update:] I am using webpack, In my webpack config file, I added this
devServer: {
proxy: {
'/': 'http://localhost:8080'
}
},
The problem with this, that even in my react app, on Startup (running on 8081) when it opens the webpage localhost:8081/ it throws an error saying cannot get the page
but if I do something like this
devServer: {
proxy: {
'/api': 'http://localhost:8080'
}
},
it opens the page homepage normally. Now my api and callback uRL after authentication aren't configured with have prefix as api.
Basically, when you do an ajax request from react app, like axios or fetch it will use the proxy: <..> for the backend url. But, href doesn't work with proxies. In that case you need to manually configure proxy using the setupProxy.js documented in the manual proxy page.
Check out this issue:
Same error here, it still routes to localhost:3000/api/auth/google, my
CRA version is 2.1.3 It seems http-proxy-middleware is the only
working way. I have to Configuring the Proxy Manually
From the react doc:
If the proxy option is not flexible enough for you, you can get direct
access to the Express app instance and hook up your own proxy
middleware.
You can use this feature in conjunction with the proxy property in
package.json, but it is recommended you consolidate all of your logic
into src/setupProxy.js.
I made some app that is making a request to a server and was working fine in development mode, but when I push it to Heroku it doesn't make any call to the server and in the console I see that is trying to request localhost:3000/request.
This is a Nuxt.js app and I am making the request with Axios.
I tried adding cors() but it didn't work. It is probably something about Nuxt.
axios.post('/request', data)...
You need to set the baseURL of axios. The base URL should ideally be derived from the environment (e.g. env variable). So, specify the axios in the Nuxt.JS config and axios should request the data from the correct URL.
Here is a snippet of the adapted Nuxt.JS config:
modules: [
['#nuxtjs/axios', {
baseURL: 'https://<YOUR-BASE-DOMAIN>'
}]
]
There is also an issue report on axios for nuxt: https://github.com/nuxt-community/axios-module/issues/134