Vue 2 Tutorial- How To Deploy Vue 2 App To Firebase Hosting

In this Vue Js app tutorial, we will get to know how to deploy the Vue js application on Free Firebase Hosting using Firebase Console.

Let’s now see below how to implement it step by step:

Step 1- 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

 

Now, we have to get inside the project directory:

cd vue-firebase-crud-app

 

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 the above error for invoking the app, we have to update the “scripts”: [] array in the 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"
},

 

Now, we need to run the below-given commands to install the required packages:

npm install

 

Step 2- Create Vue App Production Build

Here, we will type the following command while staying in the vue-firebase-crud-app project folder to make the static build of our Vue.js and Cloud Firestore Application:

npm run build

 

After running the above command, we will get a ‘dist’ folder in our Vue.js app:

 

Now, we will get inside the dist folder:

cd dist

 

Step 3- Install Firebase CLI

In this step, we will be installing the Firebase CLI. It allows us to safely and smoothly host our Vue app with Firebase hosting:

npm install -g firebase-tools

 

Step 4- Create Firebase Project

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

(In the next tutorial, we will learn how to create a Firebase Project inside the Firebase Admin).

 

Step 5- Login Firebase CLI

Further, we need to login into the Firebase Console using the Firebase CLI (command-line tool) that we have already installed.

firebase login

 

Then, a new browser window will open where we have to select the Email ID from which we created the Firebase project:

This window will appear on the successful Firebase CLI login:

 

Step 6- Initialize Firebase + Vue Project

Afterward, we will use the following command to initialize the Firebase for our Vue.js application:

firebase init

Then, we need to select from the below Firebase CLI features list. We have to choose which features we 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

 

We will press space to select features, then enter to confirm the choices.

 

Now, we will associate the Firebase project directory. We selected “Use an existing project”; Also, we can choose other options depending on our 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

 

Then, we have to 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

 

Step 7- Deploying Our Application

Finally, we have reached that step where we will run the given command for deploying the Vue.js app in Firebase:

firebase deploy

 

Conclusion

So, friends, we have completed this Vue js guide in which we have learned the Deployment of the Vue.js project on Firebase Hosting.

 

Thanks