Knowledgebase

How to Deploy an Angular App in cPanel

You can deploy an Angular app in cPanel using the File Manager or FTP by building a static version of your app and uploading it. Follow these steps:

1️⃣ Build Your Angular App for Production

• Open your terminal and navigate to your Angular project:

  bash

  CopyEdit

  cd /path/to/your-angular-app

• Run the Angular build command:

  bash

  CopyEdit

  ng build --configuration=production

  (or for older Angular versions: ng build --prod)

• This creates a dist/ folder with optimized HTML, CSS, and JavaScript files.

2️⃣ Upload Files to cPanel

Method 1: Using File Manager (Recommended)

1. Log in to cPanel.
2. Go to File Manager → Open public_html/.
3. Delete old files (if any).
4. Upload the contents of dist/your-app/ (not the folder itself) into public_html/.

Method 2: Using FTP (Alternative)

• Connect to your hosting with FileZilla or another FTP client.
• Navigate to public_html/ and upload the contents of dist/your-app/.

3️⃣ Set Up .htaccess for Angular Routing (SPA Support)

• Inside public_html/, create or edit the .htaccess file.

• Add the following code to enable Angular routing:

  apache

  CopyEdit

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

4️⃣ Check Your Website

• Open your browser and visit:
  arduino

  CopyEdit

  https://yourdomain.com
  Your Angular app should be live! ????

⚠️ Common Issues & Fixes

???? 404 Page Not Found?
✔️ Ensure .htaccess is set correctly to enable Angular routing.

???? Old Version Loading?
✔️ Clear browser cache or force reload (Ctrl + Shift + R).

???? CORS Issues with APIs?
✔️ Enable CORS headers on your backend or use a proxy.