Deploy React on Cpanel
10 January 2024 8:00 PM EST
Deploying a React app on cPanel involves a few steps, and the process might vary slightly based on your specific cPanel configuration. Below is a general guide to help you deploy your React app on cPanel:
Prerequisites:
- Make sure you have access to a cPanel hosting account.
- Ensure that your cPanel hosting supports Node.js.
Step 1: Build your React App:
- Before deploying, build your React app to create the production-ready files. In your project directory, run:
npm run build
This will generate a build folder containing optimized and minified files.Step 2: Connect to your cPanel:
- Log in to your cPanel hosting account.
- Navigate to the 'File Manager' and locate the public_html directory (or the directory where you want to deploy your app).
Step 3: Upload the Build Files:
- Upload the contents of the build folder (from your local machine) to the public_html directory using the cPanel File Manager or an FTP client.
Step 4: Configure the .htaccess file:
- In the public_html directory, create or edit the .htaccess file.
- Add the following lines to redirect all requests to the index.html file:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]
This ensures that React Router can handle client-side routing.
Step 5: Set up Node.js (if not already configured):
- In cPanel, find the 'Node.js' section.
- Create a Node.js application, and make sure to set the 'Application Mode' to 'Production.'
- Set the 'Application root' to the path where your React app is deployed (usually the public_html directory).
Step 6: Install required Node modules:
- In the cPanel Node.js interface, navigate to the 'NPM Modules' section.
- Add the necessary modules, which may include Express if you are serving the app using a Node.js server.
Step 7: Start your Node.js application (if using a server):
- In the Node.js interface, find the 'Application Details' section.
- Click on 'Run Script' to start your Node.js application.
Step 8: Access your React App:
- Open your browser and visit your domain. Your React app should now be accessible.
Keep in mind that this guide provides a general overview, and the exact steps might vary depending on your hosting provider and cPanel configuration. If you encounter any issues, refer to your hosting provider's documentation or contact their support for assistance.