Integrate a React Frontend with an Express Backend

Hey there folks, a very happy new year to all the readers. I got really good support on my last 2 blog posts, which really made me feel good and here I am writing another one for you guys. I hope this one helps you guys and you like it as well. So, many of you might be using React for their frontend and maybe you guys also know about Express. But, the part where most people struggle is how to integrate them together or how to use both of them in a single app to create a full stack web application. If you are one of those guys, you landed in the right place, in this post, we will be concurrently using both React and Express to run both front end and back end servers in one npm command. So without further due, let's get started. I am assuming that most of the people reading this out have a basic understanding of NPM, Express(check this if you don't) and React.

Navigate inside your projects folder and start a new NPM project by hitting

npm init

Go through the set up of the process and once you are done, we need to install all our dependencies needed for this project.

npm install express concurrently --save

npm install nodemon --save-dev

Now, let's add our scripts to the package.json file :

"scripts" : {

"start":"node index.js",

"server":"nodemon index.js"

}

Now let's wire up our entry point,i.e. index.js :


I guess this is basic express stuff which doesn't need any explanation. If you are struggling with this, check out my blog post for basics of Express.

Now lets scaffold the React app using create-react-app. 

create-react-app client

 Now let's create the only component we will need for the React part, i.e., Customer. Navigate to src folder and create a folder called components. Inside that folder create Customer.js and Customer.css and populate the following code in them.

All of this code can be found in this Github repo.

That's it. We now have a express server working alongside a React app and we are fetching the list of customers from our Express backend and rendering into our React app. Now, I assumed that most of this stuff was basic and I just told you how to bundle things together. If you are not clear of any part, please leave a comment below and I hope this post was useful for you guys. Once again, I wish a very happy new year to all my readers and thanks for reading this. Keep coding, keep developing and have a great year ahead! :)