How to Deploy a React App on cPanel (e.g., Namecheap) and Vercel

Deploying your React app ensures that your application is accessible to users online. This guide will walk you through deploying your React app on both cPanel (commonly provided by hosting providers like Namecheap) and Vercel. By the end, your app will be live and ready for the world to use.

---

Option 1: Deploying React on cPanel

Prerequisites

• A React app ready for production.

• Access to your hosting account's cPanel (e.g., Namecheap, HostGator, etc.).

• A domain or subdomain set up for your deployment.

Step 1: Create a Production Build

React needs to be optimized for production. To do this:

1. Open a terminal in your React project directory.

2. Run the following command:

    npm run build
   

3. This generates a build folder containing the production-ready version of your app.

Step 2: Compress the Build Folder

To upload the app to cPanel, the build folder must be compressed:

• On Mac: Right-click the build folder and select Compress "build".

• On Windows: Right-click the folder and choose Send to > Compressed (zipped) folder.

This creates a build.zip file.

Step 3: Upload the Build Folder to cPanel

1. Log in to your cPanel account.

2. Navigate to File Manager.

3. Go to the directory for your domain or subdomain:

   • Main Domain: public_html.

   • Subdomain: Look for public_html/<subdomain_name> or a similar folder.

4. Click the Upload button and select your build.zip file.

5. After the upload is complete, select the build.zip file and click Extract to unpack the files.

Step 4: Move Files to Root Directory

If the extracted files are inside a folder named build, move the contents of the build folder to the root of your domain or subdomain directory.

Step 5: Configure .htaccess for Routing

React apps using React Router require special handling for client-side routing. To handle this:

1. Create or edit the .htaccess file in the root directory of your domain.

2. Add the following code:

    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteBase /
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ index.html [L]
    </IfModule>
   

3. Save the file.

Step 6: Test Your App

Visit your domain (e.g., https://yourdomain.com) or subdomain (e.g., https://app.yourdomain.com) in a browser. Your React app should now be live!

---

Option 2: Deploying React on Vercel

Vercel is a cloud platform optimized for frontend frameworks like React. It’s quick, free (for most use cases), and requires minimal setup.

Prerequisites

• A React project hosted on GitHub, GitLab, or Bitbucket (optional, but recommended).

• A Vercel account (sign up at vercel.com).

Step 1: Create a Vercel Account

1. Go to Vercel and sign up for an account.

2. Log in to the Vercel dashboard.

Step 2: Import Your Project

1. Click the New Project button.

2. Connect your GitHub/GitLab/Bitbucket account to Vercel.

3. Select the repository for your React app.

Step 3: Configure Build Settings

1. When prompted, Vercel will automatically detect your React app.

2. Ensure the following settings are correct:

   • Framework Preset: React.

   • Build Command: npm run build (default).

   • Output Directory: build (default).

3. Click Deploy to start the deployment process.

Step 4: Wait for Deployment

Vercel will build and deploy your app. Once complete, you’ll receive a live URL (e.g., https://yourapp.vercel.app).

Step 5: Add a Custom Domain (Optional)

1. In the Vercel dashboard, go to your project settings.

2. Add a custom domain under the Domains section.

3. Update your domain’s DNS settings (add an A or CNAME record) to point to Vercel’s servers.

Step 6: Test Your App

Visit your Vercel-provided URL or your custom domain to see your React app live.

---

Key Differences Between cPanel and Vercel

---

Conclusion

Both cPanel and Vercel are excellent platforms for hosting React apps, depending on your needs:

• Use cPanel if you’re already paying for shared hosting or need to host backend services alongside your app.

• Use Vercel for quick, free, and scalable deployments optimized for React.

No matter which method you choose, your React app will be live and accessible to your users in just a few steps!