How to deploy React website to Namecheap cPanel

Deploying a React website to Namecheap cPanel involves a few steps. Let’s walk through the process step-by-step:

1. Generate Your Build Folder in VS Code:
   • Open your React project in Visual Studio Code (VS Code).
   • Navigate to the package.json file and add the URL to your project’s homepage. Make sure to use your own URL, not mine! 😄
   • This step is mandatory; skipping it will prevent successful deployment.
   • In the VS Code terminal, run the command npm run build to generate your build folder.
   • Once created, locate the build folder at the top of your project’s folder tree.
   • Right-click on the build folder and choose “Reveal in File Explorer.”
   • Compress the build folder into a ZIP file (right-click → Send to → Compressed (zipped) folder).
2. Build Folder Setup for Deployment in Namecheap:
   • Log in to your Namecheap account.
   • From your dashboard, select the domain you want to deploy to.
   • Hover over the second icon under the Products column and click “Go to cPanel.”
   • In the cPanel, find the FILES section and click on “File Manager.”
   • Navigate to public_html on the left-hand side and create a new folder (you can name it anything; it’s not critical).
   • This folder is where you’ll upload and extract your build folder.
   • Upload the ZIP file you created earlier by clicking the + Upload tab.
   • Once uploaded, extract the ZIP file by clicking the Extract tab.
   • Congratulations! You’ve successfully deployed your React website to Namecheap cPanel.

Remember to delete the original ZIP file and keep the extracted version. Now your website should be accessible via your domain name! 🚀

For more detailed instructions, you can refer to this step-by-step guide on deploying a React website to Namecheap cPanel. Happy coding! 😊