Often time working on a full stack project can be intimidating. I often found myself in the same situation whether it is a personal or proffesional project. When I started to work with React and Node.js, the first question that just came up was, How do I even connect and run these two together?
This will be two part series where we look at different approaches to run React and Node.js in development environment.
- Connecting & Running with Concurrently (this post)
- Using Docker (second post)
Connecting React to Node.js (also works for any backend) is fairly easy and commonly known as React Proxy. You just need to add proxy field in your package.json of your React project and point it to your development backend server.
{
"proxy": "http://localhost:5000"
}
If you want to learn to more just click here.
Running React and Node.js is more complicated than connecting. This will be two part series where we look at different approaches to run both of them in parallel. Both approches are different in many ways i.e. tools used, folder structure.
Using concurrently
Concurrently is a package which can run multiple npm scripts simultaneously.
~ Initial setup
$ mkdir awesome_project && cd awesome_project && npm init -y
This will create a package.json in our project with some default options.
~ Creating react app
$ npx create-react-app client
This will create a folder named client which holds our react app.
~ Some Node.js code
Create index.js in root of your project and paste the following code if you don't have server setup.
#!/usr/bin/env node
const http = require("http");
// Port Environment variable
const PORT = process.env.PORT || 5000;
// Creating the node server
const SERVER = http.createServer();
// Firing up the server on selected port
SERVER.listen(PORT);
SERVER.on("listening", () => {
console.log("[Server]::LISTEN:%s", PORT);
});
// Callback function for checking connecting or error
SERVER.on("error", error => {
throw new Error(`[Server]::ERROR:${error.message}`);
});
~ Installing concurrently
npm i -D concurrently
To make concurrently work with React and Node, we have to add some script in package.json.
{
"scripts": {
"server": "node index.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
}
Finally, we'll have a folder structure somewhat like this.
> awesome_project
> node_modules
> client # This is our react front-end and else will be our node.js backend
> node_modules
> src
- package.json
- index.js
- package.json
Now dev script will run both React and Node.js app in our project and the proxy will connect both of them.
$ npm run dev
Using concurrently is perfectly fine for most of the developer (this is also the same approach which I used initially). But It has one problem that I find annoying which is folder structure (might be different for you).
In the second post we'll be looking at the docker way. So, If you don't know docker just stay here.
Latest comments (18)
I have the same project structure as yours and same files as yours.
I have installed concurrently, added proxy in package.json of client. Still the concurrenly command is giving the error.
dev-to-uploads.s3.amazonaws.com/i/...
The error i am getting is this one:
dev-to-uploads.s3.amazonaws.com/i/...
try this :
"client": "cd frontend/ && npm start --perfix frontend",
I also have the same problem, have you been able to solve it?
Yes, it's working now... The issue was with the OS version and windows , concurrently was not working in some circumstances
Can you please tell what OS and bit version you are working on ?
were you able to fix this error? I got the same error and unable to fix...
Can you please help
Thanks
Nevermind..I figured out the issue..it was a typo in the proxy address :S
Thank you for this Vikas!!! I'm so happy right now..I connected my project's React Front-end to Node Back-end!
Would you know anything about how to get this built and then hosted?
Is it preferable to use two package.json for frontend and backend?
How would you hook up Express, and React with one Package.json?
And if you were to set up react from scratch. Not using create-react-app but setting up webpack?
It's preferable so you can separate your client-side packages from the server-side ones. It's more organized.
Why do you want to use a single package.json for both frontend and backend?
IMO You should always make your apps i.e. Frontend and Backend decoupled from each other as much as possible which I always do. I personally don't have any reason to use single package.json for both and never really tried.
Closest thing that I have done is that after building react app. I served the static build from the express server.
Ummm.. Setting up react from scratch with webpack, I will pass.
Hope this helps. :-)
Can you show how can someone serve the static build from express server.
In some automatic way (not just copy/paste the build folder in the public folder of express)
You do need to serve the static build from the server.
Just serve the build files when
NODE_ENV==="production"The automatic part is that the copy/paste part will be handled by your docker image.
I was just wondering what common practice is. And, how to set it up if you were only using a single package.json.
I'm working on a project with a buddy; They prefer not to use create react app. Because it's "bloated".
All examples i've seen have like you said Frontend and Backend decoupled from each other.
Thanks for the reply!
IMO, create-react-app is not bloated. It's a production ready environment. But, thats a whole another discussion.
And, most developers prefers a decoupled setup. If you want a decoupled setup, then just look into yarn workspaces.
please specify which package.json , coz there is 2
If you want add
proxy, add it in the client'spackage.json.Thx for your great effort
Thats i told for clarity