Integrate a React Frontend with an Express Backend

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 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 :

const express = require('express');
const app = express();

app.get('/api/customers',(req,res)=>{
const customers = [
  {id:1 , firstName:'John', lastName: 'Doe'},
  {id:2 , firstName:'Rahul', lastName: 'Bhatia'},
  {id:3 , firstName:'Mark', lastName: 'Zuckerberg'}
];

res.json(customers);
})

const PORT = process.env.PORT || 5000;

app.listen(PORT,()=>console.log(`Server running on port ${PORT}`));

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.

ul{
  list-style:none;
  padding:0;
  width:30%;
  margin:auto;
}

li{
  font-size:1.3rem;
  line-height: 2rem;
  border-bottom:1px solid #555;
}

---

import React, { Component } from 'react';
import './Customer.css';

class Customer extends Component {
  constructor(){
    super();
    this.state = {
      customers : []
    }
  }

  componentDidMount(){
    fetch('http://localhost:5000/api/customers')
    .then(res => res.json())
    .then(customers=>this.setState({customers},()=>
  console.log(customers)))
  }

  render() {
    return (
      <div>
        <h2>Customers</h2>
        <ul>
          {this.state.customers.map(customer =>
            <li key={customer.id}>{customer.firstName} {customer.lastName}</li>
          )}
        </ul>
      </div>
    );
  }
}

export default Customer;

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.