Made withReactClip

How to Create a Express/Node + React Project | Node Backend + React Frontend

A

Arpan Neupane

Creator on the React channel

Watch on YouTube ↗

549K viewsJul 28, 202112:49 runtime

Learn how to create a full-stack project by integrating an Express.js and Node.js backend with a React frontend. This tutorial guides you through setting up a project structure with `client` and `server` directories, initializing a Node.js server with nodemon for live reloading…

Chapters

#react#clip#frontend

Project Structure

The project is organized into a main directory containing two subdirectories:

server/: Contains the Express.js and Node.js backend code.
client/: Contains the React frontend application, created with create-react-app.

Backend (Server) Setup

Initialize Project: In the server directory, run npm init -y to create a package.json.
Install Dependencies: Install Express for the web server (npm i express) and Nodemon as a development dependency for live-reloading (npm i -D nodemon).
Configure Scripts: Add scripts to package.json for running the server:
- "start": "node server.js"
- "dev": "nodemon server.js"

Creating the Express API

A simple API endpoint is created in server/server.js to serve data.

The endpoint is defined at the /api route.
It responds to GET requests with a JSON object containing an array of users.
The server listens on port 5000.

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.json({ users: ['user1', 'user2', 'user3'] });
});

app.listen(5000, () => {
  console.log('Server started on port 5000');
});

Connecting Frontend to Backend

Important
Proxy Configuration: To simplify API requests and avoid CORS (Cross-Origin Resource Sharing) errors in development, add a proxy key to the client/package.json file. This forwards any unknown requests from the React app (running on port 3000) to the backend server (on port 5000). "proxy": "http://localhost:5000"

Fetching Data in React

Data is fetched from the backend using React Hooks in client/src/App.js:

useState: A state variable (e.g., backendData) is created to hold the data fetched from the API.
useEffect: This hook runs after the component renders. It contains the fetch logic to call the /api endpoint.
- Because of the proxy, you can use a relative path (/api) instead of the full URL.
- The fetch call is followed by .then() chains to parse the response as JSON and update the component's state with the received data.
- An empty dependency array ([]) ensures the effect runs only once, on the initial render.

Rendering Data

Conditional Rendering: The component checks if the data has arrived. A 'Loading...' message is shown while backendData.users is undefined.
Mapping Data to Elements: Once the data is available, the backendData.users.map() function is used to iterate over the array and render each user inside a <p> tag, creating a dynamic list from the API response.

Project Structure and Initial Setup

All right, hey everybody, welcome back. In this video, I'll be showing you guys how to set up a project with an Express or Node backend and a React front end. And we'll basically be setting up an Express backend API and display the data from the backend API onto the front end using React.

So what I've done here is I've opened VS code inside of this folder called express-react-project and what I'm going to do is create two folders called client and server. So I'm just going to press this new folder icon and one of these will be called client and the other one will be called server.

This client directory will contain our React code and this server directory will be where we write all of our Express inside of. So this backend is the server folder and the client is our front end. Next, we can move on to setting up our project files.

Initializing the Node.js Backend

So I'm going to first set up our files in the server. So I'm just going to cd into the server directory and then run npm init -y to answer yes to all the questions and to generate a package.json file that you see right here.

And then here, I'm going to change my server's file name to server.js. If you want to keep it at index, you can, but I just prefer the name server.js, so I'm going to rename it to server.js. And I'm also going to create a server.js file, so touch server.js.

And I'm also going to install Express. So I'm going to do npm i express. Okay, and then I'm going to install Nodemon so that if we make any changes within our server file, it'll automatically restart the server. So I'm just going to do npm i nodemon and then I'm going to do -D to basically note that it's a dev dependency. So it's going to install Nodemon.

And then in our scripts, I'm going to create a script to start up our server. So start is going to be node server and then I'm going to put dev for nodemon server. And you'll understand this once we start up our server file. Okay, and so right now we've installed Express and Nodemon and this is all we need for right now. We'll install packages later on if we need them. So now that we have our server configuration done, we can move on to the client configuration.

Setting Up the React Frontend

So I'm just going to cd out of this directory and then cd into client. And then here, what I'm going to do is just create a React project. So I'll just do npx create-react-app . to create it in the client directory. And this process will take a while, so I'll cut back to the video once the React project has been created.

All right, so now that our client project has been created, I'm just going to go on into this client directory, src, and then I'm just going to remove all the boilerplate code. So I'm just going to remove everything in App.css. Okay, and then I'm going to remove everything in App.js and I'm just going to replace it with a normal functional component. So I'm just going to do rfce so that we get a functional component like this.

And now that we have this setup, we can start setting up the backend API in our server.js file. So we're going to set up the backend API first and then start our server, and then move on to displaying the data from the back end onto the front end in this App.js file.

Building the Express API Endpoint

Now to set up our backend, we're going to need to import Express first. So I'm just going to do const express = require('express'). And then in order to create our app, I'm just going to do const app = express(). And I'm going to set up a route for the API, so I'm just going to do app.get('/api', (request, response) => { ... }).

And then here, I'm just going to send it a JSON array of users. So I'm just going to do res.json({ users: ['user1', 'user2', 'user3'] }). And this will be equal to an array of users basically. So I'm just going to do user one, user two, and user three. All right, and this is basically our backend API right here. And in the front end, what we're going to do is basically fetch this user's array and display every single user.

