Deploying a web application to Firebase Hosting

by Rob — 7 minutes

You might know Firebase as a Realtime Database database for mobile and web. Firebase evolved over time and offers additional features like Firebase Hosting. Firebase Hosting allows you to easily host a static website or application using the excellent Firebase and Google infrastructure.

In this series we’ll describe how to get the most out of hosting your website or application using Firebase.

This post will cover how to host a static website on Firebase Hosting using a sample project.

Additional posts in this series will touch:

  • Leveraging multiple deployment environments using aliases, in this case test, staging and production.
  • Optimizing performance based on hashing and Cache-Control headers.
  • Additional configuration options like rewrites, redirects and clean urls.
  • Automated deployments to Firebase Hosting using a CI Pipeline, in this case Bitbucket CI.

The example project including all code and configuration is available at Bitbucket: https://bitbucket.org/divotion/firebase-hosting-example

Creating the Vue example project

You can push any folder containing static files to Firebase Hosting. If you have a project that has to be build first you can specify that the folder containing the result should be uploaded (in our case the dist folder). To illustrate the later we’ll create a simple Vue app using Vue CLI.

First we generate a new project named example-project using the Vue CLI create command.

npx @vue/cli@3.11.0 create project --default example-project

Note: npx is used here so we don’t have to install the Vue CLI because we only run it once.

expected output:

🎉  Successfully created project example-project.
👉  Get started with the following commands:

 cd example-project
 npm run serve

Let’s be brave and run the commands suggested:

cd example-project
npm run serve

expected output:

  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Use your browser to access the url mentioned and verify that everything is working as expected.

Screenshot of a new Vue project running in the browser

After that run the suggested build command to generate the files that should be hosted using Firebase.

npm run build

expected output:

  File                                 Size               Gzipped

  dist/js/chunk-vendors.e503fe7c.js    82.98 KiB          29.99 KiB
  dist/js/app.12166131.js              4.64 KiB           1.66 KiB
  dist/css/app.e2713bb0.css            0.33 KiB           0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Getting started with Firebase Hosting

Create a Firebase project

To be able to deploy a site to Firebase we have to create a project. Follow the steps below to quickly create a project:

  • Click Create Project or Add Project if you already have other projects.
  • Specify the name of the project and add the -production postfix, for example example-project-production.
  • Click Next.
  • For now we disable the usage of Google Analytics and click Create Project.

More documentation can be found here: https://firebase.google.com/docs/web/setup#create-project

Installing Firebase CLI

Deploying to Firebase is done using the Firebase CLI included in the firebase-tools npm package. Let’s add it to our project as a development dependency:

npm install --save-dev firebase-tools@7.4.0

Verify that it has been installed in your local node_modules folder by running the following command:

npx firebase --version

expected output:

7.4.0

Note: The Firebase documentation suggests to install the Firebase CLI globally. We choose to install it as a development dependency within our project and run it using npx from the projects node_modules folder. This allows us to use a different version of the CLI for each project and we make sure our build server will use the version provided within the project.

Commit the changes in our package.json and package-lock.json file to git using the commands below:

git add package-lock.json package.json
git commit -m "Added firebase-tooling"

Initializing our project

First authenticate your Firebase CLI using the same Google account that you used to create the Firebase project. Run the following command and follow the instructions:

npx firebase login

After successful authentication run the following command to list the current firebase projects, the project created earlier should show up:

npx firebase projects:list

expected output:

┌────────────────────────────┬────────────────────────────┬──────────────────────┐
│ Project Display Name       │ Project ID                 │ Resource Location ID │
├────────────────────────────┼────────────────────────────┼──────────────────────┤
│ example-project-production │ example-project-production │ [Not specified]      │
└────────────────────────────┴────────────────────────────┴──────────────────────┘

Now it’s time to initialize the local project. Execute the following command from the root of your Vue project folder (example-project):

npx firebase init

Complete the wizard while providing the following answers:

  • Which Firebase CLI features do you want to set up for this folder?
  • Select Hosting
  • Project Setup
  • Select Use an existing project
  • Select a default Firebase project for this directory:
  • Specify the name of the project you created earlier
example - project - production;
  • What do you want to use as your public directory? (public)
  • Specify dist
  • Configure as a single-page app (rewrite all urls to /index.html)?
  • Specify N
  • File dist/index.html already exists. Overwrite? (y/N)
  • Specify N

Your project while be initialized and the firebase configuration will be generated within the following files:

  • firebase.json
  • .firebaserc

Add both files to git using the commands below:

git add .firebaserc firebase.json
git commit -m "Initialized Firebase"

Note: We intentionally add the .firebaserc to git because it contains important information about our project.

Running the project on your local machine

To verify our Firebase Hosting configuration we can run the project on our local machine using the following command:

npx firebase serve --only hosting

expected output:

i  hosting: Serving hosting files from: dist
✔  hosting: Local server: http://localhost:5000

Use your browser to access the url mentioned and verify that everything is working as expected.

Deploying to Firebase hosting from your local machine

Our final solution includes deployment using a CI Pipeline but at this moment we should be able to deploy our application manually using the Firebase CLI by running the command below:

npx firebase deploy --only hosting

expected output:

```bash === Deploying to 'example-project-production'...

i deploying hosting i hosting[example-project-production]: beginning deploy... i hosting[example-project-production]: found 8 files in dist ✔ hosting[example-project-production]: file upload complete i hosting[example-project-production]: finalizing version... ✔ hosting[example-project-production]: version finalized i hosting[example-project-production]: releasing new version... ✔ hosting[example-project-production]: release complete

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/example-project-production/overview Hosting URL: https://example-project-production.firebaseapp.com ```

Use your browser to access the Hosting URL and verify that everything is working as expected.

Advanced Firebase Hosting Features

In our next blog post we’ll show more advanced Firebase Hosting features.

More to come

You can expected one more blog post to show you how to deploy from a CI Pipeline using Bitbucket CI.

Please make sure to follow @divotion_nl on Twitter and don’t miss the next blog post (in this series).

Additional information

Versions used

  • Node 6.10.2
  • Firebase tools 7.4.0
  • Vue 3.11.0

meerdivotion

Cases

Blogs

Event