Deploy Vue 2 App to Firebase Hosting

In this tutorial, we are going to explain step by step how to deploy Vue js application on Free Firebase Hosting using Firebase console.

In the previous tutorial, we learnt how to build a CRUD web application with Vue and Firebase.

Git Clone Vue Firebase App Example

We will git clone the Vue + Firebase web application into our local development system.

git clone https://github.com/SinghDigamber/vue-firebase-crud-app.git

Get inside the project directory.

cd vue-firebase-crud-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

Run command to install the required packages.

npm install

You can skip this step, if you want to deploy your own Vue.js application.

Create Vue App Production Build

Type the command while staying in the vue-firebase-crud-app project folder to make the static build of your Vue.js and Cloud Firestore application.

npm run build

The above command has created a `dist` folder in your Vue.js app.

Get inside the dist folder.

cd dist

Install Firebase CLI

Next, we have to install the Firebase CLI (command-line tool). It allows us to safely and swiftly host our Vue app with Firebase Hosting.

npm install -g firebase-tools

Create Firebase Project

To deploy the Firebase App, we must have a Firebase Project created inside the Firebase Admin dashboard.

In the previous tutorial, we learned how to create a Firebase project inside the Firebase Admin. If you have already created the project, then skip this step.

Login Firebase CLI

Let us login to the Firebase console using Firebase command-line tool that we have already installed in the earlier step.

firebase login

A new browser window will open, here you have to select the Email ID from which you created the Firebase project.

This window will appear on the successful Firebase CLI login.

Initialize Firebase + Vue Project

Next, Use the following command to initialize the Firebase for our Vue.js application.

firebase init

Then, select from the following Firebase CLI features list. What features do you want to set up for this folder?

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########
You're about to initialize a Firebase project in this directory:
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your
 choices. 
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

Press Space to select features, then Enter to confirm your choices.

Now, we have to associate the Firebase project directory. We selected “Use an existing project”; however, you can choose other options depends on your requirements.

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 

Answer the questions accordingly.

# What do you want to use as your public directory? . 
# Configure as a single-page app (rewrite all urls to /index.html)? Yes
# File ./index.html already exists. Overwrite? No

Deploying your Application

Finally, we have to run the command to deploy Vue.js application in Firebase.

firebase deploy

You can check your app on the following url that you see on your terminal window.

✔  Deploy complete!
Hosting URL: https://fir-vueapp-22b1a.web.app

Summary

We have completed the Firebase Deployment tutorial, and now you have the basic understanding of deploying the Vue.js project on Firebase Hosting.