Setting Nodejs Backend for React App
In this article, I am going to walk you through setting up your own Nodejs backend server for a React application. Both of them are often used together to build real time fullstack web application with a database storing the data or information. The database is of choice, varying from MySQL or Postgresql to NoSQL database such as MongoDB. These are just some common use database use case. However, for the demonstration, I am not going to use any database in this walkthrough for brevity. If you feel to use one, please go ahead.
There are only a few requirements to continue to read this article. You need Node.js and npm installed on your local machine as well as
create-react-app installed as a global dependency. If you do not have it, run the following command and install it.
In some cases, you might have to give root permissions when installing a global dependency.
For Nodejs backend I am going to use HapiJS. If you are not familiar with it, it will be fun as you will be learning a lot of new things.
Getting Started with the Backend
To start, we need an empty directory inside which we can have our server and client live alongside each other. Initialize it by running the command
npm init and you are ready to install Hapi js as a framework to build the web server.
After Express, Hapi is quite popular among teams and individuals who write the server side of their application and want to use Nodejs. It is currently being used by organizations such as Walmart and Yahoo and has an active community. After the dependency is successfully installed, create a new file called
This is the most basic server you can create using Hapi. We start as usual by requiring Hapijs dependency and create a new object with a configuration of our own. See the
port above. After that, we add a simple route that uses HTTP method
GET and has a handler function or usually called a callback function to return the response back to the client when a request comes in. Lastly, we are creating an asynchronous function to bootstrap the server using
async/await syntax. The
async/await requires you to add a
try/catch block every time you want to catch the errors. We
console.log in case any error occurs running the program and use Nodejs global
process object to make sure that program exits gracefully in case of one. To see it in action, run
node server.js and it will eventually run on port
Setting up a React app
Now that we have built our server, let us create the front end of our application. We have already installed the main ingredient we need to start with. Open your terminal and type
This will create a react application named
client inside the folder where we previously build our server. It is as simple as that. Now you can definitely traverse in the
client directory and run the React app separately on a different port. However, this is not what we want.
We want to establish a setup that will make our React app and uses the server URL as a global variable. This is easier than the last step and what you think. Navigate to client directory and locate
package.json file. Add the following configuration to it.
And that's it. This is all you need to do. But wait! How is this even possible? The answer lies with the
create-react-app does all this automatically because behind the scene it is using webpack. Webpack has a development server that uses a proxy to handle the API server or in other terms, it requests to our Hapi server running on port
8000. This is one of the biggest advantages I have found for using create-react-app so far. As a developer, I do not have to worry about all the configuration Webpack might be handling behind.
Conclusion: Running the app
Let us now test a route that sends the data from the Hapi backend server to React front-end side. Create a route in
server.js to serve the data.
To test this route, let us use REST client like POSTMAN or Insomnia and see if the data is being requested at the route
Now let us display this data in our front end. Traverse to
client/App.js file and do the following.
We start by defining a local state that will contain the data coming from the backend inside
componentDidMount() life-cycle hook method. This further calls
fetchData() that actually fetches the data from the API url
/mock. Since we have already defined the complete URL as
proxy we do not have to write the complete url. Finally, we are able to see the data as below.