Automating deployment to Firebase Hosting, using Github actions
If you have a static web site you can deploy it instantly to Firebase hosting.
In this post, I will be focusing on automating deployment using Github actions — from commit to live.
What you need
Tip: When building React apps, make sure no reusable component goes to waste. Share components from any codebase into a collection (a modular and dynamic library) in bit.dev. It will help you speed-up development, write more scalable and maintainable code and maximize collaboration with your teammates.
1. Clone a starter project
Let's say I already have a fresh start gatsby (or create-react-app) project in GitHub
yarn build// then you will see another folder appears// in gatsby => public-| |-- public
|-- src// in create-react-app => build-| |-- build
2. Init firebase in your local project
// install firebase cli globally
yarn global add firebase-tools// then run this command in terminal of root project dir
Choose hosting by pressing the space bar and keep going until you have
3. Manually deploy to firebase hosting
firebase deploy --only hosting
Let’s automate the flow with Pipeline
The idea is when you commit your work to master (every time), it will trigger the pipeline that will build your stuff and deploy to firebase hosting
4. Get firebase token for CI
It will open the Google login page, choose your account.
After login successfully, go back to your terminal and you will see the token. Copy it then go to your GitHub repo
5. Add token to GitHub repo
6. Create actions in repo
Create file action.yml in actions.
Let me explain a little bit about this configuration.
- name of the workflow
- on: push: branches: — master means this pipeline will be a trigger for any change (commits) on the master branch
- jobs you can think of as tasks that this pipeline will do
One thing that is worth mentioned is the
steps: - name: Checkout Repo
The very cool feature of GitHub actions is you can reuse other people’s actions by specifying
uses . In this scenario, I reuse other actions like
checkout@master (“@master” is the version of this action, you can change to
@v1.x for ex.)
Try push some changes to the master branch, you should see the green pipeline. If not comment below and I will help you.