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.
https://gist.github.com/3b92caf2110a22cb1e936c905e1092a3
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.
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.
https://gist.github.com/c8bc417408ae6827e5d2e4ad17bcf192
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 server.js.
https://gist.github.com/2326462903e20cf12a4cf541fe43b45c
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 host and 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 8000.
(ss1)
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
https://gist.github.com/3d77a2fcab715ac70e41199d9b74cac0
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.
(ss2)
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.
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.
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.
https://gist.github.com/d482bf72cf0d77801624dcee15287151
To test this route, let us use REST client like POSTMAN or Insomnia and see if the data is being requested at the route /mock.
(ss3)
Now let us display this data in our front end. Traverse to client/App.js file and do the following.
https://gist.github.com/59c86a95c9d89833b7e1c5d8bc2552f6
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.
(ss4)