bartholomej / firebase-preview-channels-example

firebase-preview-channel-example

Firebase Preview Channels Starter

Example/Starter app for Firebase Preview Channels with Angular 10 Universal and Github Actions CI/CD for autodeploy

What is inside?

• Firebase multihosting
• Firebase Preview Channels
• Angular 10
• Angular Universal (SSR)
• Github Actions for CI/CD deploy
• Typescript everywhere
• Yarn everywhere

How it works?

Deploy to Preview Channel on pull requests

If you create pull request the action creates a new preview channel automatically.

Preview channel url format: https://<site-name>--<channel-id>-<random-hash>.web.app

Deploy to your live channel on merge

If you merge pull request into master branch you will see your changes in production.

Instructions

How I did this example? Easily! See this manual... Commit by commit.

Prerequisities

• Firebase tools
• Angular CLI
• Google Cloud Account

Step by step...

1. Create Angular App (2c40b86)

Automatically (no manual intervention in this commit)

ng new previewchannels-app

2. Init Firebase (65bc32a)

Automatically (no manual intervention in this commit)

firebase init

3. Cache node_modules (eecc9d3)

Cache node_ modules + ivy NGCC builds for faster installation and faster Angular build

Manually!!

see commit diff eecc9d3 for more details

4. Add Angular Universal (be4bffe)

Automatically (no manual intervention in this commit)

ng add @nguniversal/express-engine

5. Init Firebase function for Angular Universal (a8c9f43)

Automatically (no manual intervention in this commit)

firebase init functions

6. Config Firebase multihosting + SSR deploy (266d1e3)

Manually!!

see commit diff 266d1e3 for more details

7. Use Yarn everywhere (5fbfb17)

Manually!!

see commit diff 5fbfb17 for more details

How can you try?

1. Fork this repository
2. Make some changes
3. Make pull request back to this repository
4. See what happens -> Your Firebase preview channel will be created and deployed...

I welcome you to customize this according to your needs ;)

Other CI/CD configuration

Bitbucket Pipelines

pull-requests:
  '**':
    - step:
        script:
          - export CHANNEL=$(echo $BITBUCKET_BRANCH | sed -e 's/\//-/g') # Remove slash for Firebase Channel name
          - yarn
          - yarn build
          - yarn firebase hosting:channel:deploy ${CHANNEL} --project project-name --json --token "$FIREBASE_TOKEN"

Donation

If this project have helped you save time please consider making a donation for some 🍺 or 🍵 ;)

License

Copyright © 2020 Lukas Bartak

Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)

All contents are licensed under the MIT license.