Put a React app on shared hosting with cPanel

What is React?

React is a tool for building web pages that react to clicks without reloading. Your source code is not what browsers read. You first "build" it, which turns it into plain HTML, CSS and JavaScript files. Those plain files are what you upload.

Before you start

• Install Node.js on your own computer. Node.js runs the build tools.
• Have your React project ready.
• Have your cPanel login from your welcome email.

Step 1: Build the project

1. Open a terminal in your project folder.
2. Run:

npm install

This downloads the tools your project needs.

3. Run:

npm run build

This makes a folder of ready files. It is named build in Create React App, or dist in Vite.

Step 2: Upload the files

1. Log in to cPanel and open File Manager.
2. Open public_html. If you want the app in a sub-folder, open or create that folder.
3. If the folder holds an old site, take a backup first. The next step may overwrite files.
4. Click Upload.
5. Upload the files from inside the build (or dist) folder. Do not upload the folder itself. You can zip the contents, upload the zip and use Extract.
6. Check that index.html sits directly in the target folder.

Step 3: Make page links work

If your app uses React Router, opening a deep link like /about directly may show "404 Not Found". Fix it with a rule file.

1. In File Manager, turn on Settings then Show Hidden Files.
2. In the same folder as index.html, create a file named .htaccess.
3. Add:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

This sends every unknown address back to index.html, so React can show the right page. On Apache servers this works. If your app is in a sub-folder, change / to the folder name.

Step 4: Test

1. Visit your domain.
2. Click through the pages and refresh on one.

Quick recap

• Build the app with npm run build.
• Upload the contents of the build folder to public_html.
• Add an .htaccess rule for page links.

  

• Back up before overwriting an existing site.