Day 05 Mastery

Build and Deploy

Production Angular apps need optimized builds, environment-specific config, and a reliable hosting setup. This lesson covers the build process, environment

~1 hour Hands-on Precision AI Academy

Today's Objective

Learn the core concepts of Build and Deploy and apply them in practical exercises.

01

Production Builds

Terminal
Terminal
# Development build (fast, not optimized)
ng serve

# Production build (optimized, minified, AOT compiled)
ng build

# Output goes to dist/my-app/
# Ahead-of-Time (AOT) compilation catches template errors at build time
# Smaller bundles, faster startup
02

Environment Configuration

src/environments/environment.ts
src/environments/environment.ts
// Development
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};
src/environments/environment.prod.ts
src/environments/environment.prod.ts
// Production
export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com'
};
Using in code
Using in code
import { environment } from '../environments/environment';

const res = await fetch(environment.apiUrl + '/users');
// Angular CLI automatically swaps the file at build time
03

Deploy to Netlify

netlify.toml
netlify.toml
[build]
  command = "ng build"
  publish = "dist/my-app"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
04

Deploy to Firebase Hosting

Terminal
Terminal
npm install -g firebase-tools
firebase login
firebase init hosting
# Set public directory to: dist/my-app
# Configure as single-page app: Yes
firebase deploy
ℹ️
The [[redirects]] rule in Netlify (and the equivalent in Firebase) is required for Angular Router's PathLocationStrategy. Without it, refreshing on any route other than / returns a 404.

Supporting References & Reading

Go deeper with these external resources.

Docs
Build and Deploy Official documentation for angular.
GitHub
Build and Deploy Open source examples and projects for Build and Deploy
MDN
MDN Web Docs Comprehensive web technology reference

Day 5 Checkpoint

Before moving on, confirm understanding of these key concepts:

Course Complete
Return to Course Overview