Tutorials Logic, IN +91 8092939553 info@tutorialslogic.com
Navigation
Home About Us Contact Us Blogs FAQs
Tutorials
All Tutorials
Services
Academic Projects Resume Writing Interview Questions Website Development
Compiler Tutorials

Deployment

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.