I have a NodeJS backend running at http://localhost:4050, and I had configured my react application to make API calls to there. For deploying on heroku, I had to change the PORT variable in the backend to be process.env.PORT. As a result when I put the react app's build folder in the backend's server folder, the react application was still searching for localhost:4050 when I deployed to heroku and naturally failed to make calls, because heroku ran the application on an arbitrarily different port. But apparently adding the very same http://localhost:4050 as "proxy":"http://localhost:4050" in the package.json file worked. I'm really curious as to how doing that got it to work.
proxy field in package.json is used to proxy all requests from frontend domain to backend. For example, you have:
Backend (REST API): localhost:5000/api/user/:id
Frontend (React.JS app): localhost:3000/user
If you call axios.get('/api/user/123'), the browser will send this request to localhost:3000/api/user/123, but then react dev server will peoxy it to localhost:5000/api/user/123
Please note that this is only for development environment. If you want to deploy your React.JS, there's a better way: https://blog.heroku.com/deploying-react-with-zero-configuration
Related
I have made a certain react js front-end, with a Go API running on different ports.
In Development mode (npm start) everything going well and works fine by setting the proxy to the GO API in package.json.
However when going to the Production or Deployment mode ( npm run build then npm -s build port xxxx ), proxy in package.json is not readable, and calling API through axios does not request data from the proxy.
Even though giving the full link with port directly gives a cross origin problem in react.
So any idea on how to set the axios in react js to call the go api running on different port when deploying using npm run build?
Thank you
Did you consume the GO API from ReactJs Page?
Does the GO API serve directly to public or running behind Nginx or Apache?
Maybe you need to ensure from Developer Tools within browser, does the request actually responded with cors issue.
If yes, you need to ensure whether the webserver (Nginx, Apache) does not interfere the cors. Or you just have to set it on your webserver (nginx, apache) config.
I have react app and nodejs api server. React app make fetch requests to nodejs server. React app and nodejs server deployed in own containers.
The problem is I can access nodejs server directly in browser, so is there way to 'hide' nodejs backend server, and let access only through frontend.
It should work something like this
React app make fetch request
nginx intercept request and forward to nodejs server
nodejs handles request
I think it can be done with nginx reverse proxy or docker networks or somehow...
yes there is. What you do is run a docker-compose that runs 3 docker containers. One container runs nginx, the second one runs create-react-app host ui, and the 3rd one runs a node js api. You then set the nginx routing rule for all /api/* routes to be reverse proxied to the nodejs api then you make sure all other get requests /* go to the create-react-app being hosted.
Here is a similar example on medium: https://medium.com/#xiaolishen/develop-in-docker-a-node-backend-and-a-react-front-end-talking-to-each-other-5c522156f634
I have a react app with these directories :
-node_modules
-public
-src
when I run it ( npm start) it will be started !
On the other hand I have some nodejs database config file and server.js that I don't know where to put them.
Moreover I want to know How can I start both apps together and generally how to merge these two apps ?
I'm new to both of these apps BTW. Thanks.
Probably the concept you are trying to understand is about two applications. The first one is called backend (server.js). The second one is the frontend (react app). Usually, you will run them separately (check this tutorial). Let's suppose:
Backend will start on port 5000 and serve an API.
Frontend will serve pages (HTML + Javascript) and might run on port 3000
So, you need to open two terminals (or prompt on windows) and start 2 process:
Terminal 1 - Backend
node server.js
Terminal 2 - Frontend
yarn dev
In this case, you can make HTTP requests directly to your API (backend) calling the backend. For example: http://localhost:5000/api/something
If you hit http://localhost:3000 you should see your web page loaded by index.html file and all react application.
The frontend is just the user interface running on client's browser. So it has to make requests to the backend to actually save and load data (where the database resides).
It's also possible to serve the frontend files using your backend but it seems that the concept you need right now is the separation of frontend and backend.
Hi Im running my frontend (create-react-app) and backend server (express.js) on different ports but on the same host.
For example: frontend is on 127.0.0.1:3000 and backend on 127.0.0.1:3003.
in my package.json:
{...
"proxy": "http://localhost:3003",
...}
Everything worked fine till I didn't migrate my app to remote server.
My app started to refresh unexpectedly when I'm trying to send http request (axios) to server (probably due to bad proxy settings).
So I have frontend app running on 35.125.320:10:3000 and server is running on 35.125.320:10:3003. My http requests was unexpectedly cancelled. (I checked the network ). So I changed my proxy settings to
{...
"proxy": "35.125.320:10:3003",
...}
but anyway my app is still refreshing when Im trying to make http req. on server. I think the problem is that I can't reach my express backend server. So proxy is forwarding my requests badly.
UPDATE
scenario:(Im doing two post requests)
1) first request still passed (app is not refreshed)
2) same request passed (but sometimes app is refreshed)
3) second is still cancelled by browser.
QUESTION
How can my frontend communicate with backend server via proxy when they are running on different ports but on the same server and domain ??
Thanks for the answer.
Solution:
The problem was that I used proxy in production that is only suitable for development.
I added this line in my express.js server :
app.use(express.static(`${process.cwd()}/build`));
app.use(express.static(`${process.cwd()}/public`));
I make a build and serve js,css files from my build folder. And also I needed serve static files (images, folders, etc...) from my public folder.
This problem can also cause cancelling http request by browser on production. Means, requests weren't able to reach server.
To make your app publicly available, you will want to make a production build. You mentioned in a comment that you "run npm build and then serve this build as static file in express.js". This is a great way to make your react app publicly available. As it says in the create-react-app documentation:
npm start or yarn start
Runs the app in development mode.
When running yarn start or npm start, you are also given a notification that says "Note that the development build is not optimized." The best option will be to run yarn build or npm build and find a way to serve those static files as you are doing.
I have an app that uses a React/Redux client (generated by create-react-app) and it communicates with a Node/Express api. When I run this during development, it works perfectly.
I just deployed to Heroku for the first time however, and only the client side of my app is working. I get error messages in the console that the api routes return a 404.
Any ideas on how to solve this? I think it must be something simple like adding a script to package.json.
UPDATE: SOLVED: The issue was a freaking Procfile. Make sure to include a Procfile and write web: node server inside.