Skip to content

Deploy with Firebase

Jump to bottom
Hannah edited this page Dec 23, 2020 · 4 revisions

Deploying vanilla JavaScript with Firebase

Firebase is a Google Backend as a Service (BaaS) provider which makes deploying JavaScript projects easy and free-until-you-get-big.

Shout-out

📹🔥 Thanks to Fireship for providing informative tutorials on YouTube. The Fireship tutorial for Firebase will get you setup not only with static hosting, but also user authentication with Google, a NoSQL database, and database rules.

🔗 ➡️ Go to Fireship tutorial on YouTube ⬅️

However, if you are only interested in hosting static files, then here are the main steps needed for hosting and deployment.

Create a Firebase Project

🔗 Link to the Firebase console

You will need to add Firebase scripts to your HTML document.

  1. Create a new project on the console.
  2. Choose whether you want Google Analytics.
  3. On the "Get started by adding Firebase to your app", select the "Web" button, </>.
  4. Name your app and click "Next".
  5. Copy-paste the "Add Firebase SDK" code into the /public/index.html file "into the bottom of your <body> tag, but before you use any Firebase services"

Command Line Steps

  1. Install firebase-tools globally. npm install -g firebase-tools
  2. Check firebase was installed. firebase --version
  3. Login to your Firebase account. firebase login
  4. You will be redirected to login to your Google account.
  5. Logout of your Firebase account if needed. firebase logout
  6. Initiate a Firebase project in your VSCode workspace. firebase init
  7. You will have to answer a number of questions about your project. Enable specific options with the space bar or press Enter to accept defaults
  8. Some tricky steps:
  9. For which GitHub repository would you like to set up a GitHub workflow?
    • Enter your GitHub repo in username/repo-name format: yourUsername/js-babel-firebase
  10. Set up the workflow to run a build script before every deploy?
    • Select Yes.
  11. What script should be run before every deploy?
    • Press Enter to select the default.
  12. Set up automatic deployment to your site's live channel when a PR is merged?
    • Press Enter. You can always delete the files and repository secret that this step creates.
  13. This setup will generate new files in your repository: firebase.json and .firebaserc. It will also generate two YAML files under the .github folders.
  14. If you are using emulators for hosting, then you can start the preview with firebase emulators:start
  15. Alternatively, you can use the firebase serve command.
  16. Deploy your app to Firebase. firebase deploy

Easy Continuous Integration with Firebase

The Firebase initiation step will have created some new files in your repository.

  1. Workflow documents in a .github folder, which are in YAML format.
  2. A firebase.json file, which rememberes all the options that you selected during firebase init.
  3. A .firebaserc file, which remembers which project ID with which the repository is associated.

Here is an example of how this document will look. Please take note of the default run step: npm ci && npm run build, which first installs node_modules, and then runs the build command specified in the package.json file.

By default, this project will run babel src --out-dir public as the build step.

jobs:
    build_and_preview:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - run: npm ci && npm run build
            - uses: FirebaseExtended/action-hosting-deploy@v0
              with:
                  repoToken: "${{ secrets.GITHUB_TOKEN }}"
                  firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_APP_NAME }}"
                  projectId: app-name
              env:
                  FIREBASE_CLI_PREVIEWS: hostingchannels

Note about npm ci vs npm i:

This command is similar to npm install, except it's meant to be used in automated environments such as test platforms

Source: npmjs.com

If you also need to build LESS or SASS, you can install the dependencies, then add them to your build command in package.json.

Additional Links

Clone this wiki locally