Okay, and in order to start up our backend, I'm going to do app.listen(5000, () => { ... }). All right, so the server is going to be running on port 5000 and the client is going to be running on port 3000, because React by default runs on port 3000. And then once the server is listening on port 5000, we're going to need some sort of message to tell us that it's listening on 5000. So we're just going to do an arrow function, and this will just have console.log('Server started on port 5000').

Okay, and then to start up our server, I'm going to go into the server directory and I'm going to run npm run dev. And the reason that we're going to need to do npm run dev is because in our package.json, this dev right here will call nodemon server. All right, so when we run this, it'll start up the server with Nodemon. So if we need to add anything else, the server will automatically restart and we don't have to do it manually. So I'm going to hit Enter. And right here, you can see that it says server started on port 5000. So if we go to our browser and type in localhost:5000/api, you can see that it has returned the JSON data right here of the user's array with user one, two, and three.

And next, we just need to display these users onto the front end with this App.js file.

Connecting React to the Backend API

And to display these users, we're just going to use useEffect to fetch the API and then have these users. We're going to have them stored inside of a variable and then use that variable to display the users on the front end.

Now to get started with the front end, I'm going to open up the package.json file that you see right here in the front end. All right, and I'm going to create a line called proxy, and this will be set to http://localhost:5000. Okay, and we're putting this line so that we can make relative API requests and also avoid any issues that we might run into with cross-origin.

So next in our App.js, I'm going to import useEffect and useState. All right, and if you don't know what these two are, I have videos on them which will be on the top right-hand corner of the screen. And next, I'm going to create a state variable which will contain the back-end data that we get from the backend API. So I'm just going to do const [backendData, setBackendData] = useState(). Okay, and then next we're going to fetch this backend API. And to do this I'm just going to do useEffect(() => { ... }).

And then the effect will basically be a fetch API. So I'm just going to do fetch('/api'), and we just have to, we can just put the relative route instead of putting in localhost:5000 since we've defined this proxy in our package.json. Okay, and once we fetch the API, whatever response that we get from the API, we're going to get the response in JSON. And then once we get the response in JSON, we're going to basically get the data inside the JSON and set that data to this backendData variable right here. So I'm just going to set backendData to data. All right, and I'm also going to pass in an empty array so that this only runs on the first render of the component.

Verifying the Data Fetch and How It Works

Okay and next we need to start up our front end. So I'm just going to open up another terminal window and then go into client, so cd client, and then npm start. All right, and this will start up the front end on localhost:3000. So just give it a couple of seconds and you can see that it's loading up. And there's nothing on the page, and that's because we have nothing rendered over here. But it should have fetched this API.

And to check if it did fetch the API or not, we can just open up the network pane right here and then reload it. And you can see that there was a fetch request sent to the back-end API. And you can see that it has the users right here. So we know that this API fetching is working with useEffect and it's setting the data to this backendData as well, because of this line right here. And the next step is to just render the users onto the web page. Okay, so now that we see these users here, we know that the API fetching is working and we're done with fetching APIs. And we just need to display the users on to the web page.

But I just want to go a little bit, a little bit deeper as to how this useEffect works. So basically what it's doing is fetching this /api route, which is actually this API route in the back end, right? And whatever response that it gets after sending a GET request to the API will be this response you see right here. This JSON is the response that the client will receive, right? And then whatever data is in that JSON, we're going to set that data to this backendData variable. All right? And I've just passed in this empty array at the end so that this useEffect block only runs on the first render of the component.

Rendering API Data in React

Okay and next we just need to display the users. So to display them, I'm just going to write down some code and I'll explain along the way what it means. So I'm going to do if typeof backendData.users is equal to undefined, meaning that we haven't gotten the users yet or the API is currently being fetched, we're just going to display 'Loading...'.

Otherwise, meaning that the API has been fetched and we have the users, we're basically going to map them to a p-tag and display them. So to display them, I'm just going to do backendData.users.map((user, i) => ...) which is going to be the key for each p-tag. We're basically going to display them by doing p and then user and key will be i. Okay, so if we go here, you can see that it has rendered user one, two, and three from the back end. Now if we add another user to the back end, let's say we want to make user four, so user four, right? And then refresh this, you can see that it has user four. So this is basically our app and we're basically done with it.

Final Recap and Next Steps

All right so now that we're done with this app, I just want to recap on what we did. So first we created this back-end server with Express and this front-end with React, right? And in our back-end we set up a back-end API that returns a list of users, and what we wanted to do was show those users on the front end, which is in React. And to show them on the front end, we first set up a proxy in our package.json file on the front end. And then used the useEffect hook to fetch the API and then store the data that the back end returned using the useState hook inside of this backendData variable. And then to display the data, we first check if the data has been retrieved or not, and if it hasn't been retrieved, we just display 'Loading...'. Otherwise, meaning that it has been retrieved, we map each user to a p-tag and display them like this.

So yeah, that's basically it for this video. I hope you enjoyed and learned something. And if you did, make sure to leave a like and subscribe to the channel for more videos like this and turn post notifications on to get notified when I upload. And I also encourage you to add more to this. So let's say you want to make an app where you can, you know, post pictures, you can use Axios with React to send POST requests to the back end and, you know, handle those post requests and, you know, save that picture to a database or something like that. So yeah, there's many other things you can do with this as well. And this video is mainly just to help you get set up by connecting a React front end to a Node or Express backend. So yeah, with that being said, I'll see you in the next video.