Welcome back! We will learn how to automate the deployment of multiple sites to Firebase hosting using in this tutorial. GitHub provides a CI/CD tool that is integrated with their repository. GitHub Action freemium (free for open source) I will be using the Get Started React App project that I have created in to set up a Git repository in GitHub. Part 1 of this tutorial Alternatively, you can refer to if you wish to learn how to use GitLab CI/CD tool. part 2 of this tutorial Firebase Authentication Token An authentication token is required to log in to your Firebase account via GitHub Action. You have to run on your terminal to get one. Please ensure that you have installed the before doing so. A pop up should appear which you have to log in to your account. You should see your token on your terminal once you have login successfully. firebase login:ci Firebase CLI CI/CD Configurations We will be adding the authentication token to the setting in our repository. Secrets allow us to store sensitive information, such as access tokens in our repository. Secrets You will be able to see the Secrets section under in your repository. Click . Settings > Secrets Add a new secret The name will be and the value will be the authentication token. FIREBASE_TOKEN Click once you have completed the form. Add secret You should see the secret appear on the Secrets section. FIREBASE_TOKEN Workflow YAML file To create a GitHub Action Workflow, go to and click on set up this workflow yourself at the top left-hand side of the banner. You will be redirected to a code editor page. Actions Replace the content into code editor with the code below. name: Firebase hosting on: push: branches: [ master, staging ] jobs: deploy: runs-on: ubuntu-latest steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - uses: actions/checkout@v2 - name: Install firebase tools run: | sudo npm install -g firebase-tools firebase use <FIREBASE PROJECT ID> --token $ {{ secrets.FIREBASE_TOKEN }} - name: Build website run: | yarn yarn build - name: Deploy to staging site if: github.ref == 'refs/heads/staging' run: firebase deploy --only hosting:<TARGET NAME> --non-interactive --token ${{ secrets.FIREBASE_TOKEN }} -m "RunID $ Commit SHA $ " {{ github.run_id }} {{ github.sha }} - name: Deploy to production site if: github.ref == 'refs/heads/master' run: firebase deploy --only hosting:<TARGET NAME> --non-interactive --token ${{ secrets.FIREBASE_TOKEN }} -m "RunID $ Commit SHA $ " {{ github.run_id }} {{ github.sha }} - name: Archive build Artifact uses: actions/upload-artifact@master with: path: build Replace placeholder with your Firebase Project ID and the two placeholders to the target name that you have created respectively in <FIREBASE PROJECT ID> <TARGET NAME> part 1 of this tutorial. YAML File Explanation The workflow will be when there are changes (push) to the and branch in the repository. triggered staging master is the only j that is defined in this workflow. The environment of the workflow will be on the . deploy ob latest version of Ubuntu checkout your repository so that the job can access it. actions/checkout@v2 will install firebase-tools globally in the workflow environment. It will use the that you have specified and authenticate using your secret. Install firebase tools <FIREBASE PROJECT ID> FIREBASE_TOKEN The project will be build and deployed to either one of the depending on the branch where the workflow is being triggered. You can learn more about how this works . target name here Finally, it will upload the so that you can download it later. production build artifact Deploy the Workflow Let’s start a commit to push to the file (the code above) to our repository. I will be committing the file directly to the branch. You may choose to create a new branch and then do a to the branch instead. main.yml master pull request master The workflow should start running once you have successfully committed to master branch. You should see a green tick if there are no errors after the workflow is completed. Conclusion Congratulation! You have come to the end of this tutorial. I hope that this is helpful to you. Feel free to check out the repository for this project . here If you spot any errors or have suggestions on how to do this better, please let me know!
![Building A Tezos's Smart Contract Dashboard Using ReactJS, TezBridge and Netlify [A How-To Guide]](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FxIDSZmbOYwcFaYqLMYTkmiRcb5i1-5p532ls.webp?alt=media&token=54a0b529-1fbf-4613-bb2c-2d2cedef6303&auto=format&fit=max&w=3840)
