Go54 Blog

Javascript: How to deploy React.js on cPanel

Tola Osadugba

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

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:

Try our Free Javascript Hosting for one Month

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

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

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.

Try Now

Create the Main app to build your project for production: 

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”: “/”

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’));

Try our Free Javascript Hosting for one Month

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.

Exit mobile version