Frontend Weekly
Published in

Frontend Weekly

Calling Express API in React using react-script

Actually, I am new in React and I am trying to fetch backend API using ‘fetch’ method which is already included in create-react-app.
Here, I will tell you how to fetch data from the server side and display it on the Frontend.

Example : express-react

Step 1: Create the Express app and configure the port.

First, install the express-generator, create the express app and install all its dependencies. I used template engine as .ejs and -g for global installation, i for install.

$ npm i -g express-generator
$ express — view=ejs express-react
$ cd express-react && npm install

Change the port 3000 to 3005 or any other port.
Because, By default, Express is running on port 3000 and create-react-app is also run on the same 3000 port. To avoid the conflict between them, start Express on port 3005.

  • Edit the ‘express-react/bin/www’ and change the port from 3000 to 3005.

Step 2. Create the React app in express-react directory and configure its proxy.

Install the create-react-app globally, and create ‘client’ inside the ‘express-react’ where all the react stuff is installed and at last create a proxy in a ‘package.json’ file.

Proxy use:
React makes an API request to localhost:3000, React development server And then the development server simply proxies that request to the API server, and negating any CORS(Cross-Origin Resource sharing) issues.

$ npm i -g create-react-app

Inside the express-react, run this command

$ create-react-app client

Configure the proxy in ‘express-react/client/package.json’.

Step 3. To Run the express and react server concurrently.

Install the ‘concurrently’ module inside the express-react.
Remember it is installed in express-react, not in the express-react/client directory.

$ npm i -D concurrently

To run both servers with 1 command ‘npm start’, Edit the ‘express-react/package.json’ , In “script” change, “start” to

  • “start”: “concurrently \”node ./bin/www\” \”cd client && npm start\””

At this point there are 2 servers ,
1- express server by ‘node ./bin/www’
2- react server by ‘cd client && npm start’

Step 4. Fetch the data from express and display it on React component.

Edit the ‘express-react/client/src/App.js’.

import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(){
super();
this.state ={users: []};
}
componentDidMount() {
fetch('/users')
.then(res => {
console.log(res);
return res.json()
})
.then(users => {
console.log(users);
this.setState({ users })
});
}
render() {
return (
<div className="App">
<h1>Users</h1>
{this.state.users.map(user =>
<div key={user.id}>user: {user.name} Password: {user.password}</div>
)}
</div>
);
}
}
export default App;

Edit the ‘express-react/routes/users.js’ and Remeber it is ‘users.js’ not ‘index.js’.

var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
// res.send('respond with a resource');
res.json([{
id: 1,
name: "Hiccup",
password: 'hiccup'
}, {
id: 2,
name: "King Arthur",
password: 'king-arthur'
}]);
});
module.exports = router;

Step 5. Run the server

In ‘express-react’ terminal, run the server

$ npm start

Here 2 servers are running,
1- express server at port 3005.
2- react server at port 3000.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store