Javascript: How to deploy React.js on cPanel

You are probably wondering what it will take to get your React.js applications to run efficiently. Now that you are here, this article will show you how to deploy your React.js apps on cPanel. I wrote a previous post on how to deploy node js applications on Ubuntu servers. Now you will learn how to deploy React.js and Vue.js applications.

Hosting your React.js on cPanel has its benefits and these benefits are cost effective and easy to use for all developers from beginner to expert. Managing your React.js doesn’t have to be hard and with these few steps, you can do it yourself. But first, here are the benefits of hosting your React.js on cPanel.

Benefits of Hosting React.js on cPanel

• It come with unlimited customized email with your domain.
• You have high end protection
• It also has a file manager that is easy to access.
• It has a user friendly interface
• There is no need for additional software or solution to expose the app using a domain name
• You can easily restart and create application from the cPanel interface
• The server hosting it is protected by bitninja on the server level and the user can also activate bitninja at the user level as well for more optimized protection
• The apps are backed up on a weekly basis
• Using cPanel is more affordable as you don’t need to have a whole server
• No need to bother about managing a whole server

How to Deploy React.js

Login to your cPanel and click on the file manager option, you will be directed to the home directory of your user e.g /home/yourusername

Web files are stored in the public_html directory, to deploy your application, you will need to upload your application files in a subfolder under public_html because application files are not allowed to be stored directly in the public_html directory for example /home/yourusername/public_html/myapp

Unfortunately, you won’t be able to develop your react.js application on the hosting account because this is a shared hosting environment and you won’t be able to access your application in development mode using the server IP and a port. It is advised to develop your application locally and then deploys it on your hosting account. You can deploy it using the steps stated below:

Create Expressjs app to serve your build folder:

This step is done before creating the app we will use for building the app for production because we are creating it in a subfolder in your app folder, so if you uploaded your file to /home/yourusername/public_html/myapp, we will be creating this express app in /home/yourusername/public_html/myapp/server folder.

In your cPanel, create a new folder called server in /home/yourusername/public_html/myapp

• Upload through file manager or FTP into public_html and also create a new folder called server in /home/yourusername/public_html/myapp where your app files reside.
• On your cPanel dashboard, click on Setup Nodejs App and click on Create Application
• Select the Nodejs version best compatible with your application.
• Select the development mode.
• Set the application root to the location of your application e.g /home/yourusername/public_html/myapp/server
• Set your application URL, this is the URL where your application will load from. This should be the URL in which your application will be available e.g. myapp.com
• Set your Application startup file to the full path of your app.js file. E.g /home/yourusername/public_html/myapp/server/app.js
• Set the Passenger log file location where you wish to save error log from your application e.g. /home/yourusername/logs/passenger.log
• Click on Create.
• Install requirements, dependencies, and configure the express application

After the application is created, it displays more details about the created application. If it
doesn’t for you, click on the edit icon.

• Click on the terminal option on your cPanel Dashboard
• From the details of the created application, copy the command to enter into the virtual environment, paste it on the terminal screen and press Enter. E.g source /home/yourusername/nodevenv/public_html/myapp/server/10/bin/activate && cd /home/yourusername/public_html/myapp/server
• In your virtual environment, run: npm init
• Install Express and path using npm
  • npm install express
  • npm install path
• Create app.js file inside the app directory of the express app created /home/yourusername/public_html/myapp/server/app.js and paste the content below in it and save the file.

var express=require ('express');
var path= require('path');

var app= express()

if (process.env.NODE_ENV === 'production') {
app.use('/', express.static('../build'));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'build', 'index.html'))
})
}
app.listen(9001)

Now we are done with the Express app, we can edit this application and set it to production
mode. We will go ahead and create the APP to build our main project now.

Create the Main app to build your project for production: 

• On your cPanel dashboard, click on Setup Node Js App and click on Create Application
• Select the Nodejs version best compatible with your application.
• Select the development mode.
• Set the application root to the location of your application e.g
  /home/yourusername/public_html/myapp
• Set your application URL, In this case, this doesn’t matter so you can use something like
  myapp.com/build but the app is not going to load from this URL, it will load from the URL of the
  express app we created earlier.
• Set your Application startup file to the path of your index.js file. E.g
  /home/yourusername/public_html/myapp/src/index.js
• Set the Passenger log file location where you wish to save error log from your application e.g.
  /home/yourusername/logs/passenger.log
• Click on Create.
• Install requirements, dependencies, and configure the express application.

After the application is created, it displays more details about the created application. If it
doesn’t for you, click on the edit icon

Before proceeding with the rest of the steps, in your package.json file, set “homepage”: “/”

• Click on terminal option on your cPanel Dashboard
• From the details of the created application, copy the command to enter into the virtual environment, paste it on the terminal screen and press Enter. E.g source /home/yourusername/nodevenv/public_html/myapp/10/bin/activate && cd /home/yourusername/public_html/myapp/
• In your virtual environment, run: npm install
• Run
  • npm run build

This will build your project for production in the build directory location in your app directory i.e. /home/yourusername/public_html/myapp/build. Restart both applications and access you website via myapp.com

Note that if your app is to be deployed on e.g myapp.com/myapp then you will need to set your homepage in your package.json to “homepage”: “/myapp” before building your application for production and in your app.js file in the line stated below, set / to /myapp app.use(‘/myapp’, express.static(‘../build’));

Final Note 

Now that you have a step by step guide to deploying React.js on cPanel, you can use these steps to deploy your application easily and without any difficulty. You can also learn how to deploy Vue.js on cPanel here.