Deployment
You've built an amazing Angular app. Now it's time to share it with the world! Deployment is the process of making your application available on the internet.
Building for Production
First, create a production build:
ng build --prod
# or in Angular 12+
ng build --configuration production
dist/ folder with optimized files (minified, tree-shaken, with AOT compilation).Deployment Options
1. Static Hosting (Firebase Hosting)
Firebase is great for SPAs.
npm install -g firebase-tools
firebase init
firebase deploy
2. Netlify
Connect your Git repository or drag-and-drop the dist folder.
npm run build
npx netlify deploy --prod
3. Vercel
Excellent for Angular apps.
npm install -g vercel
vercel
4. GitHub Pages
Free hosting for open source projects.
ng build --prod --base-href /your-repo-name/
npx angular-cli-ghpages --dir=dist/your-project-name
5. Traditional Servers (Apache, Nginx)
Copy the dist folder contents to your server. Important: configure URL rewriting for SPA.
Nginx Configuration
For SPAs, all routes should serve index.html:
location / {
try_files $uri $uri/ /index.html?$args;
}
Environment Configuration
Use different environment files for different deployments:
// environments/environment.prod.ts
export const environment = {
production: true,
apiUrl: 'https://api.myapp.com'
};
Deployment Checklist
- ✅ Run production build with optimizations.
- ✅ Test the build locally with `npx http-server dist`.
- ✅ Set correct base-href if deploying to subfolder.
- ✅ Configure server for SPA routing (fallback to index.html).
- ✅ Enable compression (gzip) on server.
- ✅ Set up SSL (HTTPS).
- ✅ Configure environment variables for APIs.
Two Minute Drill
- Production build: `ng build --prod` creates optimized files.
- Deploy to Firebase, Netlify, Vercel, GitHub Pages, or traditional servers.
- For SPAs, configure server to always serve index.html.
- Use environment files for different configurations.
- Always test your build locally before deploying.
- Enable compression and HTTPS for better performance and security.
Need more clarification?
Drop us an email at career@quipoinfotech.com