How to deploy your React.js app

To deploy your react.js app, you will need to log into your Cpanel and upload web files are stored in the public_html directory. 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, the path of folder to upload your files on the cpanel is: /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 deploy it on your hosting account. You can do this using the steps stated below. 

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

1.  Upload using the upload button in the file manager or use FTP into public_html and also create a new folder called server in   /home/yourusername/public_html/myapp where your app files resides. 
2.  On your cPanel dashboard, click on Setup Nodejs App and click on Create Application 
3.  Select the Nodejs version best compatible with your application. 
4.  Select the development mode. 
5.  Set the application root to the location of your application e.g /home/yourusername/public_html/myapp/server 
6.  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 
7.  Set your Application startup file to the full path of your app.js file. E.g /home/yourusername/public_html/myapp/server/app.js 
8.  Set the Passenger log file location where you wish to save the error log from your application e.g. /home/yourusername/logs/passenger.log 
9.  Click on Create.
10.  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

   a. Click on the terminal option on your cPanel Dashboard

   b. 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 

   c. In your virtual environment, run: npm init

   d. Install Express and path using npm 

              npm install express 

              npm install path 

   e. 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. 

To create the Main app to build your project for production: 

1.  On your cPanel dashboard, click on Setup Node Js App and click on Create Application 
2. Select the Nodejs version best compatible with your application. 
3.  Select the development mode. 
4.  Set the application root to the location of your application e.g /home/yourusername/public_html/myapp  
5.  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. 
6.  Set your Application startup file to the path of your index.js file. E.g /home/yourusername/public_html/myapp/src/index.js 
7.  Set the Passenger log file location where you wish to save the error log from your application e.g. /home/yourusername/logs/passenger.log 
8.  Click on Create. 
9.  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": "/" 

a. Click on the terminal option on your cPanel Dashboard

b. 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/

c. In your virtual environment, run: npm install

d. 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

e. Restart both applications and access your website via myapp.com 

Note: 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'));