React is a popular front-end library. There are many ways to deploy React apps, and shared hosting is a great option for starting a new project.
While shared hosting is an affordable choice, it's not the easiest method for deploying a React app.
In this article, we've simplified the process. We'll walk you through the steps to deploy a React app on shared hosting.
Steps to Deploy a React App on Shared Hosting (cPanel)
Here are the steps to deploy your React app from your local system to a hosting service that supports cPanel:
Step 1: Update the Domain Name or IP Address
On your local machine, your React app runs on localhost:port. To deploy it, you need to replace this with your domain name or IP address.
- Go to your React project directory and open the package.json file.
- Add the following line:
"homepage": "http://yourdomain.com"
- Save the file.
Step 2: Build the React Application
In the terminal, run the following command to create a production build:
This will generate a build folder with the production-ready files. You can check the files by running:
Step 3: Upload the Build Folder to cPanel Using FileZilla
- Open an FTP client like FileZilla and connect to your hosting account using FTP details.
- On the Local Site, navigate to the build directory of your React app.
- On the Remote Site, open the directory for your domain.
- Copy everything from the build directory to the domain directory on the remote site.
Step 4: Configure the .htaccess File from cPanel
This file tells the server which file to serve when someone visits your domain.
- Create or edit the .htaccess file in your domain directory.
- Add the following lines:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
- Once you add the line, click on the Save Changes button to save the changes.
Step 5: Test the Deployment
Open a browser and visit your domain or subdomain. If the content matches what you see on your local system, the deployment was successful. When the application runs successfully, you will get the result below.
By following these steps, your React app should be successfully deployed on shared hosting.
Conclusion
React is a powerful JavaScript library that helps web developers build dynamic and efficient web apps. It makes JavaScript coding easier and boosts performance, making it a popular choice for front-end development. Deploying a React app on shared hosting is simple and easy to do.