How to Deploy Angular App on Shared Hosting Like Bluehost

If you’ve just built your first Angular app and are wondering how to host it online — you’re not alone. Unlike frameworks like React or Vue, deploying Angular on shared hosting (like Bluehost, Hostinger, or GoDaddy) requires a few extra steps.

The good news? It’s super easy once you understand how Angular builds and serves your files.

In this guide, I’ll walk you through how to deploy your Angular app to Bluehost (or any other shared hosting) — step-by-step.

Step 1: Build Your Angular App for Production

Before uploading anything, you must build your Angular app for production.

Run this command inside your project folder:

ng build --configuration production

or simply:

ng build --prod

This creates a dist/ folder in your project directory containing the optimized static files (HTML, CSS, JS) that you’ll upload to your hosting.

Path Example:

/your-angular-app/dist/your-angular-app/

Inside this folder, you’ll find:

• index.html
• assets/
• .js and .css bundles

Step 2: Log In to Your Hosting Account

Go to your Bluehost cPanel dashboard and open the File Manager.

Navigate to:

public_html/

This is your main website directory — anything you place here will be accessible on your domain.

Step 3: Upload Your Angular Build Files

Now upload the contents of the dist/your-app-name/ folder (not the folder itself) into public_html/.

The final structure should look like:

public_html/
├── index.html
├── assets/
├── main.js
├── polyfills.js
├── runtime.js
├── styles.css

If you upload the entire folder, your app might end up at:
yourdomain.com/your-app/
instead of:
yourdomain.com/

Step 4: Configure base href

Before building, make sure your base href in index.html is set correctly.

If deploying at the root domain (like yourdomain.com):

<base href="/">Code language: HTML, XML (xml)

If deploying in a subfolder (like yourdomain.com/angular/):

<base href="/angular/">Code language: HTML, XML (xml)

Step 5: Handle Page Refresh Issue (Optional)

Angular is a Single Page Application (SPA) — meaning, if you refresh a route like /dashboard, it might show a 404 error on shared hosting.

To fix this, create a .htaccess file inside public_html/ and add this code:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
Code language: HTML, XML (xml)

This tells Apache to always redirect to index.html, allowing Angular to handle routing.

Step 6: Test Your Deployment

Now open your browser and visit your domain:

https://yourdomain.comCode language: JavaScript (javascript)

If everything is done correctly, your Angular app should load beautifully — fast and optimized for production.

Pro Tip: For Future Updates

Whenever you make changes in your Angular app:

1. Run ng build --prod
2. Re-upload the new dist/ contents to public_html/
3. Clear your browser cache and refresh

Conclusion

And that’s it! You’ve successfully deployed your Angular app on shared hosting like Bluehost.

No need for Node.js servers or complex CI/CD setups — just a clean static build and a few clicks in cPanel.

Once you’re familiar with this process, you can host Angular apps on any platform that supports static files.