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
distfolder and compress the contents into a.zipfile.-
Upload the Zip File:
- In File Manager, go to the
public_htmlor the appropriate directory. - Click the Upload button and upload the compressed
.zipfile.
- In File Manager, go to the
-
Extract the Files:
- After uploading, select the
.zipfile and click Extract to decompress the files. - Ensure that the extracted files are in the root of the directory (e.g.,
public_html/).
- After uploading, select the
✅ 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 theindex.htmlfile in your build folder. -
Add a
<base>tag: In the<head>section of the file, add the following line:
<base 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
.htaccessfile in the root of yourpublic_html(or equivalent) folder.Add the following lines to the
.htaccessfile:
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.htmland ensure that all files were uploaded correctly.
🎯 Conclusion
Deploying a React + Vite app on cPanel shared hosting is fairly straightforward when you follow these steps:
- Build your Vite app.
- Upload the production files using cPanel File Manager.
- Adjust the
index.htmlif needed. - Set up client-side routing with
.htaccess.
Once deployed, your React app will be live and ready for users. Let me know if you need further assistance!
Top comments (0)