Github Actions: How to deploy Angular App to Firebase Hosting
Cloud-Powered Apps with Angular & Firebase
We are going to demo how to setup Github Actions in your Angular project to build and deploy your app to Firebase.
Assumptions:
for the purspose of this demo, I assume that your angular project repo is on Github and was built with firebase.
What are GitHub Actions
Back in 2018, a new feature was introduced into Github, called Github Actions. It allows GitHub users to automate their project workflow. Github takes care of a number of processes that can be triggered by a variety of events on the platform such as (but not only):
- pushing code
- making a release
- pull request
- creating issues
“GitHub Actions make it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.”
Github is all about integrating with your current workflow. My personal favorite is Github with Bit.dev.
Bit.dev is a cloud component hub, a place to publish, document and organize reusable Angular components. Whenever someone in my team publishes a new component (to Bit.dev) or updates an existing one, an automated PR is sent to all Github repositories that are using that component. This way we’re all in sync with the latest components in our shared Bit component collection.
You can read more about it here:
Deploy Angular App to Firebase Hosting
For this demo, I’m going to use the Angular application that I published a while ago: Cloud-Powered Apps with Angular & Firebase.
If you have your own angular app build with firebase, you should be good to go. Otherwise, complete the Cloud-Powered Apps with Angular & Firebase tutorial to follow along.
1. Setup Firebase hosting config file on your project repo and deploy it from your local computer
- Assure that the firebase tools is installed or simply run: npm install -g firebase-tools
- Assure that you’re logged in but run the command: firebase login
- Set up hosting config by running the command: firebase init
- Follow the setup as shown on the picture below and then deploy the app by ruining the command: firebase deploy
2. Set the “ng build” folder to match the public folder we set up for firebase
On your project repo, make the change on your angular.json file as shown below:
3. Setup Firebase Token on your GitHub Account
Now that we have everything set locally let’s set the CI/CD and deployment from GitHub repo and GitHub Actions.
Github will need access to your firebase resource.
You can provide that access by setting a “firebase_token” in your GitHub account to be able to deploy your Angular application to Firebase.
Generate a token for firebase ci:
run
firebase login:cito returns a token to be used in a CI server
Then, go to your setting and add the generated firebase token into your secrets:
4. Set up a Workflow with Action
In your GitHub repository click on Actions. To create your first workflow click on Set up a workflow yourself.
The fowwlowing is a quick into to how you can modify the default generated main.yml file with as desired:
Based on the branch that I have on my project repo. Currently, the workflow will be triggered on push into master. If you have named your branch differently or have many other branches, you can change the trigger rule to trigger the workflow on push or pull request into master or other branches:
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]The current job name is “build”. Give it a meaningful name description like deploy and deploy to firebase:
jobs:
deploy
name: deploy to firebaseThe workflow uses actions/checkout@v2. You can use leave with the default checkout@v2 or change it. Let's update it to actions/checkout@master
- uses: actions/checkout@masterNow let's install the dependencies needed to build the Angular application. We’ll assure that it’s gonna run on multiple versions of node. We use Setup Node.js for use with actions and update our steps to look like this:
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@master
with:
node-version: [14.x]
- run: npm install
- run: npm run build --prodThe last step is to deploy the Angular app to Firebase Hosting. GitHub Action for Firebase enables us to easily deply our app to Firebase.
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@master
with:
node-version: '10.x'
- run: npm install
- run: npm run build --prod
- uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}This is what my main.yml file looks like:
Now, you can go ahead and commit your workflow to your repository. This workflow is added to .github/workflows/main.yml.
Now, go ahead, Make a change in your project, push the change to your Angular project repo, and watch the workflow in the Actions tab. Check my deploy demo application here:
https://ng-vanila.firebaseapp.com/
If you enjoy this, you might also like:
Cheers!!
