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

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