Github Action deploying Angular App to Firebase Hosting

By

This snippet helps you to setup Github Actions in your Angular project to build and deploy your app to Firebase on git push.

Github Action in Beta

Github Action is still in Beta and requires you to sign up and is limited to private repositories.

Step 1. Actions

In your repository click Actions.

clicking actions tab in github

Step 2. New Workflow

To create your first workflow click on Create a new workflow

Create your first workflow

Step 3. Change workflow name

Click on Edit to change your workflow name and change it to e.g. Build and deploy on push.

main workflow

Step 4. npm install

Now lets create your first action to run npm install. Pull down the blue connector.

first action

On the right side a selection windows appears to select an action available on Github. Click on Use for Github Action for npm.

choose action

Now you can set the label to Install and add install in the args input field. Don’t forget to click Done.

npm install

Your main workflow should look like this.

main workflow with install action

Step 5. ng build

Drag the blue connector again down to create the Build action. Use Github Action for npm again with the label Build and add to args run build:prod. This executes npm run build:prod, hence you need to add this script to your package.json: "build:prod": "ng build --prod".

main workflow with install and build action

Step 6. Deploy to Firebase

Now to our last action, Deploy to Firebase. Pull the blue connector and search for firebase.

search for firebase action

Update the label to Deploy to Firebase and deploy command deploy --only hosting to args.

Github requires a FIREBASE_TOKEN to be able to deploy your Angular app to Firebase. Generate a token for firebase ci:

  • install npm i -g firebase-tools
  • firebase login:ci returns a token to be used in a CI server

command line
Waiting for authentication...

✔  Success! Use this token to login on a CI server:

1/A29..............y

Example: firebase deploy --token "$FIREBASE_TOKEN"

Click in Github in the Firebase Action on Create a new secret and enter FIREBASE_TOKEN as SECRET_KEY and your firebase token as Secret value.

Add this firebase token as secret to github actions.

add firebase token to github action

Step 7. Final Workflow

Your final workflow should look something like this in the text editor:

main.workflow
workflow "Build and deploy on push" {
  on = "push"
  resolves = ["Deploy to Firebase"]
}

action "Install" {
  uses = "actions/npm@59b64a598378f31e49cb76f27d6f3312b582f680"
  args = "install"
}

action "GitHub Action for npm" {
  uses = "actions/npm@59b64a598378f31e49cb76f27d6f3312b582f680"
  needs = ["Install"]
  args = "[\"run\", \"build:prod\"]"
}

action "Deploy to Firebase" {
  uses = "w9jds/firebase-action@7d6b2b058813e1224cdd4db255b2f163ae4084d3"
  needs = ["GitHub Action for npm"]
  args = "deploy --only hosting"
  secrets = ["FIREBASE_TOKEN"]
}

Now you can commit your new workflow to your repository. This workflow is added to .github/main.workflow. Go ahead and push a change to your Angular project and you can see the progress in the Actions tab and your change are deployed directly to Firebase.

The workflow takes around ~3-4 minutes to complete.

Q&A Chat