Config and Deploy Angular applications to Firebase hosting to support multi-environment

When you develop a web application from the Angular framework, and you want to deploy it to Firebase hosting. Are you found a problem with a multi-developer environment issue? Like a dev, uat, or prod. How do you do that in the same project?

Firebase hosting it have a feature called multiple sites. This feature can compile and deploy an Angular web application separate by environment. First, you need to create a Firebase project in the Firebase console. Next, create multiple hosting websites ex—multi-dev, multi-uat, multi-prod est. Anywhere you can choose your project name.

Apply multisite config to your Angular application

I assume you already have the Firebase project and the angular project. The first step your need to log in to your firebase-cli on your terminal (Assume your already installed firebase-cli)

firebase login #after this cmd, The browser will open for the logged-in URL.
Waiting for authentication...
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=5635.....
✔  Success! Logged in as xxxx@gmail.com

When the browser opens, your need to select your Google account, and a popup will ask for your permission. Click Allow to complete the login process. After that, your terminal will receive the text “Success! Logged in as xx@gmail.com” is a success.

Next, You need to initialize Firebase hosting project using firebase-cli again.

firebase init
#spacebar confirms Hosting choice.
❯◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
#select your project
i  Using project multisite-tutor
#angular project compiled file in dist folder, you can change in angular.json
? What do you want to use as your public directory? (public) dist/html

Next, You need to application development environment to your Firebase hosting site using firebase-cli.
firebase target:apply hosting <envrironment> <site-name>

#apply target dev environment to multi-dev firebase site
firebase target:apply hosting dev multi-dev
firebase target:apply hosting uat multi-uat
firebase target:apply hosting prod multi-prod

After that, you can check that firebase-cli apply your config in .firebaserc

{
  "projects": {
    "default": "multisite-tutor"
  },
  "targets": {
    "multisite-tutor": {
      "hosting": {
        "dev": [
          "multi-dev"
        ],
        "uat": [
          "multi-uat"
        ],
        "prod": [
          "multi-prod"
        ]
      }
    }
  },
  "etags": {}
}

In the next step, you must change the hosting config in firebase.json to support the target site. Open your firebase.json shift it to an array, and add multi-site config. See the example below.

{
  "hosting": [
    {
      "target": "dev",
      "public": "dist/www",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "uat",
      "public": "dist/www",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "prod",
      "public": "dist/www",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

Finally, you need to change package.json to support multi-site build and deployment.

{
  "name": "angular-multisite",
  "version": "8.2.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:uat": "ng build --configuration uat",
    "build:prod": "ng build --configuration production",
    "deploy": "firebase deploy only hosting:dev",
    "deploy:uat": "firebase deploy only hosting:uat",
    "deploy:prod": "firebase deploy only hosting:prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
  },
}

You're all ready to deploy a separate development environment using script commands. For example, develop phase. You can run the command below

yarn build #build an angular application using environment.dev.ts
yarn deploy #deploy your angular application to firebase hosting
#for uat
yarn build:uat
yarn deploy:uat

You can configure and deploy your Angular application to multi-site in Firebase hosting when reading this section. In the next post, I will show you. How to use gitlab ci/cd to automate deploy your angular application to Firebase hosting automatically. See you in the next post.