How to Setup React and Node JS in a project

Hi All,
I am Ganpat Kakar. I am a software engineer with working experience of 4 years in front-end and backend web-development.

Here we are going to setup react js plus node js, full-stack environment.

React Setup :-

Open your work directory and run these commands in the terminal =>

1. mkdir hello_fullstack
2. npm i -g create-react-app
3. cd hello_full
4. create-react-app client
5. cd client/
6. npm start
7. open package.json and add this line before dependencies :- 
   "proxy": "http://localhost:3001/",
   Sou our client folder package.json will look like:-

{
 "name": "client",
 "version": "0.1.0",
 "private": true,
 "proxy": "http://localhost:3001/",
 "dependencies": {
 "react": "¹⁶.4.1",
 "react-dom": "¹⁶.4.1",
 "react-scripts": "1.1.4"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test - env=jsdom",
 "eject": "react-scripts eject"
 }
}

Our react app setup is done. Hit the url http://localhost:3000/ in your favourite browser.

Node Js Setup (Express Framework) :-

we will continue with the previous react setup terminal:

1. cd .. (Navigate terminal to hello_fullstack)
2. mkdir server
3. npm install express-generator -g
4. express - - view=ejs server
5. cd server
6. npm install
7. npm install nodemon (nodemon will keep our server running so we done need to start server after making every single changes)
8. Open package.json of server folder and find script

"scripts": {
 "start": "node ./bin/www"
 }

change this code to

"scripts": {
 "start": "nodemon ./bin/www"
 } 

Our node js => package.json will look like :-

{
 "name": "server",
 "version": "0.0.0",
 "private": true,
 "scripts": {
 "start": "nodemon ./bin/www"
 },
 "dependencies": {
 "cookie-parser": "~1.4.3",
 "debug": "~2.6.9",
 "ejs": "~2.5.7",
 "express": "~4.16.0",
 "http-errors": "~1.6.2",
 "morgan": "~1.9.0",
 "nodemon": "¹.17.5"
 },
 "main": "app.js",
 "devDependencies": {},
 "keywords": [],
 "author": "",
 "license": "ISC",
 "description": ""
}

Our node js (express setup is done).
But before we start our server code we have to change few setting for node js.
Open your favourite editor and open hello_fullstack folder.
Navigate to server/bin/www =>
Here you can see a line "var port = normalizePort(process.env.PORT || '3000');"
So change the port from 3000 to 3001 or any other port no, but not 3000. Because we are using port no 3000 for react app.
So now our react and node js both are working, but they are not connected, both react and node js cannot do communication.
Here we work on the proxy part which will work of linking our react and node js projects.
So back to our terminal => hello_fullstack directory

1. npm init -y
   It will create a package.json file.
   Open your editor and edit this package.json file with below code. (Note this package.json file is outside the server and client folder)

{
 "name": "kmail",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "client": "cd client && npm start",
 "server": "cd server && npm start",
 "start": "concurrently - kill-others \"npm run server\" \"npm run client\""
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "concurrently": "³.5.1"
 }
}

and in terminal run command => npm install
Hurreee!!!!! Our setup is done.
Now its time to test our React + Nodejs project is running.
Navigate to project folder (hello_fullstack) in our terminal and run command =>

npm start

Our project is running properly on browser http://localhost:3000/ our react is working and on http://localhost:3001/ our express is working.
Now make some ajax calls from react app to call our server api's.
Best of luck with your development.
Thank you for reading.