Create an App with React.js at the Front-end and Node.js at the Back-end

The combination form by a React.js front-end and a Node backend can lead to great things in the world of development and programming. The platform provides a solid combination to develop an application.

In this article, we look at the processes you can follow to build and deploy an app with React.js at the frontend and Node at the backend. Let us see how React.js developers can use Node.js to create a web application from scratch.

Hire Node.js Developers

Tools You Will Need in the Process

You will need the following tools for the process:

• You need to start by making sure that Node and NPM are installed within your computer system. You can download both platforms through the internet and find a solution to them.
• Once you have the tools in your system, you can select a code editor of your choice. The VSCode editor is the best one in the market currently and is preferred by most developers and programmers.
• You need to make sure that Git is installed within your system. The presence of Git is necessary, you can deploy with Heroku. You can download Git through the internet.

Steps for Creating an App with React.js and Node.js

Create the Backend

You need to start by creating a folder for your project. Once that folder is ready, you can drag and drop it into your code editor. Doing so will create a package.json file, which will allow you to keep a track of all dependencies.

You will use Express to create a web server, which will run the port for 3001. Heroku will determine the value of the code when the app is deployed. The code below will be run:

// server/index.js

const express = require("express");

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

const app = express();

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

Finally, we can set the application into motion by mentioning the following in the port 3001:

npm start

> node server/index.js

Server listening on 3001

Create an API Endpoint

The next step in the process is to create an API Endpoint. This API Endpoint will help give React.js app data, perform alterations in the data and give commands that only a server can give.

We will initiate this operation by sending our React.js app a message that says ‘Hello from the server. The code mentioned below will create the right endpoint for this route:

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

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

The server will be restarted, as changes have been made to the Node code. You can test the code by running local host API in the browser.

Create React.js Frontend

The third step in the process is to create a frontend for your application. You should start by opening another terminal lab to create a new React.js project.

This will be followed by using your React.js app with all the dependencies. We will then start the React.js app by running the start script. The script will be the same as it is for the Node Server. By partnering with a reliable React js development company, you can ensure that all dependencies are correctly managed, and your React.js app is deployed smoothly, following best practices in the industry.

We will then enter our code on the localhost: 300:

cd client
npm start

Compiled successfully!

You can now view client in the browser.

Local:            http://localhost:3000

Make HTTP Requests

The fourth step in the process is to create HTTP Requests to interact with the API. This can be initiated by making a simple GET request through the Fetch API. The request will be made to the backend and the data can be returned as JSON.

The code to be entered here will look like the text below:

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

Initiate Web Deployment

It is now time for you to deploy your application to the web. The first step you should follow is to remove the Git repository that is within the create-react-app code. This is an essential step, as you need to deploy the Git repo at the root of the project and not in ‘client’.

cd client
rm -rf .git

Once we deploy our code, bot the React.js frontend and Node backend codes will be served within the same domain of the herokuapp. We will see how the codes and requests are handled by the Node API. We need a code that helps show our React.js App to users when they need to see it.

This is done by adding the code below:

// server/index.js
const path = require('path');
const express = require('express');
...
// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, '../client/build')));

// Handle GET requests to /api route
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

The code above allows both our React.js frontend and Node.js backend to be deployed within the same domain. The code below will add a new Git Repo for the project:

git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"

Your app is now ready and can be used with a frontend and backend of React.js and Node.js development.