Setting up a Node.js Express server for React
I am going to walk through setting up your very own Express backend server on Node.js for your React app. I will be bootstrapping the React application with create-react-app! This process is lot easier to accomplish than it sounds at first, and if you have any prior experience with Express and Node.js, you will find this very familiar. Only this time we are gonna be adding React into the mix and setting up a proxy.
If you do not have any experience with Node.js or NPM, I recommend finding a tutorial to run through installation before moving on with this tutorial. I won’t be covering any of that below. I am assuming you already have Node.js and NPM installed and are ready to go with it.
Alright, now lets get to it!
Setting up the folder structure
Here is the folder structure we will be left with after the dust settles:
First, we need to create the express_react_example root directory for now. This will hold all of our files. Next we have the client folder that will contain our entire React application. We will make this folder when we run create-react-app a little further down. The node_modules folder is self explanatory, but this will contain all of the NPM packages for our server.js file. It will be created automatically when we install our NPM packages.
Lastly create the server.js file. This is where will create the Express server, so consider it the lifeblood of our backend. And then the package.json file we will create with npm init below.
So far at this point, you should have created express_react_example folder, and then a server.js file inside of it.
Lets create-react-app
Once the folder structure is set up, lets move on with installing React:
- From your Terminal (or Command Prompt) navigate to the place you have created the
express_react_exampleroot directory.
Once you are navigated into this folder from your Terminal, go ahead and run: npx create-react-app client | npx is not a typo!
This will create a react application named client inside of the express_react_example root directory. Bam! Simple as that. We have a working React application in 2 minutes.
Setting up the Express server
Now that we have React installed, lets go ahead and create our Express server inside of that server.js we’ve left hanging.
- First lets navigate to the root directory (express_react_example) from the Terminal and run the following:
npm init| This creates thepackage.jsonfile (don’t worry about naming or giving a description, just hit enter through it all for this example). - Then lets run
npm install express --save| This installs Express for us, and saves it as a dependency insidepackage.json. - Now inside of the
server.jsfile, lets go ahead and fill it with this:
- Line 1 and 2 is requiring Express and allows us to use it inside of our
server.jsfile. - Line 3 is setting the port that our Express server will be running on.
- Line 6 will simply
console.loga message that will let us know our server is up and running. - Line 9–11 is setting up a
GETroute that we will eventually be fetched from within our client side React application.
Alright, now that we have our server.js file squared away, lets move onto adding a proxy to our React application. This is an important step. We have to let the Webpack development server our React application is running on know to proxy our API requests from the client to the API server. Our API server is the Express server we just created, and it will eventually run on port 5000.
Note: The Webpack development server was created automatically when we ran create-react-app
Setting up the proxy
This is a way easier step than it probably sounds at first. We need to navigate into our client directory and locate it’s package.json file and add to it:
"proxy": "http://localhost:5000/"
our package.json file with our proxy addedAnd that’s literally all there is to it. This will let Webpack know to proxy our API requests to our Express backend that will be running on port 5000.
Calling our Express backend from React
Good news, we have 99% of the work out of the way!
We now need to navigate into client/src and open up the App.js file inside it. We will then make some quick modifications to it:
Inside of componentDidMount() starting on line 10, we call the callBackendAPI() function on line 16. That function will fetch our GET route created in our Express server, and then set { data: null } to the response from the fetch request.
On line 33, we render the new data stored in this.state.data to the DOM.
Finally, lets fire up the servers
We need to first navigate into our root directory express_react_example and run node server.js from the Terminal to start our Express server. After you do this, you navigate to http://localhost:5000/express_backend in your browser, and you should see:
{“express”:”YOUR EXPRESS BACKEND IS CONNECTED TO REACT”}
This lets you know that your Express server is up and running, and that our GET route is working and most importantly, will be able to be fetched from the client side. Notice the URL path matches the path we set in our GET route in server.js on line 7.
Lastly navigate to the client folder in the Terminal, and run npm start to fire up the React dev server. It will be running on port 3000, however it will open in your browser automatically once you start it. When you have done this you should be left with:
And finally, we can see that we are successfully rendering the fetched data from the GET route in server.js to our React app on the client side. This is the string we set on line 10 in server.js !
Note: If you were to terminate your Express server, your React server would run just fine, and vice versa. You would just lose all connectivity to the backend, and nothing would be displayed.
Annnnnnnnnd that’s it! There is a lot more you can do with an Express backend, like make calls a database for example, but this simple example shows you how quickly a backend Express server can be created and connected to your client side React application, with no sweat at all!
