Deploy Gatsby to Firebase Hosting with Github Actions

栏目: IT技术 · 发布时间: 5年前

内容简介: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

Deploy Gatsby to Firebase Hosting with 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.

Deploy Gatsby to Firebase Hosting with Github Actions
Example: searching for shared components in bit.dev

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

Deploy Gatsby to Firebase Hosting with Github Actions

Choose hosting by pressing the space bar and keep going until you have firebase.json .firebaserc

Follow this if your project is Gatsby
Follow this if your project is Create-React-App

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.

Deploy Gatsby to Firebase Hosting with Github Actions

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

Deploy Gatsby to Firebase Hosting with Github Actions

add FIREBASE_TOKEN to secret

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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

共享经济大趋势

共享经济大趋势

倪云华 虞仲轶 / 2016-1-1 / 49.00

2015年互联网界乃至整个商界的最热门字眼,恐怕就是“共享经济”了。共享经济模式正以前所未有的速度与规模席卷全球。那么,共享经济为什么会产生?其本质是什么?共享经济会为我们带来什么价值?成功的共享经济商业模式是怎样的?如何管理和运作一家共享经济企业?在未来,共享经济还将面临哪些挑战?共享经济的下一个发展机会在哪里?传统经济又该如何应对? 作为国内第一本系统性阐述共享经济的书籍,本书通过对全球......一起来看看 《共享经济大趋势》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具