How To Deploy Node React App On Web Hosting

Deploy Node React App Using CPanel

To demonstrate the whole procedure, I have created a subdomain nodereactapp.gauravadhikari.com where I will place all my node & react app files.

I'll use one of my Node React projects from GitHub. Here is the repo link if you want to check the code.

react app github repo

Our React app resides in /client directory.

Follow These Simple Steps To Host Node React App On The Webserver

1. Go to your cPanel and search for Terminal

terminal in cpanel

2. In Terminal, type cd your_project_directory, for me it is cd nodereactapp.gauravadhikari.com and then git clone https://github.com/gauravadhikari1997/MERN-product-app.git to clone the project

Note: Check in your File Manager, the project will be initialized into a separate folder,in my case MERN-product-app,open it and move all its content into root folder i.e nodereactapp.gauravadhikari.com/

3. Now let's create script to run our node and react app Open package.json and add this script in scripts object "myScript": "concurrently --kill-others-on-fail "npm run start" "cd client && npm install && npm run build"",

react app package.json file

4. Now open cPanel and search Node and click on Setup Node.js App

5. Now click on Create Application, this brings a form and we need to populate it with some obvious values like, where our project files are and Application URL, Startup file, etc

creating node js app in web hosting

I have added MONGODB_URI in Environment Variable, as it is used by my application to connect to MongoDB

6. After that click on Run NPN Install

running NPM install

7. After that click Run JS Script, and click on myScript which you and I added before. On running this you will notice that react-scripts are not installed

react scripts command not found

To fix this issue, we need to go to Terminal again, move into the client directory, and install scripts one by one.

installing react react scripts

react scripts command not found solved

Note: I first ran source /home /wanhrkzk /nodevenv /nodeapp.gauravadhikari.com /10 /bin /activate && cd /home /wanhrkzk /nodeapp.gauravadhikari.com to be able to run npm commands

8. Now Run myScript again and it will work fine.

9. Open your Application URL and Voila? Your app on the web, now pat yourself on the back

running node react app on web server

Thanks for reading! I hope you learned something useful.

~ Buy Me A Coffee ☕

Deploy NodeJS app on cPanelDeploy ReactJS app on cPanel