Implementing CI/CD Pipeline on Heroku for Angular Front-End Apps

Fundamentals of CI/CD for Angular Applications

Before implementing a CI/CD pipeline for your Angular front-end on Heroku, it's important to understand the three core stages involved:

1. Continuous Integration (CI)

In an Angular project, Continuous Integration ensures that whenever a developer pushes code (e.g., new components, services, or styling changes), the application is automatically built and tested. Tools like ng build and ng test run as part of the CI step to validate that the app compiles correctly and all unit tests pass.

2. Continuous Delivery (CD)

Continuous Delivery ensures that every successful Angular build is production-ready. Once the build passes all automated tests, the code is packaged and prepared for deployment. In Angular, this typically involves generating the production-ready files using ng build --configuration=production and storing them in the dist/ folder.

3. Continuous Deployment

With Continuous Deployment, any change merged into a specific branch (e.g., main) is automatically deployed to the production environment—such as a Heroku app or CDN-backed static hosting. For Angular, this means serving the compiled output from the dist/ directory using a Node.js server or buildpack configured for static file hosting on Heroku.

📊 CI/CD Process Flow for Angular

Here’s a simplified CI/CD workflow for Angular apps:

1. Developer pushes code to GitHub

2. GitHub triggers CI pipeline

3. Angular app is built and tested (ng build, ng test)

4. If successful, the production build is created (ng build --configuration=production)

5. Code is deployed to Heroku (via GitHub Actions, Heroku CI, or other pipelines)

   
   

Step 1: Login Heroku

·       Login Heroku using Login id and password.

·       Front-end APP is not in Heroku create Add New -> app add new pipelines

·       Click the New button in the top right of your app list and select Create new pipeline

·       A pipeline is a group of Heroku apps that share the same codebase. Each app in a pipeline represents one of the following stages in a continuous delivery workflow:

1.     Development

2.     Review

3.     Staging

4.     Production

·       Front-end app is in Development stage -> click -> Front-end APP

·       Open the particular Front-end app -> Development -> click promote to Staging button

·       In staging ->  click Open app button -> copy the URL.

 Step 2: Environment Configuration in Angular

In Angular, environment-specific settings are managed using environment files and angular.json configurations.

1. Create Environment Files

Create separate TypeScript files in the src/environments folder:

environment.ts:

export const environment = {
  production: false
};

environment.development.ts:

export const environment = {
  production: false,
  apiUrl: 'https://your-backend-development-api.herokuapp.com'
};

environment.staging.ts:

export const environment = {
  production: false,
  apiUrl: 'https://your-backend-staging-api.herokuapp.com'
};

environment.prod.ts:

export const environment = {
  production: true,
  apiUrl: 'https://your-backend-production-api.herokuapp.com'
};

2. Configure angular.json

Update your angular.json file to include the environment-specific configurations:

"configurations": {
  "development": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.development.ts"
      }
    ]
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  },
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

3. Set Environment Variables in Heroku

Use Heroku's dashboard or CLI to define any environment-specific variables your app may need.

Step 3: Proxy Configuration for Backend Communication

If your Angular front-end communicates with a backend API, set up proxy configurations to handle requests during development.

1. Create Proxy Configuration Files

proxy.config.local.json:

{
  "/api": {

    "target":"http://localhost:1234/app"
      
    },
    "changeOrigin": true,
    "logLevel": "debug",
    "secure": false
  }
}

proxy.config.development.json:

{
  "/api": {
    "target": "https://your-frontend-app-dev.herokuapp.com",
    "secure": true,
    "changeOrigin": true
  }
}

proxy.config.staging.json:

{
  "/api": {
    "target": "https://your-frontend-app-staging.herokuapp.com",
    "secure": true,
    "changeOrigin": true
  }
}

proxy.config.production.json:

{
  "/api": {
    "target": "https://your-frontend-app-production.herokuapp.com",
    "secure": true,
    "changeOrigin": truebackend
  }
}

2 .Modify angular.json for Proxy Use

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "proxyConfig": "src/proxy.config.local.json"
    },
    "configurations": {
      "development": {
        "browserTarget": "your-project-name:build:development",
        "proxyConfig": "src/proxy.config.development.json"
      },
      "staging": {
        "browserTarget": "your-project-name:build:staging",
        "proxyConfig": "src/proxy.config.staging.json"
      },
      "production": {
        "browserTarget": "your-project-name:build:production",
        "proxyConfig": "src/proxy.config.production.json"
      }
    }
  }
}

3. Run Angular Development Server

Run the Angular dev server with the appropriate configuration:

ng serve --configuration=development   # for development
ng serve --configuration=staging       # for staging
ng serve --configuration=production    # for production

This will proxy /api requests to the respective backend URL configured in your proxy file.

By following these steps, you can successfully implement a CI/CD pipeline on Heroku for your Angular front-end application, complete with environment management and proxy setup for smooth development and deployment workflows.