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 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
  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. Steps as of December 22.
    • Which Firebase CLI features do you want to set up?
      • I will choose "Hosting" and "Emulators".
    • First, let's associate this project directory with a Firebase project
      • I will choose "Use an existing project", since we already made a project.
      • Select the web app name that you created before.
    • What do you want to use as your public directory?
      • Press enter to accept the default: public.
    • Configure as a single-page app?
      • I will choose y.
    • Set up automatic builds and deploys with GitHub?
      • I will choose y.
    • File public/index.html already exists. Overwrite?
      • I will choose n.
    • 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
    • Set up the workflow to run a build script before every deploy?
      • Select Yes.
    • What script should be run before every deploy?
      • Press Enter to select the default: npm ci && npm run build
    • Set up automatic deployment to your site's live channel when a PR is merged?
      • Press Enter. You can always delete the workflow later from the .github folder.
    • What is the name of the GitHub branch associated with your site's live channel?
      • main is the default.
    • Which Firebase emulators...?
      • I will only choose "Hosting Emulator" with the space bar, then press Enter.
    • For the next 4 questions, press Enter to accept the defaults.
  9. This setup will generate new files in your repository: firebase.json and .firebaserc. It will also generate two YAML files under the .github folders.
  10. If you are using emulators for hosting, then you can start the preview with firebase emulators:start
  11. Alternatively, you can use the firebase serve command.
  12. 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. If you've never tried CI, then this is an opportunity to 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-compile your ES6.

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, then runs the build command specified in the package.json file.

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