Step 1: Build the React App

Before uploading your app, you need to create a production-ready build that contains all the optimized static files.

1. Navigate to Your Project Directory:
   Open your terminal and run:
   

   cd your-react-app

   
   
2. Create the Production Build:
   Run the following command to generate your build files:
   

   npm run build

   
   This command creates a build folder that contains all the necessary optimized files for your app.
   
   

Step 2: Compress the Build Folder

1. Locate and Compress the Build Folder:
   Open your file explorer, locate the build folder in your React project, and right-click it. Choose the option to compress or "Send to Zip" (depending on your OS). This will create a file named build.zip.
   

Step 3: Upload the Build Archive to cPanel

1. Log in to cPanel:
   Open your web browser and log in to your cPanel account.
2. Access File Manager:
   Navigate to the File Manager and open the public_html directory (or the directory for your subdomain if applicable).
3. Upload the .zip File:
   Click the Upload button, select your build.zip file, and wait for the upload to complete.
4. Extract the Archive:
   Once uploaded, right-click the build.zip file in File Manager and select Extract. This will unpack your app files into the directory.
   

Step 4: Configure the .htaccess File

1. Open or Create the .htaccess File:
   In the public_html directory, check for an existing .htaccess file. If it doesn't exist, create a new file named .htaccess.
2. Add the Rewrite Rules:
   Edit the file and insert the following code:

                                       
                                       Options -MultiViews
                                       RewriteEngine On
                                       RewriteCond %{REQUEST_FILENAME} !-f
                                       RewriteCond %{REQUEST_FILENAME} !-d
                                       RewriteRule ^ index.html [QSA,L]
                                        
                                   

   
   These rules redirect all non-existent file or directory requests to index.html, enabling React Router to manage navigation.
   

Step 5: Test Your Deployment

1. Visit Your Domain:
   Open your browser and go to your domain (e.g., https://yourdomain.com).
2. Check for Functionality:
   Navigate through your app's routes. Confirm that the pages load correctly and that the routing is properly managed by React Router.
   

Conclusion

This guide provides a detailed walkthrough from building your React app to testing your deployment ensuring that even beginners can successfully deploy their app on shared hosting using cPanel. Replace each screenshot placeholder with your own visuals to enhance the clarity of the process.