Skip to content

Deploying a fork to Firebase

Maria Isabel Restrepo edited this page Oct 26, 2022 · 6 revisions

If your lab plans on deploying this task to your own Firebase, but you do not expect to develop further changes and only deploy changes as developed by Brown, then these instructions are for you!

1. Fork this repository

The first step consists of creating a fork of this repository that you will use to add Firebase configuration changes and trigger the automation for deployement.

To create a fork, first click on the fork button on the upper right corner of the repository's landing page

fork-repo

You will be asked for the owner, name of the fork and whether to fork only the main branch or all branches.

forking-questions

Notes:

  • When forking the repository you may be asked to install GitHub Desktop App. This is a convenient way to do it, so follow those instructions.
  • Forking only the main branch is sufficient
  • Make sure that if you work in a lab you chose the lab's organization as the owner

2. Clone your fork

Now that you have a fork in you lab's Github org, you want to clone that fork into your local computer to start making few changes.

In Github, expand the Code dropdown and select Open with GitHub Desktop

image

In addition to the location to save your clone, you will also be asked how you'll be using this fork. Select, for my own purposes and then Continue

image
  1. If your fork is out of sync, you can syn it following these instructions

3. Create a Firebase project

To create a project, first visit the firebase console - https://console.firebase.google.com. Look for the + icon

image

Fill up the details and continue with prompts. (Google Analytics can be disabled)

image
  1. Install the Firebase Command Line Tools . Instructions here

4. Make a new branch to host your Firebase details

In Github Desktop App, select Branch -> New. Type your lab name, and select to start it from main

image

You can then publish your new branch and open your code on VSCode

image

5. Add your Firebase specific environment variables

At this point you will need to add a new file (or use an existing one if there is already a file with your lab's name). You will need to fill-in the environment variables needed for deployment in a env/.env.firebase-<lab> file. If there is not a file for your lab in the .env folder, then make a copy of env/.env.firebase-lncc, replace lncc in the filename with your lab's name, and change the variables inside for your firebase project.

To find the Firebase details for your project, follow the instructions detailed here

Caution: The filename pattern is important, make sure it's called .env.firebase-<yourlab>, where <yourlab> is appropriately substituted

6. Check/Update project-id

The correct project-id is needed inside the .firebaserc and .github/workflows/firebase-hosting-merge.yml

7. Commit and push your changes and publish branch

If these operations aren't very familiar to you, please use the GitHub Desktop App as it will set up the correct branches in the remote to track for you in an intuitive way.

Note: You should not merge this branch to main branch. In the future, you will be bringing changes from the main branch to your branch and this is where you'll work and deploy from.

As a reference, your commits should be very similar to these

8. Use Firebase CLI to create a service account

Follow these instructions if you need to download/install the Firebase Command Line Tools With the terminal open in your branch, type

firebase login

Then type:

firebase init hosting:github

You may need to grant Firebase access to your Github organization or user. Read instructions in the command prompts carefully. Follw all questions, these may look as follows:

For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) brown-ccv/task
-effort

✔  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_TASK_EFFORT_CCV. 
i  You can manage your secrets at https://github.com/brown-ccv/task-effort/settings/secrets. 

? Set up the workflow to run a build script before every deploy? (y/N) No
? GitHub workflow file for PR previews exists. Overwrite? firebase-hosting-pull-request.yml No
? Set up automatic deployment to your site's live channel when a PR is merged? No

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App: 
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i  Action required: Push any new workflow file(s) to your repo 

i  Writing configuration info to firebase.json... 
i  Writing project information to .firebaserc... 

Although we didn't generate new workflows, this process created a service account as a secret in your github project that will be used for deployment. To confirm, in GitHub visit Settings -> Secrets

9. Update Service Account name in you deployment action

  • Note the name of your service account printed after the first question, in this example it was FIREBASE_SERVICE_ACCOUNT_TASK_EFFORT_CCV.
  • Update the file .github/workflows/firebase-hosting-merge.yml around line 48 to match your service account name.
  • Commit and push. Your changes should look similar to these

9. Deploy (a test first)

Go to the actions tab and enable them

image

Select firebase-deploy-merge-demand, and run workflow. Make sure to apply following changes

  • Choose your lab's branch.
  • Type suffix for your lab's environment file
  • Choose qa channel.

In our case the dialog looks as follows

image

11. Confirm behavior of QA deployment

If deployment works, your action will get a green check mark image

You can click on your action and explore your logs. Under the action-deploy-host step and look for the temporary url. Visit that url and confirm the behavior of your task

image

12. Deploy to production (a.k.a live channel)

Once you have confirmed that your task is working as expected, you can re-run the firebase-deploy-merge-demand action but this time deploy to the "live" channel

image