How to deploy Vue.js + Firebase

Jesús R. Méndez — Wed, 19 Aug 2020 02:02:24 +0000

Photo by Prateek Katyal from Pexels

I always forget how to deploy SPA applications like Vue or React in firebase hosting the process is easy so I decided finally to make a tutorial for whom that will need it and for me.

What is gonna be cover in this tutorial?

Setup the firebase Hosting Project
Installing the Firebase CLI
Configuring your local project with environment variables
Initialize Firebase Project using Firebase CLI Tools
Deploy your application

Setup the firebase Hosting Project

We have two ways to make the setup. It can be using the web site or the firebase-cli

Step 1 - Register
First, we need to register our project in firebase

Step 2 - Install Firebase CLI

npm install -g firebase-tool

Step 3 - Log in with Firebase client

firebase login

So the browser will open to enable you to select your Google account. Once you complete the authentication process the following webpage will be displayed.

Configuring your local project with environment variables

First, if you already have your project you only need to add the files:

.env.development
.env.production

the content the file is:

VUE_APP_FIREBASE_API_KEY=''
VUE_APP_FIREBASE_DOMAIN=''
VUE_APP_FIREBASE_DB_URL=''
VUE_APP_FIREBASE_PROJECT_ID=''
VUE_APP_FIREBASE_STORAGE_BUCKET=''
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=''
VUE_APP_FIREBASE_API_ID=''
VUE_APP_FIREBASE_MEASUREMENT_ID=''

Of course, every file you can fill with correct value depends on the environment.

Note that all variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin

Initialize Firebase Project using Firebase CLI Tools

We now initialize the firebase project with Firebase-CLI tools in our local project app directory executing the following command.

firebase init

Step 1 We choose Hosting

Output:

Step 2 The next step we asked if we won't use the existing project or make a new project from the console, for this tutorial we choose: use and existing project.

Step 3 The next step is where the application deploys the site, the default settings for vuejs the deploy folder is dist when firebase-cli ask about public directory we answer writing dist.

Output:

Note: If later we want to change where is output our dist we only updated the file firebase.json

Deploy your application

So, finally the deploy we only need to execute two commands to build our Vue project and deploy:

npm run build && firebase deploy