How to Deploy an Angular App on Free cPanel Hosting (Step-by-Step)

 

So you've built an amazing Angular app on your local machine. The next step is to share it with the world by deploying it to a live server. If you're on a budget, you might think you're out of luck—but you're not!

With free cPanel hosting, you can deploy your Angular app quickly and easily. This guide will walk you through the entire process, from building your app to making it live.

Prerequisites:

• A finished Angular app (ready for production).

• Your FREE cPanel hosting account from SYSCOM .

  >> Get Your FREE cPanel Hosting Here

---

Step 1: Build Your Angular App for Production

First, you need to create a production-ready bundle of your app. Open your terminal in the project's root directory and run the build command:

bash

ng build --configuration=production

or simply:

bash

ng build

This command creates a dist/ folder in your project. Inside it, you'll find a folder with your project's name (e.g., dist/my-angular-app/). This folder contains all the static files (HTML, CSS, JS) you need to upload.

Step 2: Log Into cPanel & Access File Manager

1. Log in to your free cPanel dashboard.

2. Find and click on the "File Manager" icon.

Step 3: Upload Your Angular Files

1. In the File Manager, navigate to the public_html directory. This is your website's root folder.

2. Click the "Upload" button at the top.

3. Drag and drop the entire contents of your dist/my-angular-app/ folder into the upload window.

   • Important: Upload the contents of the folder (e.g., index.html, assets/, main.js), not the folder itself.

Step 4: Fix Routing for Angular (The Critical Step!)

If your app uses Angular Router, directly accessing a deep link (e.g., yoursite.com/about) will cause a 404 error. To fix this, you need to create a .htaccess file.

1. In File Manager, ensure you're in public_html. Click "New File" at the top.

2. Name the file .htaccess.

3. Right-click the new file and select "Edit". Paste the following code:

apache

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

This configuration tells the server to serve index.html for all routes, allowing Angular Router to handle the navigation.

Step 5: Visit Your Live Website!

That's it! Your Angular app is now deployed. Go to your domain (e.g., https://yourdomain.com), and you should see your app live.

Troubleshooting Tip: If you see a blank page, open your browser's developer console. Chances are, the paths to your JavaScript files are wrong. In your angular.json file, set "outputPath" to "dist/" and set "baseHref" to "/" for a clean deployment.

Your free cPanel account is the perfect place to host your Angular portfolios, side projects, and prototypes.
>> Deploy Your Angular App Now!