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.
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 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
I have a nest.js webserver listening on localhost:3000 and an angular frontend served to localhost:4200 (with dev server). These ports are the defaults. My authentication flow consists of sending an access-token in a cookie to the frontend which doesn't get send back on subsequent calls because of different domain issues by the different ports. Can I overcome this issue somehow? I understand that if I don't run npm serve for the angular application only npm run build then a development server won't be started and I can serve the static files with nest.js which would solve the domain issue for the cookie, but this way I would loose watch mode and hot reloading for angular. Any suggestions?
Your nest.js webserver needs to set the Access-Control-Allow-Origin header, so that the browser running the frontend doesn't complain about communicating with that host.
So, Iv'e been trying to setup a small example of a server with 2 factor authentication features. I'm using nuxt as the frontend and flask as the backend.
While developing locally (using npm run dev) I was able to get the chain of communication to work:
The webpage sends a request to server/<some_request>/<some_param>
The proxy module redirects it to http://localhost:5000/<some_request>/<some_param>
The request is sent by the axios module
flask receives the request, processes it and answers.
When trying to deploy this application to a dreamhost server, I used npm run build and npm run generate to serve the website statically. I was able to receive my webpage when browsing.
But when trying to login, the chain described above broke, and requests to server/<some_request>/<some_param> were answered with 404. In the server's command line I saw that flask didn't receive any request, so I assume that this is some issue with the proxy module.
I'm not really sure how to debug this problem, so any help or ideas will be appreciated.
Okay, so I got everything working, and here are my conclusions:
The proxy module, makes the redirection in the client side, meaning that I would be trying to access my own machine when redirecting to localhost:5000, rather than to the server.
The proxy module can't be used when using npm run generate (there's a warning that says it's disabled).
Since I wanted to redirect to flask from the client side (browser), I couldn't just run it as is. I had to register another subdomain and use Passenger to deploy my app (A guide to enabling passenger, getting started with python in passenger and A great guide to deploying flask over passenger).
I just starting to learn MERN Stack development as a former .Net developer. I wanted to develop my skills in this area and after lots of researching I just can't figure it out why we need to have two different running port/app when we working with react js?
Firstly I have developed some simple application by using NodeJS, Express, EJS View Engine and already deploy it to Heroku. So far, this works fine for me. I can develop all my personel site with those technologies including MonoDb later. But to become complete MERN Stack developer I started to search React and realized that it only works with giving another port to seperate it like client application. Why we can't use react and all other things in under one port?
This confused me when I get two different web page under;
http://localhost:5000/ (React App)
http://localhost:3000/ (Server Side: opens different html given by me using EJS)
Apperantly if we give same port number with server (3000) in react's package.json file then it gives following warning;
Something is already running on port 3000.
npm run client exited with code 0
Is it due to nature of ReactJS?
You totally can run React and Node on a single port - but it doesn't make for an efficient workflow.
The core answer to your question lies in separating front-end routing from back-end routing. When using React Router your application manages the UI based on the URL parameters.
i.e
http://localhost:3000/some-ui-path
At the same time when using Node as a back-end to respond to HTTP requests - you send the requests to specific URL paths.
i.e
http://localhost:3000/some-api-path
Separating the ports easily lets you differentiate between which route should be handled by React Router on the front-end and which route should be directed to the Node on the back-end.
http://localhost:3000/some-ui-path = React Route
http://localhost:9000/some-api-path = Node HTTP Route
In your configuration files you can customize your front and back end setups so that any request to a certain path will be redirected to your node server.
An Example:you can define that any path prefixed with /api/ should be proxied to port 9000:
http://localhost:3000/api/some-api-path ==> http://localhost:9000/some-api-path
You can use whichever ports you like but 3000 5000 and 9000 are common defaults used by starter kits and module bundlers like create-react-app and webpack
Hope this helps, let me know if I can explain further!
You cannot run React and Node.js server in a single port.
Why?
React uses webpack to bundle all the component files into a
single JS file. This JS file is then served by a
webpack-dev-server which is a part of webpack.
This webpack-dev-server is needed only during development. In production, you use npm run build or yarn build to bundle everything into a directory called build which will be served as a static asset by your Node.js server.
So, during development, you need to use two different ports for:
webpack-dev-server: This by default runs on 3000. If you try to run your Node.js server, you'll get an error.
Node.js server: This should run on port other than 3000.
Note: webpack is used as a default module bundler when creating React app using create-react-app.
Let's start from the port. Port is a logical construct that identifies a specific process or a type of network service. Port is a communication endpoint. And you have two different services, so it seems logical to use different ports generally. Your question is really good. I'm waiting for new answers.
Also a .Net developer here! I had the exact same question around myself and this article seems to clarify a little for me.
It seems like you need two servers (two ports) for development only. In production, you will only have an API server running, with some endpoints simply serving static files in /build directory like:
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
I think the reason why we run two servers (one react webpack server and one API server) ports in development is because 1) we don't want to run npm build every time you make a change and 2) because of not needing to build every time you make changes, it allows hot-reloading for fast development.