Building a CMS in React (0.0.2) – Adding NodeJS

In our last tutorial, we set up our react boilerplate application. I love that boilerplate. I use that setup for every new app I start. It’s very useful! If you haven’t already you can either go through the tutorial or just skip it and clone the repo. In this tutorial, we will set up a NodeJS server locally and get our React app talking to it to make a simple GET request. Welcome to our second vertical slice!

Project Structure

The first thing we need to do is make room for our Node server inside our repo folder. That way we can keep both applications inside one repo. Currently your folder should look like this.

Let’s add two folders at the root of our project. React and NodeJS. After you’ve done that move all the react project files inside the React folder except the .gitignore file. Now your project should look like this.

Open up your .gitignore file. We need to now tell it to look inside the React folder for all of the folders and files it used to point to. Modify it to look like this.

Phew! Ok, enough of that. Let’s get going! Open up your terminal and cd into the folder NodeJS folder.

Project Initalization

If you don’t have NodeJS installed on your computer vist nodejs.org. If you have it installed go ahead and run this command.

npm init

If you’re not sure about what to enter don’t worry, you can leave them as blank or default. You can always update some of these fields later from your package.json file. If you look inside your NodeJS folder and open your package.json file, you’ll see the result of the command steps we just ran.

Suppot Libraries

Let’s install express and body-parser. Express will give us some RESTful verbs to work with and body-parser will allow our server to read JSON passed to it.

yarn add express body-parser

or

npm i express body-parser

Next let’s install nodemon. If you’re used to front-end applications automatically refreshing every-time you save this will handle that for our NodeJS server.

yarn add nodemon -D

or

npm i –save-dev nodemon

Now wire up nodemon inside your NodeJS/package.json file. By now your file should look like this.

Great! Now we can create our App.js file in the root of our NodeJS folder. We will require express, body-parser and we’ll need to add a listener to so our server can listen for HTTP requests.

Now if we run yarn start we will see our hello message.

We can visit our server in the browser by going to localhost:8000 and we will receive an error. This is because a browser call will make a GET request by default and we haven’t setup any GET methods. Remember that we added express. Let’s use that library to add our first GET handler.

API Routes

Make a folder called routes and create two files, index.js and test_route.js inside it.

Open up the test_route.js file and add the following code inside it.

Now let’s load this inside our routes index.js file.

Lastly, we’ll add the routes index to our main application index.js file. Open the file and add this code to line 5. require(“./routes”)(app, {});

It shouldn’t now look like this.

Now with your server running, you should be able to visit http://localhost:8000/test and see the following output!

React Integration

Now that we have our NodeJS server and our React application from the previous tutorial, let’s make a simple call from our React app to our NodeJS server. Open a new terminal tab and cd into the React folder.

Now inside the root of our React Application let’s install axios. Yes, JavaScript has the fetch API but I like to use Axios when I can. It makes the implementation details a lot cleaner and has more helper methods than I’ve ever needed. Feel free to check out the repository for a detailed look at all the features. Now run this command in your terminal.

yarn add axios

or

npm i axios

Now in your react application create a utils folder inside the src folder. Then create a data.js file inside the utils folder.

In the data.js file let’s make a reusable sendRequest method. It’s always a good idea to wrap 3rd party library integrations that will be used in many places inside a generic function. This abstracts the library away so that if you decide to switch this to fetch later or another library you only have to change it in one place. Go ahead and paste this code in.

Now let’s use this method to make a simple call to our NodeJS server. Open the App.js file in the root application, import our data file and add a sendRequest call to our test route inside componentDidMount method. We will console log the response. Your App.js file should look like this. I have the import on line 10 and the function on line 21-23.

Now if your React app isn’t running go ahead and run yarn start in your terminal from the React folder. Once your React application is running, go ahead and visit http://localhost:3000/ and take a look and your console. You should see the response from your NodeJS Server!

That’s it for this vertical slice! We built a simple NodeJS server, added a test route and then integrated our React application to talk to it! If you’re having any trouble getting your application working, feel free to clone my repo for this step!

In our next vertical slice, we will be setting up a Firebase account, connecting our NodeJS server to it and retrieving data all the way back to our React application. Once this is complete it will be very simple to scale up our application across the full stack.

Stay Tuned!