Tutorials Logic, IN info@tutorialslogic.com
Navigation
Home About Us Contact Us Blogs FAQs
Tutorials
All Tutorials
Services
Academic Projects Resume Writing Website Development
Practice
Quiz Challenge Interview Questions Certification Practice
Compiler Tools

Angular Deployment — Build and Host Your App

Deployment

Deployment is the process of preparing an application to run and operate in a specific environment. In Angular 21, the production build command is simply ng build - production mode is the default and the --prod flag is no longer needed. Once ready for deployment to a remote server, there are many options available, such as:-

  • Simple deployment.
  • Deploy to GitHub pages.

Simple Deployment

There are a few simple steps for simple deployment, which include the following:-

Step 1:- First create the production build. In Angular 21, just navigate to the project folder and run the below command in terminal - production mode is the default.

Production Build
# Angular 21 - production is the default, no --prod flag needed
ng build

Step 2:- Copy all the content from the output folder i.e. dist folder (by default) to a folder on the server.

Step 3:- Now, just configure the web server to redirect missing files requests to index.html.

Deploy to GitHub Pages

There are few simple steps to deploy on GitHub pages, such as:-

Step 1:- First, create a GitHub account if you don't have one, and then create a repository for your project.

Step 2:- Now, build project using Github project repository name, just navigate to project folder and run below command in terminal.

GitHub Pages Build
# Build for GitHub Pages (replace <project_name> with your repo name)
ng build --output-path docs --base-href /<project_name>/

Step 3:- Once the build is complete, make a copy of docs/index.html and rename it docs/404.html.

Step 4:- Now commit changes and push.

Step 5:- Now, on the GitHub project page, configure it to publish from the docs folder.

We can see our deployed page at https://.github.io//.

Modern Deployment (Angular 21)

In Angular 21, the production build command is simply ng build - production mode is the default. The --prod flag is no longer needed. Additional deployment options include:

  • Netlify / Vercel: Connect your Git repository for automatic deployments.
  • Firebase Hosting: Use ng add @angular/fire for Firebase deployment.
  • Docker: Build a Docker image from the dist/ folder with an Nginx server.
  • Server-Side Rendering: Use Angular SSR (formerly Universal) with ng add @angular/ssr.
Key Takeaways
  • Always run ng build --configuration production before deploying - it enables AOT, tree-shaking, and minification.
  • The dist/ folder contains the production build - deploy its contents to your web server.
  • Configure your server to redirect all routes to index.html for Angular's client-side routing to work.
  • Use environment files (environment.ts, environment.prod.ts) to manage different API URLs per environment.
  • Angular Universal (SSR) improves SEO and initial load performance by rendering on the server.
  • Use ng deploy with platform-specific builders for one-command deployment to Firebase, GitHub Pages, etc.

Ready to Level Up Your Skills?

Explore 500+ free tutorials across 20+ languages and frameworks.