Firebase Hosting and GitHub Actions

February 10, 2020

Firebase Hosting is a free static site hosting platform that we can deploy to using CLI tooling. GitHub Actions are workflows for repos that can provide continuous integration and continuous deployment (CI/CD).

Firebase

Make sure you have a project in the Firebase Console and enable hosting in the project settings.

You can use your own custom domain, and it comes with free SSL.

Install the Firebase CLI globally:

yarn global add firebase-tools

Initialise firebase:

firebase init

Choose your project and select Hosting.

The public folder should be the folder you have set up to output to in your build process. By default, in a create-react-app project, this is the build folder.

If you have a single page app choose yes to rewrite all routes to index.html. Once complete you should get a json file the resembles this:

firebase.json

{
	"hosting": {
		"public": "build",
		"ignore": [
			"firebase.json",
			"**/.*",
			"**/node_modules/**"
		],
		"rewrites": [
			{
				"source": "**",
				"destination": "/index.html"
			}
		]
	}
}

Auth

For our process to work in GitHub Actions we need to be able to log in to firebase with a machine user. The Firebase CLI has a convenience command for this that generates an access token that can be used to authenticate from the CLI:

firebase login:ci

This will open a login prompt in browser for you to consent to, and once complete the token will be written back in the shell. This will need to be added as a secret in your GitHub repo.

GitHub Actions

In your projects repo on GitHub, add the auth token from the previous step as a secret (give it a name like FIREBASE_TOKEN).

Once that is done we can create a new workflow in the Actions tab. The below file simply triggers on any push to master, then installs, tests, builds, and deploys:

.github/workflows/main.yml

name: CI/CD
on:
  push:
    branches:
      - master
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest    
    steps:
    - uses: actions/checkout@master
    
    - name: Install Dependencies
      run: yarn install
      
    - name: Run tests
      run: yarn test
      
    - name: Build Production Artifact
      run: yarn build
      
    # make sure we have the latest firebase cli globally available to run our commands
    # needs sudo to be able to access the commands
    - name: Install Firebase CLI
      run: sudo npm install -g firebase-tools
    
    # use the secret created in the repo to authenticate with Firebase
    - name: Deploy to Firebase
      run: sudo firebase deploy --token "${{ secrets.FIREBASE_TOKEN }}"

Once complete the site should be live on the setup domain.

In Prod

← Back to Posts

Firebase Hosting and GitHub Actions

Firebase

Auth

GitHub Actions