How To Deploy a React + Vite Application with cPanel Shared Hosting

Deploying a React + Vite application to cPanel shared hosting can seem challenging, but it’s manageable with the right steps. In this guide, you'll learn how to deploy your Vite app to a shared hosting environment using cPanel, which is commonly available on hosting services like Bluehost, HostGator, and others. ✅ Step 1: Build Your Vite App Before deployment, generate the production build of your React + Vite app. Run the following command: npm run build This command creates a dist folder, containing all the optimized static files needed to run your application. ✅ Step 2: Access cPanel and File Manager Log in to cPanel: Use the credentials provided by your hosting provider to access your cPanel account. Open File Manager: In cPanel, locate and open the File Manager under the Files section. This is where you will upload your Vite app files. ✅ Step 3: Navigate to the Public Directory In File Manager, navigate to the directory where your website files are stored. In most shared hosting environments, this is the public_html folder. If this is the primary domain, use public_html. If it's an addon domain or subdomain, navigate to the appropriate folder within public_html. ✅ Step 4: Upload the Vite Build Files Compress the Build Files: In your local machine, navigate to your project’s dist folder and compress the contents into a .zip file. Upload the Zip File: In File Manager, go to the public_html or the appropriate directory. Click the Upload button and upload the compressed .zip file. Extract the Files: After uploading, select the .zip file and click Extract to decompress the files. Ensure that the extracted files are in the root of the directory (e.g., public_html/). ✅ Step 5: Adjust index.html for cPanel Vite often uses relative paths, but in some shared hosting environments, the paths might break. You may need to adjust the base URL in index.html. Open index.html: Navigate to the index.html file in your build folder. Add a tag: In the section of the file, add the following line: This ensures that the app can correctly resolve relative URLs. ✅ Step 6: Set Up .htaccess (Optional) If your React app uses client-side routing (e.g., react-router), you need to tell the server to always serve index.html for any route. Create or edit a .htaccess file in the root of your public_html (or equivalent) folder. Add the following lines to the .htaccess file: RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] This ensures that all requests are redirected to index.html, allowing your React Router to handle the routing. ✅ Step 7: Test Your Application Once the files are uploaded and the configuration is complete, visit your domain to ensure the React + Vite application is working correctly. If everything is set up properly, your app should be live and fully functional. If you encounter issues, double-check the file paths in index.html and ensure that all files were uploaded correctly.

Mar 17, 2025 - 19:10

How To Deploy a React + Vite Application with cPanel Shared Hosting

Deploying a React + Vite application to cPanel shared hosting can seem challenging, but it’s manageable with the right steps. In this guide, you'll learn how to deploy your Vite app to a shared hosting environment using cPanel, which is commonly available on hosting services like Bluehost, HostGator, and others.

✅ Step 1: Build Your Vite App

Before deployment, generate the production build of your React + Vite app. Run the following command:

npm run build

This command creates a dist folder, containing all the optimized static files needed to run your application.

✅ Step 2: Access cPanel and File Manager

Log in to cPanel: Use the credentials provided by your hosting provider to access your cPanel account.
Open File Manager: In cPanel, locate and open the File Manager under the Files section. This is where you will upload your Vite app files.

✅ Step 3: Navigate to the Public Directory

In File Manager, navigate to the directory where your website files are stored. In most shared hosting environments, this is the public_html folder.

If this is the primary domain, use public_html.
If it's an addon domain or subdomain, navigate to the appropriate folder within public_html.

✅ Step 4: Upload the Vite Build Files

Compress the Build Files: In your local machine, navigate to your project’s dist folder and compress the contents into a .zip file.
Upload the Zip File:
- In File Manager, go to the public_html or the appropriate directory.
- Click the Upload button and upload the compressed .zip file.
Extract the Files:
- After uploading, select the .zip file and click Extract to decompress the files.
- Ensure that the extracted files are in the root of the directory (e.g., public_html/).

✅ Step 5: Adjust `index.html` for cPanel

Vite often uses relative paths, but in some shared hosting environments, the paths might break. You may need to adjust the base URL in index.html.

Open index.html: Navigate to the index.html file in your build folder.
Add a tag: In the section of the file, add the following line:

 href="/">

This ensures that the app can correctly resolve relative URLs.

✅ Step 6: Set Up `.htaccess` (Optional)

If your React app uses client-side routing (e.g., react-router), you need to tell the server to always serve index.html for any route.

Create or edit a .htaccess file in the root of your public_html (or equivalent) folder.
Add the following lines to the .htaccess file:

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

This ensures that all requests are redirected to index.html, allowing your React Router to handle the routing.

✅ Step 7: Test Your Application

Once the files are uploaded and the configuration is complete, visit your domain to ensure the React + Vite application is working correctly.

If everything is set up properly, your app should be live and fully functional.
If you encounter issues, double-check the file paths in index.html and ensure that all files were uploaded correctly.