#15 Building and Deploying Angular Applications

#15 Building and Deploying Angular Applications

Building and deploying Angular applications involves configuring your project, optimizing it for production, and deploying it to various platforms. This article covers build configuration with Angular CLI, environment configuration, production builds and optimization, deploying to different platforms, and implementing Continuous Integration and Continuous Deployment (CI/CD).

Build Configuration with Angular CLI

Angular CLI provides powerful commands to build and manage Angular projects. The ng build command compiles the application and creates an output directory containing the build artifacts.

Basic Build Command

To build your Angular application, run:

ng build

This command creates a dist directory with your build files.

Configuration Options

Angular CLI allows you to customize the build process with various configuration options in the angular.json file.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          },
          ...
        }
      }
    }
  }
}

You can customize the outputPath, index, main, polyfills, tsConfig, assets, styles, and scripts properties to fit your project’s needs.

Environment Configuration

Angular supports different environment configurations for development, testing, and production. These configurations allow you to manage environment-specific settings such as API endpoints, feature flags, and more.

Creating Environment Files

In the src/environments directory, you typically have environment files like environment.ts for development and environment.prod.ts for production.

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

environment.prod.ts

export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

Using Environment Variables

You can use the environment variables in your Angular application by importing the environment configuration.

import { environment } from '../environments/environment';

const apiUrl = environment.apiUrl;

Specifying Environment Files in Angular.json

In the angular.json file, specify which environment file to use for different build configurations.

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }
            ],
            ...
          }
        }
      }
    }
  }
}

Production Builds and Optimization

For production builds, Angular CLI provides several optimization techniques to improve performance.

AOT Compilation

Ahead-of-Time (AOT) compilation compiles the application during the build process, resulting in faster rendering in the browser.

ng build --prod --aot

Minification and Uglification

Minification and uglification reduce the size of your JavaScript files by removing whitespace and shortening variable names.

ng build --prod

Bundle Optimization

Angular CLI uses Webpack to bundle your application. Production builds automatically optimize bundles to reduce their size.

Lazy Loading

Lazy loading modules can significantly reduce the initial load time by loading parts of the application only when needed.

Service Workers

Service workers improve performance and enable offline capabilities by caching resources.

ng add @angular/pwa

Deploying to Various Platforms

Firebase Hosting

Firebase Hosting is a fast and secure hosting service for web applications.

  1. Install Firebase CLI:
npm install -g firebase-tools

2. Initialize Firebase Project:

firebase init

3. Deploy to Firebase:

firebase deploy

AWS S3 and CloudFront

AWS S3 and CloudFront provide scalable hosting for static websites.

  1. Install AWS CLI:
pip install awscli

2. Configure AWS CLI:

aws configure

3. Create S3 Bucket:

aws s3 mb s3://my-angular-app

4. Sync Build Directory to S3:

aws s3 sync dist/my-app s3://my-angular-app

5. Create CloudFront Distribution:

aws cloudfront create-distribution --origin-domain-name my-angular-app.s3.amazonaws.com

Heroku

Heroku is a platform-as-a-service (PaaS) that simplifies deployment.

  1. Install Heroku CLI:
npm install -g heroku

2. Login to Heroku:

heroku login

3. Create Heroku App:

heroku create my-angular-app

4. Deploy to Heroku:

git push heroku master

Continuous Integration and Continuous Deployment (CI/CD)

CI/CD automates the process of building, testing, and deploying applications. Popular CI/CD tools include GitHub Actions, Travis CI, and CircleCI.

GitHub Actions
  1. Create GitHub Workflow:
name: CI/CD Pipeline

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build Angular app
        run: npm run build --prod

      - name: Deploy to Firebase
        run: |
          npm install -g firebase-tools
          firebase deploy --token ${{ secrets.FIREBASE_TOKEN }}

Travis CI
  1. Create .travis.yml File:
language: node_js
node_js:
  - '14'

cache:
  directories:
    - node_modules

script:
  - npm install
  - npm run build --prod

deploy:
  provider: firebase
  token:
    secure: $FIREBASE_TOKEN

CircleCI
  1. Create .circleci/config.yml File:
version: 2.1

jobs:
  build:
    docker:
      - image: circleci/node:14

    steps:
      - checkout
      - run: npm install
      - run: npm run build --prod

  deploy:
    docker:
      - image: circleci/node:14

    steps:
      - checkout
      - run: |
          npm install -g firebase-tools
          firebase deploy --token $FIREBASE_TOKEN

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build

By following these steps, you can efficiently build and deploy your Angular applications. Proper build configuration, environment setup, optimization for production, and leveraging CI/CD pipelines will ensure a smooth and streamlined development and deployment process.


Hashtags

#Angular #WebDevelopment #BuildAndDeploy #AngularCLI #EnvironmentConfiguration #ProductionBuilds #Firebase #AWS #Heroku #CI #CD #GitHubActions #TravisCI #CircleCI #WebDev #FrontendDevelopment #JavaScript #TypeScript #AngularDeployment #DevOps #Coding #Programming #LearnAngular

Leave a Reply