内容简介: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.Tip:When building React apps, make sure no reusable component goes to waste.
Automating deployment to Firebase Hosting, using Github actions
Feb 5 ·4min read
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
- Github account + static web repo
- Firebase account
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 |-- src
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 firebase init
Choose hosting by pressing the space bar and keep going until you have firebase.json
.firebaserc
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
firebase login: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
steps: - name: Checkout Repo uses: actions/checkout@master
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.
以上所述就是小编给大家介绍的《Deploy Gatsby to Firebase Hosting with Github Actions》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JSP网站开发典型模块与实例精讲
李振捷 / 电子工业出版社 / 2006-8 / 50.0
本书是典型模块与实例精讲丛书中的一本。 本书讲解了使用JSP开发网站系统的经典模块和工程实例,基本囊括了JSP的重点技术,对这些模块稍加修改就可以直接使用到实际项目中。为了方便本书的读者交流在学习中遇到的问题,特地在本书的服务网站上公布了很多QQ群组,读者只要拥有QQ号码,就可以参与到本书的QQ学习群组中一起讨论学习心得。本书的作者还在一定的时间给读者提供在线答疑服务。一起来看看 《JSP网站开发典型模块与实例精讲》 这本书的介绍吧!