The purpose of this post is to publish an Angular application within a Firebase project using the Firebase Hosting product. To automate the deploy we will use a Github Actions pipeline that will be triggered in every commit on the main
branch.
To follow this tutorial, you will need to have:
- Firebase account
- Google account
- Firebase CLI installed, see more here
- Github account
- Previous knowlodge of git and github
Firebase Project
Go to console.firebase.google.com
and create a new project.
I'll use demoangulargithubactions
I choose to disable Google Analytics, since it's irrelevant for this tutorial.
Wait until the project creation finish.
As soon as the project is available, you will see a lot of products available for you. For now, keep this tab and let's go to the next step.
Github repository and Angular project
In this tutorial I'll create a new repository called demogithubactions
and a new angular project using ng new angular-tour-of-heroes
, but this step is optional. If you already have a project, use it.
Clone your repo locally.
Create the angular project.
The project will be create inside the folder angular-tour-of-heroes
, as image below.
I prefer to move all code to the root folder. Just because it simplify or Github Actions pipeline.
Firebase configuration
Now we have our project and repo, let's configurate our firebase project.
If you don't have the Firebase CLI installed, do it.
Run firebase init hosting
and choose Use an existing project
.
Choose your project in the list.
Anwser the questions, be free to anwser or not like me:
- Chosse the folder that will be publish, this need to be the same folder that the one generate when we run
ng build
, in my case will bedist
.
- Next, I choose No.
- Again, I choose No, because I prefer to do the conections between Github and Firebase using my own script.
Done. If everthing is ok, you will receive a message like the image below.
Commit everything.
Github Actions
To configure Github Actions, first we need an auth token from Firebase, generate this token using firebase login:ci
. Follow the instructions and authenticate.
A token will be displayed, like image below. For now, keep this token safe, we'll put it in a Secret in your Github repo.
Access your repo, go to Settings -> Secrets -> Actions e create a New repository secret
.
Put the name FIREBASE_TOKEN
e paste your token in the value field. Add the Secret.
Go to Actions, search for Manual e click in Configure in the Manual workflow box.
A page will be create with lots of code, replece everthing with the code below.
name: Deploy-To-Firebase
on:
push:
branches:
- main
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Use Node.js 16.13
uses: actions/setup-node@v1
with:
node-version: 16.13
- name: Install dependencies
run: npm install
- name: Build
run: npm run build -- --prod
- uses: w9jds/firebase-action@master
with:
args: deploy
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
To save the file, click in Start Commit, follow the instructions.
Click in Actions again, if not exist a worflow running, go to Deploy-To-Firebase
and click Run workflow
.
Optionally, open the deploy and follow step by step. After script execution all steps need to be green, like bellow image.
Go back to the Firebase tab console.firebase.google.com
and refresh. Click All products
and then Hosting
.
Open one link in a new tab. Maybe you'll see something like next image, if thats the case, we need to ajust a configuration
Go to angular.json
, at line 23, the value of outputPath
configuration is different than what was informed previouslly in firebase init.
Here we have two options, change file angular.json
and use "outputPath": "dist"
or change file firebase.json
and use "public": "dist/angular-tour-of-heroes"
. I choose to change angular.json
.
Do a new commit. Follow Github Actions pipeline, refresh your Firebase console and you will see something like next image.
Open your project link and see your project published.
Conclusion
I holp that this tutorial could help you to configure a Github Action pipeline to deploy your angular project to Firebase Hosting.
If you like this tutorial, try adding a Telegram notification with Github Actions step to your pipeline.
Top comments (1)
Thanks for sharing !