Hi Guys!👋 Welcome to this article on, how to setup React and Express for your next Web Project. Let me get straight to the point!

Why this article?📄

As a Web Developer, everyone would have struggled when they proceed to their next stage. This article helps for those who's proceeding from frontend to backend development. Read the complete article for setting up the React + Express environment to develop your first full-stack application.

For those of you, who don't know what React and Express is:

React - React is a popular JavaScript library for building user interfaces and the main advantage of it is, its reusable components.

Express - Express is a node.js framework that is used for the backend.

React + Express

React:⚛️

I have already wrote an article on, How to get started with React? A Beginner's Guide! .

A small recap:

Open a new directory using VSCode, then open terminal by pressing Ctrl + ` and type the command below

npx create-react-app my-app

Open the package.json file and add the following code in it.

"proxy": "http://localhost:5000/"

Here, the localhost:5000 is the URL at which the server runs, usually 3000 is default port number for react app, so you can have any port number for the backend other than 3000.

{
  "scripts": {
    "start": "npm start",
    "build": "npm build",
    "test": "npm test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000/",
}

Express:🕸️

Open a new directory, for backend code and open terminal and type the command:

 npm i express dotenv cors nodemon

💡express - modules for working with expressJS

💡dotenv - used to access values from .env files

💡cors - package for providing a Connect/Express middleware that can be used to enable CORS with various options

💡nodemon - it is used to automatically restart the server after any code changes without manually type the command every time.

After the installation, create a new file named server.js in the root of directory, this file serves as the main file of the server.

Open package.json file and replace the corresponding part with the following

{
  "scripts": {
    "start": "nodemon server.js"
  }
}

Create a .env file at the root and type the following

PORT = 5000

Now, open the server.js file and import the packages installed.

const express = require("express");
const dotenv = require("dotenv");
const cors = require("cors");
const app = express();
const PORT = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

Next, we should listen to port at which the server is going to run:

app.listen(PORT, () => {
  console.log("Server started and Listening on port: " + PORT);
});

After saving the server.js file, now run the command in the terminal

npm start

The server will start and displays the message in the terminal as

Terminal Image

Setup Completion 🏞️

The setup is complete and now we can send requests to the server from the react app and receive responses from it faster and in an organized form.

Conclusion

I hope you found this article helpful. Comment below if you have any doubts💭.

Let's connect on Twitter and Github .

Thanks for reading 🙏. Happy Coding!👨‍💻

How to setup React and Express 2022!

Table of contents