Deploy Vue.js 3 App to Firebase Hosting in Less Than 5 Minutes
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
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.