Tech2Towards: Setup a React and Angular application on a Linux server

In This Post We are going to learn, that how to setup React & Angular Project on Linux Server

Requirement Software :-

Node - Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser
NPM - npm is the default package manager for the JavaScript runtime environment Node.js
PM2 - stand for process manager for Node. js applications that has a built-in load balancer. PM2 enables you to keep applications alive forever, reloads them without downtime, helps you to manage application logging, monitoring, and clustering.

Note: Available Port Should Be Open In Firewall Ex: 3009

Step 1) Upload & Setup Fresh React code On Server

$ cd /var/www/html/react

$ npx create-react-app my-app

$ cd my-app

$ ls

$ sudo npm install -g pm2

Step 2) Prepare for deployment

The npm install Command install all the modules that are listed on package. json file and their dependencies too. npm update command update all packages in the node_modules directory and their dependencies.

$ npm install

Step 3) Make Build For React and Angular

The npm run build command create a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html , and requests to static paths like /static/js/main.

$ npm run build

Step 4) Creating a server.js file using Node.js and Express.

server.js file will contain the path to the static assets that were built along with the port information.

Add below Content In server.js file.

$ vim server.js

const express = require("express");
const path = require("path");

const app = express();

app.use(express.static(path.join(__dirname, "./build")));
app.get("/*", (req, res) => res.sendFile(path.join(__dirname, "./build/index.html")));

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

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

Step 5) Run Server with PM2

PM2 stand for process manager for Node. js applications that has a built-in load balancer. PM2 enables you to keep applications alive forever, reloads them without downtime, helps you to manage application logging, monitoring, and clustering.

$ pm2 start server.js --name React-Server

$ pm2 start server.js --name Angular-Server

Step 6) In Browser type http://ip-address:3009 or http://domain-name:3009

Tech2Towards