How to deploy a react app on cPanel? - node.js

Question

I've created a react app with the following folder structure
-public
 --dist
  ---bundle.js
  ---styles.css
 --index.html
 --images
-server
 --server.js
-src
 --components
 --app.js
-.babelrc
-package.json
-webpack.config.js
I want to upload it to cPanel. Is that possible? Would I also need to upload the node_modules/ folder?
here is a link to my repo: https://github.com/theoiorga/react-expensify-app

Answer 1

step 1:"homepage": ".", -->add this on package.json file
step 2 : npm run build --> this will create a build folder.
step 3 : make a .htaccess it will look like this
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
step 4 : now take all the files in build folder plus your htaccess and drop them in the desired domain or subdomain

Answer 2

Follow the steps to deploy your React website on CPanel
Step(1) : Under your local project directory run this command "npm
run build" or "yarn build" then "build" directory will be created. This directory contains the bundle of all static files with dependencies which you can directly copy onto your production server.
Step (2) : Go to inside the "build" folder and select all files and compress or make a Zip then upload in cpanel it will work.
Note: for react app no need to upload whole projects we need to deploy only "build" directory.

Answer 3

To Deploy React App on Cpanel/Server. Please follow the Steps
Step 1) Go to Package.json file and add this Property "homepage":"http://yourdomain.com" and paste your domain within it. Like
Step 2) Now build the App using npm run build
In your project directory it will create a build folder and it will contain all your static files for project. Zip all files and upload on your cpanel directory where your website run.
Step 3) Create an .htaccess file and Place it on root directory. And paste the below code in .htaccess file.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
Now Run your Project. It will Work.
Thanks

Answer 4

I had the same issue recently. As a newbie to React, I have deployed my app to Heroku many times, as part of the React course. However, I wanted to deploy to my own shared server (CPanel), to learn how it is done. But also to use my hosting to host other apps I code.
Anyway, What Kallayya and Sumit mentioned above both needs to be done. There is also a great step by step information here.
NB. If you did not use something like 'npx create-react-app' to create the app (boilerplate) then, you will not get a 'Build' folder.
My initial boilerplate was created from scratch as part of the course. So I was initially confused about why I was not getting a Build folder. Then I realised that 'Build' folder is created if the app was created with e.g. 'npx create-react-app' or 'yarn create react-app'. I had used 'npx create-react-app' to start another project. In the new project, I was able to get a Build folder. Hence, my realisation.
So if you run a build and you don't get a Build folder (as mentioned above). Then the files to deploy to live will be the content in the 'public' directory on your local site. (If you have env setup for production and development, then you may need to build for production e.g. yarn build:prod).
Now follow the same process in the step by step link, above. However, upload the content from your 'public' directory in your local site, to the public_html folder on your remote hosting server. Create and upload your .htaccess file as shown on the page of the above link. Now view your site at your relevant domain.
Following the steps in the above link, I was able to deploy to my Shared hosting and view my app at my domain. It works perfectly fine. Haven't seen any issues yet.
I hope this will be helpful to others.

Answer 5

I resolved it by implementing the following steps
Step 1
Add the following in package.json
"homepage": "."
Step 2
Add the following in the public/index.html above meta: description
<script type="text/javascript"> document.write("<base href='//" + document.location.host + "' />"); </script>
Step 3
Build your App using npm run build
Step 4
Upload files inside /build folder to the server using any file transfer tool
Step 5
Create and add the following in .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

Answer 6

Just upload your local public folder to your hosting public_html folder

Answer 7

Make sure your hosting provider supports Node.js that you will see on CPanel.
The company I use is Namecheap and they just added Node.js runtime environment to CPanel.
Contact your hosting company and ask them if they support Node.js

Answer 8

I’m agree with the fact that you should have a dedicated or VPS hosting, because you will need to have control to the command line.
What I would suggest you to do, apart of what has been mentioned in other comments (accessing the cPanel via SSH and install node and npm, etc), you should upload the files using GitHub or BitBucket.
When you do it this way it will be even easier to keep updating your web app every time you need.

Answer 9

I imagine you have ssh access. If you do install NodeJS via SSH and then upload your files, it will be better if you do it on your public_html. Not only the build but the whole project. I would do it using git.
When you have you files up you will have to install npm and in your client folder you have to install your client, because just uploading the node_modules folders won't work.
You should install forever and run forever node server.js, that will make the server run even when you close the terminal
I hope I explained myself.

Answer 10

I have a hosting plan with siteground and I can host as many websites as I want with that plan.
Hosting a react app with siteground was super easy once I figured it out.
I got a good chunk of what I know by reading this thread, so if you want visuals you can look to the top answer.
Step 1) Add "homepage":".", to the object in your package.json file.
Step 2) In your terminal run npm run build
Step 3) Add a .htaccess file to your build folder with the following code:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
Step 4) Use a file manager to upload all of the files from your build folder including your .htaccess file to the public folder on the server. I used FileZilla, but you can use the built in file manager or SSH keys. If you don't know how to make an FTP user, go here.
Siteground specific instructions:
Step 5) Navigate to the site tools for the desired website. (You can even use a temporary domain for this).
Step 6) Install an SSL certificate in Security > SSL Manager. (You can use the free one. Take note of the expiration date.)
Step 7) Enforce HTTPS by going to Security > HTTPS Enforce and turn it on.
That should work! Send questions if you have any.
I have no affiliation with siteground or any company. I am a freelance web developer that is developing my react skills

Answer 11

React applications are built on Node.js and do not work out of the box on Cpanel.
I am assuming you are working with a Linux server. To deploy your react app, you need to do the following.
Make sure you have root assess to the server. That is only possible if you are working with a VPS or dedicated hosting and not shared hosting.
Log into your account using SSH
Install node.js and npm on the server
Upload your build files to the server
Run the command to start your app in production.
These steps look easy but are a bit complicated. If you are a newbie who just started working on react, I will advise you not to bother yourself with these steps. You can easily get your react app working in less than 10 mins with a cloud service like Heroku for free too.