How to deploy a react app on cPanel?

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

Sumit Saha · Answer 1 · 2019-09-04T04:05:27.863

32

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

edited Sep 04 '19 at 04:05

answered Sep 04 '19 at 03:47

Sumit Saha

321
3
3

I did the same but my app was nextjs! this is the problem => https://stackoverflow.com/questions/60008008/how-to-deploy-a-nextjs-application-on-cpanel – Afsanefda Jan 31 '20 at 16:52
could you please take a look at it ? – Afsanefda Jan 31 '20 at 16:52

score 9 · Answer 2 · edited Feb 01 '21 at 17:55

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.

score 6 · Answer 3 · answered Nov 11 '20 at 05:49

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

score 4 · Answer 4 · answered Mar 16 '20 at 00:41

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.

Finoy Francis · Answer 5 · 2021-08-27T12:45:54.110

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>

I am trying this. first request on "/" works fine. but when I reload page on URL like "/docs/info". somehow "/build/docs/info" is being added to url. — Arashdeep Singh, Apr 24 '22 at 12:14

score 0 · Answer 6 · answered Apr 20 '18 at 10:45

0

Just upload your local public folder to your hosting public_html folder

answered Apr 20 '18 at 10:45

FlatLander

1,717
15
21

can you elaborate about the problem? – FlatLander Apr 20 '18 at 16:23
I managed to make it work. After compiling to production, only the public folder needed to be uploaded to the server, and in .htaccess serve always index.html – Theo I. Apr 22 '18 at 09:14
1

use this command ```npm run build``` and copy ```build``` folder to public_html. – hamed hossani Nov 01 '18 at 09:12

score 0 · Answer 7 · answered Dec 29 '18 at 12:25

0

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

answered Dec 29 '18 at 12:25

gustavozapata

429
2
7
13

score 0 · Answer 8 · answered May 15 '19 at 02:44

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.

score 0 · Answer 9 · answered Jun 12 '19 at 20:37

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.

score 0 · Answer 10 · answered Jul 28 '21 at 19:16

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

score -1 · Answer 11 · edited Jul 04 '21 at 00:35

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.

That's not always the case. You can build your project and put the built files on your shared hosting, plus doing some .htaccess configurations. However, what I say is mostly possible with Create React App or Next.js. — Shahriar, Jul 02 '21 at 13:41

How to deploy a react app on cPanel?

11 Answers11

Linked