How to build a website with React JS use Node.js & Npm on VPS Ubuntu 20.04, 18.04 & public it via Cloudflare Zero Trust, full completely tutorial

Developed by Facebook in 2011, React (also known as ReactJS) is a JavaScript library used to create fast and interactive user interfaces. At the time of writing, it is the most popular JavaScript library for UI development. React outshines its counterparts – Angular and Vue.js in functionality and popularity.

Its popularity stems from its flexibility and simplicity, making it the top choice for developing mobile and web applications. Over 90,000 websites use React, including tech giants like Facebook, Netflix, Instagram, Airbnb, and Twitter, to name a few.

In this article, you will learn how to install ReactJS on Ubuntu 20.04 and Ubuntu 18.04.

Step 1: Install NPM on Ubuntu

We begin installing React JS by installing npm – short for Node Package Manager, which serves two purposes. Firstly, it’s a command-line tool used to interact with JavaScript packages, allowing users to install, update, and manage JavaScript tools and libraries.

Secondly, npm is an online open-source software registry hosting over 800,000 Node.js packages. Npm is free, and you can easily download publicly available software applications.

To install npm on Ubuntu Linux, log in to your server as a sudo user and run the following command:

sudo apt install npm

Once the installation process is complete, you can verify the npm version installed with the command:

npm –version

6.14.4 [Output]

The latest version at the time of writing is v6.14.4 as indicated in the output.

Installing npm also installs node.js, and you can confirm the installed node version with the command:

node –version

v10.16.0 [Output]

Update to the latest to avoid errors

npm cache clean -f
sudo npm install -g n
sudo n latest

Step 2: Install create-react-app Utility

create-react-app is a utility that allows you to set up all the necessary tools to create a React app. It saves you a lot of time and energy by setting up everything from scratch and gives you the necessary smooth start.

To install the utility, run the following npm command:

sudo npm -g install create-react-app

Once installed, you can confirm the installed version by running:

create-react-app –version

4.0.1 [Output]

Step 3: Create and Run Your First React App

Creating a React app is quite simple and straightforward. We’ll create a React app named tecmint-app (or any name you like) as follows.

create-react-app tecmint-app

This process takes about 5 minutes to install all the necessary packages, libraries, and tools that the app requires. A little patience will be helpful.

If the app creation process is successful, you’ll receive the below notification providing basic commands you can run to start managing the app.

To run the app, navigate into the app directory:

cd tecmint-app

Then run the command:

npm start

Finally, you’ll receive the following result guiding you on how to access the app in your browser.

Open your browser and navigate to your server’s IP address:

http://server-ip:3000

This shows the default React app is up and running. In this guide, we’ve successfully installed React JS and created a React app.

Step 4: Point http://server-ip:3000 to your domain using Zero Trust by Cloudflare

The easiest way we recommend, without requiring complex technical requirements, to publish a website is to use Zero Trust. To point your domain to the server IP address using Zero Trust by Cloudflare, you need to follow these steps:

• Log in to your Cloudflare account: Access the Cloudflare website and log in to your account.
• Add the domain to Cloudflare: If you haven’t added the domain to Cloudflare yet, you need to add it by entering the domain name on the Cloudflare Dashboard and follow the instructions to verify ownership.
• Configure DNS: You don’t need to create an A record for the domain pointing to the server’s IP of the React application.

After logging in to Cloudflare, select Zero Trust

Select Networks -> Tunnels

Create a tunnel

Select your connector, default Cloudflared

.

Name your tunnel

Choose your environment, if Ubuntu VPS then choose Debian and default 64-bit

Copy command lines and paste to terminal in your vps to install and active

 

Connect to your domain, see how to configure as below

Finally press the Save Tunnel button and it’s done

👇 Demo website after successful installation

Visit Website

Link	Click to open