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
→