Skip to content

Deploy with Firebase

Jump to bottom
Hannah edited this page Dec 22, 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 you 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. Unless you really want Google Analytics, untoggle "Enable Google Analytics for this project".
  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"
  6. Add additional features, if needed; a CDN link will get you setup quickly. There are other options, such as using Node to install them.

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
    • Enable options with the space bar.
      • Choose to deploy from public.
      • Choose to setup hosting, since we didn't do this when creating the app.
    • Finish your selections with Enter. This will generate new files in your repository.
  7. If you are using emulators for hosting, then you can start the preview with firebase emulators:start
  8. Alternatively, you can use the firebase serve command.
  9. Deploy your app to Firebase. firebase deploy

Easy Continuous Integration with Firebase

During the firebase init session, you will have the option to choose whether you want to auto-deploy on merge to the main branch and/or on pull request. As long as you want your app to visible live from the web, you should do it! Get your feet wet with CI!

This initiation step will setup two workflow documents in a /.github folder, which are in YAML format.

You can specify build steps which run automatically with a GitHub Action; this is a great time to auto-transpile your ES6.

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

If you also need to build LESS or SASS, you can add them to your build command.

jobs:
    build_and_preview:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - run: npm run i && 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

Additional Links

Clone this wiki locally