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.
Related
I'm building an app with create-react-app and I'm serving the production version via serve. I would like to run it on port 80 and run it forever even after I log out of the terminal.
Look into learning a backend server framework like Express if you are interested in deploying your own production applications.
With Express, you can point specific URL requests to specific static files and apply any data retrieval / setting in the process.
There are also a number of specific resources available for transitioning create-react-apps to Express backends.
When you make this jump, if you haven't already, the important thing to remember is that you are essentially coding two applications, one is the frontend application that user sees, which is rendered in their browser by the bundled React code, and the other application is the backend server which routes and organizes those static javascript files for delivery to the users browser. When they connect to your server, they are sent to Express, which in turn (depending on the request) sends the React javascript.
Build application first,
sudo npm run build
Then,
sudo serve -s build -p 80
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.
So I'm building an end to end application (With node.js/mysql back end, react front end, and using the express router), but I'm having trouble setting up a local development server. I don't need it to be accessed from the outside world, just be able to load different pages connecting to the express router. I don't have any dev ops experience for this, so I'm trying to use nginx to point it to the router which I can't figure out. Is there an easier way to do this?
I also need to run this on a windows machine, which just makes everything slightly more complicated
It's not entirely clear from your description how your application is set up and what the role of Nginx is.
So I'll start from the beginning...
Nginx is primarily an HTTP server which can also function as a proxy for HTTP requests. If you've written a Node.js application using Express, you have written an HTTP server which can handle any routes you have set up and can also serve your static assets (ie. HTML pages, images, front-end Javascript, CSS, etc.). In this case, there is no need for Nginx - if you wrote something like the Express "Hello World" app, then you will see a message like "Example app listening on port 3000" and you can connect to your app by visiting http://localhost:3000 in your browser.
That's it - there's literally nothing else to your app and there is no need for Nginx (or any other HTTP server) to run your application.
Now that's not to say that there is no role for Nginx in your application, but it may not be as an HTTP server. One possibility is that you may want to set up Nginx as a proxy, to handle certain routes by sending the requests to your Node application. For example, I set up an application some time ago which uses Nginx to proxy API routes for my application to a Node application and to serve static assets directly. This may be what you have in mind - if it is, you will need to configure different routes in Nginx to serve different things (and unfortunately there's not enough information in your question to give suggestions on this).
As an aside, you're probably going to find this much easier to set up using Linux - perhaps the Windows Linux Subsystem, a virtual machine running Linux, or Docker.
You'll probably want to use
https://github.com/facebook/create-react-app
create-react-app my-app will set up everything you need (webpack, etc.), and then
npm start will start a local development server.
Should work on Windows, but I don't know, because I wouldn't use/recommend Windows ;-)
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.