Deploying an Angular - Textnotes

Deploying an Angular

Deploying an Angular application involves building it for production and hosting it on a server or cloud platform. Proper deployment ensures fast loading, optimized bundles, and secure hosting.

1. Build for Production

Generate a production-ready build:


ng build --prod
  1. Compiles TypeScript to JavaScript
  2. Optimizes bundle size (minification, tree-shaking, AOT)
  3. Output folder: dist/<project-name>

Serve locally to test:


npx serve dist/<project-name>

2. Deploy to Firebase Hosting

  1. Install Firebase CLI:

npm install -g firebase-tools
  1. Login and initialize:

firebase login
firebase init
  1. Select Hosting
  2. Set dist/<project-name> as public folder
  3. Configure as SPA: Yes (rewrite all URLs to index.html)
  4. Deploy:

firebase deploy

3. Deploy to Netlify

  1. Sign up at Netlify and connect your GitHub repository.
  2. Configure build settings:

Build command: ng build --prod
Publish directory: dist/<project-name>
  1. Deploy automatically on push to main branch.

4. Deploy to Vercel

  1. Install Vercel CLI:

npm i -g vercel
  1. Deploy:

vercel
  1. Set dist/<project-name> as output directory
  2. Follow prompts for project name and scope

5. Deploy to AWS S3

  1. Build Angular app:

ng build --prod
  1. Create S3 bucket and enable static website hosting.
  2. Upload dist/<project-name> files.
  3. Optional: Use CloudFront for CDN and HTTPS.

6. Deploy to Azure

  1. Build Angular app:

ng build --prod
  1. Create Azure Storage Static Website or App Service.
  2. Upload dist/<project-name> files via Azure portal or Azure CLI:

az storage blob upload-batch -s dist/<project-name> -d '$web'
  1. Access the site via Azure URL.

7. Deploy to NGINX

  1. Build Angular app:

ng build --prod
  1. Copy files to NGINX server directory (e.g., /var/www/html).
  2. Configure nginx.conf for SPA routing:

server {
listen 80;
server_name example.com;

root /var/www/html;

location / {
try_files $uri /index.html;
}
}
  1. Restart NGINX:

sudo systemctl restart nginx

Summary

  1. Build Angular app with ng build --prod for optimized production code.
  2. Deploy to hosting platforms like Firebase, Netlify, Vercel, AWS S3, Azure, or NGINX.
  3. Ensure SPA routing is handled correctly (rewrite all URLs to index.html).
  4. Use CDN or caching for faster loading.
  5. Test after deployment for performance and correctness.