How to Deploy an Angular Application on cPanel Web Hosting

Modern frontend applications built with Angular run as Single Page Applications (SPAs). While local development relies on a live Node.js dev server (via ng serve), running production builds does not require a dedicated Node.js host. Angular compiles the entire codebase into standard static assets (HTML, JS, CSS) deployable to any shared cPanel hosting running Apache or Nginx. In this guide, we cover the production build process, deployment structure, and mandatory .htaccess configuration.

Building the Project for Production

Before uploading assets to the hosting environment, build the project with the Angular CLI. The --base-href flag is critical for establishing asset resolution paths.

Output Structure in the dist Folder

Following a successful build, output files are placed inside dist/project-name/browser/. Upload only the contents of the browser folder directly to the root of the destination directory.

1. index.html: The primary HTML entry point for the application.
2. main-[hash].js: Bundled application business logic and dependencies.
3. styles-[hash].css: Compiled and minified global styles.
4. assets/: Directory containing static resources (images, fonts, media).

Server Configuration: The .htaccess File

Because Angular manages client-side routing in the browser, direct URL navigation or refreshing with F5 causes Apache to search for physical directories, triggering a 404 Not Found error. All incoming routes must be rewritten back to index.html.

# Configuration for root domain or subdomain deployments (.htaccess)
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Troubleshooting Common Deployment Issues

When deploying frontend applications to production web servers, keep an eye on these frequent configuration pitfalls:

1. Blank Screen on Load: Inspect developer tools (F12 -> Console) for failed 404 asset requests. This indicates the project was built with an invalid --base-href parameter.
2. 404 on Page Refresh: Ensure the .htaccess file is deployed in the same folder as index.html. In cPanel File Manager Settings, enable Show Hidden Files (dotfiles) to edit it properly.
3. Cross-Origin API Conflicts (CORS): If the PHP backend lives on a separate domain or subdomain, emit the header("Access-Control-Allow-Origin: *"); header and ensure all endpoints run under secure HTTPS.