htaccess to deploy react app to cpanel

Deploying React App to cPanel via .htaccess file#

If you want to deploy your React app to cPanel, there are different ways to do it. One of the easiest and quickest ways is to use .htaccess file. In this post, I will share with you how to do it step by step.

Step 1: Build your React app#

The first step is to build your React app using the following command:

npx create-react-app my-app
cd my-app
npm run build

Step 2: Upload the build folder to cPanel#

Next, you need to upload the build folder to your cPanel account using an FTP client or cPanel's file manager.

Step 3: Create .htaccess file in the root folder#

In the root folder, create a new file named .htaccess and add the following code:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

This code will redirect all requests to index.html, which is your React app's entry point.

Step 4: Test your React app#

You can now test your React app by visiting your website's URL. If everything is set up correctly, you should be able to see your React app running on cPanel.

Alternative method: Use Node.js#

If you have Node.js installed on your cPanel account, you can also deploy your React app using Node.js. Here are the steps:

1. Upload your React app's build folder to your cPanel account.
2. SSH into your cPanel account and navigate to the build folder.
3. Install serve module by running the following command: npm install -g serve
4. Start the server by running the following command: serve -s build
5. Your React app should now be running on your website's URL.

Conclusion#

Deploying a React app to cPanel is not difficult if you know what you are doing. Using .htaccess file or Node.js are both viable options depending on your preferences and the requirements of your app. I hope this post has helped you deploy your React app successfully. Happy coding!