Quick Summary
React applications are not limited to VPS or cloud hosting. You can easily host them on Nest Nepal’s shared hosting by first building your application and then uploading the resulting static files (found within the build/ folder) to your public_html/ directory. Let’s go through the process.
Step-by-Step Guide
- Create and Build Your React App
If you haven’t created your React application yet:
Bash
npx create-react-app my-app
cd my-app
npm run build
This command generates a production-ready version of your application located in the build/ directory. These are the files you will upload.
2. Log in to Nest Nepal’s cPanel
-
- Go to the Nest Nepal Client Area.
- Access your shared hosting product.
- Click on “Login to cPanel.”
3. Open File Manager and navigate to public_html/
-
- From the cPanel dashboard, open the File Manager.
- Navigate to the public_html/ directory.
- This is typically the root folder for your website’s public-facing content.
4. Upload Your React Build Files
-
- On your local computer, locate your React project folder.
- Go inside the /build folder and select all the files and folders within it.
- Right-click on the selected items and compress them into a .zip file (e.g., react-build.zip).
- In cPanel’s File Manager, within the public_html/ directory, click Upload and upload the react-build.zip file.
- Once the upload is complete, select the .zip file and click Extract.
⚠️ Important: Ensure you extract the contents directly into the public_html/ directory, not into a subfolder.
5. Clean Up and Test
-
- You can optionally remove the react-build.zip file after successful extraction for cleanliness.
- Visit your domain name (e.g., https://yourdomain.com).
- Your React application should now be live! 🎉
Optional: Fix Routing Issues (for Single Page Applications)
React often uses client-side routing, which means that directly accessing a nested route (like https://yourdomain.com/about) by refreshing the page might result in a 404 error on shared hosting. To resolve this:
- Create a file named .htaccess in your public_html/ directory if it doesn’t already exist, or edit the existing one.
- Add the following rewrite rules to the .htaccess file:
Apache
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA, L]
- This configuration instructs Apache to serve the index.html file for requests that do not correspond to an actual file or directory. React’s client-side routing will then handle the navigation.
Bonus Tips
- Custom Domain: If you intend to use a custom domain name, ensure it is correctly pointed to Nest Nepal’s nameservers or configure it using the DNS Zone Editor in your cPanel.
- Free SSL: Enhance your site’s security by enabling the free SSL certificate (Let’s Encrypt), usually available within your cPanel.
- Auto-Deployment: For automated deployments from Git, refer to Nest Nepal’s documentation on using Git with cPanel if available.
Final Thoughts
Hosting a React application on shared hosting with Nest Nepal is a viable and cost-effective solution, especially when you treat your built React app as a collection of static assets. This setup is well-suited for simpler frontend applications, landing pages, and dashboards.
Need Help?
The Nest Nepal support team is available via ticket. You can also reach out through live chat for more immediate assistance.
FAQs:
1. Can I host a React app on shared hosting like Nest Nepal?
Yes, you can! Once you build your React app using npm run build, you can upload the static files (inside the build/ folder) to your public_html/ directory using Nest Nepal’s cPanel.
2. How do I create and build my React app before hosting?
Run the following commands:
This will generate abuild/ folder containing all the static files required for deployment.
3. Where do I upload my React files in the Nest Nepal cPanel?
After logging into cPanel:
-
Go to File Manager
-
Navigate to the public_html/ folder
-
Upload and extract the contents of your React app’s
build/folder there
Make sure the files (like index.html, static/, etc.) are directly inside public_html/, not within a subfolder.
4. Why do I see a 404 error when accessing routes in my React app?
This happens because React apps use client-side routing. On shared hosting, refreshing a route like /about may cause a 404 error.
To fix this, add or edit the .htaccess file in public_html/ and include the following code:
5. Do I need a domain to host my React app?
You can use a custom domain or a subdomain provided by Nest Nepal. Make sure your domain points to the correct nameservers or configure the DNS Zone Editor in cPanel.
6. Is SSL supported for React apps on Nest Nepal shared hosting?
Yes! You can enable a free SSL certificate using Let’s Encrypt, available from your cPanel dashboard. This helps secure your React site using HTTPS.
7. Can I automatically deploy my React app via Git?
Yes, if you’re using Git for version control, you can automate deployments using Git Version Control in cPanel. Check Nest Nepal’s documentation for Git integration steps.
8. What if I face issues during deployment?
If you encounter any errors or need help, Nest Nepal offers 24/7 support via:
-
Ticket system
-
Live chat
The support team can guide you through file uploads, domain setup, SSL, and more.
9. Is hosting React on shared hosting reliable?
Nest Nepal’s shared hosting is a cost-effective and reliable solution for static sites, frontend apps, and dashboards. For more complex apps or backend integration, consider VPS or cloud hosting.