Professional Workflow›Extra· 35 min read

Building & Deploying Your App

Turn your project into optimised files with ng build, then put them live on the internet so anyone can use your app.

What you will learn

Create a production build with ng build
Understand what AOT and tree-shaking do
Deploy the build to a free host

From dev server to a real website

While building, you run ng serve — a development server with helpful warnings and live reload. But you do not ship that. To go live you create a production build: Angular compiles your TypeScript and templates into small, fast, plain files (HTML, CSS, JavaScript) that any web host can serve.

Create an optimised production build

ng build

Note: Output: Initial chunk files | Names | Raw size | Transfer size main-XXXX.js | main | 210 kB | 62 kB ... ✔ Built successfully. Output written to dist/ Angular writes finished files into a dist/ folder. The “Transfer size” is what users actually download (compressed) — much smaller than the raw size.

What makes the build fast

Two optimisations run automatically and are worth knowing by name, because interviewers ask:

AOT (Ahead-Of-Time) compilation — Angular compiles your templates during the build, not in the user’s browser. The app starts faster and template mistakes are caught at build time.
Tree-shaking — the build removes code you never use, so the download is smaller. (Imagine shaking a tree so the dead leaves fall off.)

It also minifies (strips spaces and shortens names) and bundles files together, so users download less.

Keep secrets out: environments

Real apps need different settings for development and production — for example a different API web address. Angular’s environment files let you swap values automatically based on the build.

Different settings for dev and production

// src/environments/environment.ts (development)
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// src/environments/environment.prod.ts (production)
export const environment = {
  production: true,
  apiUrl: 'https://my-real-server.com/api'
};

Note: Output: (No visible output — settings only.) During ng serve your code uses the dev apiUrl; during a production ng build Angular swaps in the prod file automatically. You import environment.apiUrl in services and never hard-code the URL.

Put it live

Deploying means copying the dist/ folder to a host. Free hosts like Netlify, Vercel and Firebase Hosting make this a one-step job. Here is the whole path, start to finish:

Run ng build to produce the dist/ folder.
Push your code to a GitHub repository.
Connect that repo to Netlify (or Vercel/Firebase).
Set the build command to ng build and the publish folder to the dist/your-app path.
The host builds and gives you a live URL like your-app.netlify.app.

Deploying the build to Firebase Hosting

# Firebase example
npm install -g firebase-tools
firebase login
firebase init hosting      # set public dir to dist/your-app
firebase deploy

Note: Output: ✔ Deploy complete! Hosting URL: https://your-app.web.app Your app is now live on the internet at that URL. Share it on your portfolio or send it to anyone — that is the goal of the whole course.

Watch out: A single-page app needs the host to send index.html for any unknown URL (so deep links like /dashboard work on refresh). Most hosts have a simple “SPA redirect / rewrite all to index.html” setting — turn it on or routes break on reload.

Tip: Connect deployment to GitHub so every push auto-builds and redeploys (called continuous deployment). You change code, push, and your live site updates within a minute — no manual steps.

Q. What does “tree-shaking” do during an Angular production build?

Answer: Tree-shaking strips out unused code during the build, shrinking the bundle users download. AOT compilation and minification also help make the production build small and fast.

✍️ Practice

Run ng build and look inside the generated dist/ folder.
Set up an environment file with an apiUrl and read it in a service.

🏠 Homework

Deploy a small Angular app to Netlify, Vercel or Firebase and confirm a deep link (like /about) works after a page refresh.