Introduction.
Deploying a React JS project on cPanel can be a challenge if you're used to modern cloud services like Vercel or Netlify, but it's often a necessary step when working with traditional hosting environments.
In this guide, I’ll walk you through deploying your React JS project on cPanel.
How Do I Deploy My React JS Project on cPanel?
If you've built a React JS project and you're ready to get it online, deploying it on a cPanel-based hosting service is one of the most popular and accessible ways to do so.
cPanel provides a user-friendly interface to manage your web hosting, but deploying a React app requires a few specific steps to ensure everything runs smoothly.
In this guide, I’ll walk through the process of deploying a React JS project on cPanel, focusing on each critical step to make sure your project is up and running efficiently.
Step 1: Build Your React Project for Production.
Before deploying your React project, it’s essential to build it for production.
This process optimizes your app, bundles the assets, and ensures that it's ready to run in a live environment.
Navigate to your React project folder.
Run the following command to create a production build:
npm run build
This will generate a build directory in your project, which contains all the optimized assets (HTML, CSS, JS) that your app will need.
Step 2: Compress the Build Folder.
Once the build is ready, the next step is to compress the build folder into a .zip file for easy upload.
In your file explorer, navigate to the build folder.
Right-click the folder and select the option to compress or create a .zip archive.
Alternatively, you can use terminal commands to zip the folder if you're more comfortable with that:
zip -r build.zip build/
Step 3: Access cPanel File Manager.
Log into your cPanel account and access the File Manager. This is where you’ll upload and manage the files for your website.
From the cPanel dashboard, go to File Manager under the Files section.
Navigate to the directory where you want to deploy your app, usually public_html, unless you’re deploying to a subdomain.
Step 4: Upload the Build Folder to cPanel.
Once you're in the desired directory, upload the compressed build.zip file.
In File Manager, click the Upload button.
- Choose the build.zip file from your local machine.
- After the upload is complete, extract the contents of build.zip by selecting it and clicking Extract.
- This will unzip the build folder’s contents into your cPanel hosting directory.
Step 5: Configure Apache to Serve Your React App.
React apps are single-page applications (SPAs), meaning they handle routing client-side.
However, when a user accesses your app’s URL directly, Apache (the web server behind most cPanel setups) needs to be configured to serve the index.html file for all routes.
To handle this, I need to create or modify the .htaccess file in the root directory of your React app.
In File Manager, navigate to the root directory where your app is hosted.
Check if there is already a .htaccess file. If not, create one by clicking + File and naming it .htaccess.
Edit the .htaccess file and add the following lines to ensure all routes are correctly handled:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
This configuration tells the server to serve the index.html file for any routes that don’t correspond to an actual file or directory, ensuring that client-side routing continues to work as expected.
Step 6: Set Up Environment Variables (Optional).
If your React project uses environment variables, you'll need to set them up properly in cPanel.
In React, environment variables are often used to store API keys, URLs, and other sensitive data.
Here’s how to set them up:
Open your React app’s .env file.
In cPanel, you can't directly use .env like in Node.js environments. Instead, you need to ensure that your environment variables are hardcoded into the project during the build process.
This means ensuring variables are prefixed with REACT_APP_ and available in the production build.
For example, in your .env file:
REACT_APP_API_URL=https://api.example.com
These variables will be automatically baked into the project when you run npm run build.
Step 7: Test Your Deployed App.
Once you’ve uploaded your build folder, configured .htaccess, and set up any necessary environment variables, it’s time to test your application.
Open your web browser and navigate to your domain or subdomain.
Test the routes in your app by navigating between different pages to ensure that everything works as expected.
Troubleshooting Tips
- Blank Screen or 404 Errors: If your app shows a blank screen or gives 404 errors on refresh, double-check the .htaccess file to ensure it's correctly set up.
- Slow Load Times: Ensure that you’ve built your React app in production mode (npm run build) to get the most optimized version of your app.
- Environment Variables Not Working: Ensure they are correctly configured and accessible during the build process. React requires all environment variables to be prefixed with REACT_APP_.
Conclusion.
Deploying a React JS project on cPanel is straightforward once you know the steps.
By building the project, uploading it through File Manager, and setting up proper routing using .htaccess, your app will be ready to go live.
For additional performance improvements, you could also explore using a CDN or caching solutions offered by your hosting provider.
Top comments (0)