Deployment/Hosting of Vue.js app using Firebase

Wants to deploy or host your application LIVE? And you don’t know about the DevOps Engineering? Don’t worry! You can deploy or host your app’s live just in 10 mins using Firebase.

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices.

Firebase Hosting is production-grade web content hosting for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network). You can also pair Firebase Hosting with Cloud Functions or Cloud Run to build and host microservices on Firebase.
Reference: https://firebase.google.com/docs/hosting

This is the continuity of my previous article “Vue.js Meets Firebase: How to Develop an Application Without Writing the Backend?” that is published in Better Programming. The purpose of this blog is to host our application LIVE! The outcome of this column is to deploy our application using Firebase. The reader will have the experimental knowledge how the application can deploy, and it goes live.

This article can be used to host any application framework either it’s on Angular, Vue or React to Firebase. Here, I am using my application that I develop in my last blog. So, it’s Vue.js app.

Reference: Vue.js Meets Firebase: How to Develop an Application Without Writing the Backend?

If a project is created with Vue CLI, it is considered as complex project because it has a lot of configuration files, components etc. The first step is to optimize our project before deployment. The ‘build’ command automatically optimize the code and later use these files for deployment.

You can check your ‘package.json’ file which have ‘scripts’ JSON object consisting of serve, build and lint keywords. Up till now, we are using the ‘serve’ command to run the project. To execute the ‘build’, the build script is used.

Build the project

Open the terminal and make sure you are in project directory. Run the below command. After successfully build the project, you get the output on console as shown in figure-1.

$ npm run build

Figure-1: Console output of build command

Once the build process completes, it will create a ‘dist’ folder which consist of HTML file, CSS and JS folder. This folder contains the optimize/minimum code that our browser can understand for our application. Don’t change anything inside the ‘dist’ folder.

Setting-up Firebase

1. Open the Firebase on the browser, ‘https://console.firebase.google.com’.
2. Click on the ‘Hosting’ option from the left side of the panel under ‘Develop’ as shown in figure-2.

Figure-2: Develop panel in Firebase

It opens the view illustrate in figure-3. Click on the button ‘Get started’.

Figure-3: Initial hosting view

Hosting the application on Firebase can be done in three steps:

1. Install Firebase CLI:
Run the below command. This command will install the Firebase tool globally on your system, and later we use this tool to upload our project.

npm install -g firebase-tools

2. Initialize your project:
The initialization step requires further two steps as,

a. Sign in to Google: Run the below command, it will redirect you to browser to take the access permission that Firebase uses your Google account.

firebase login

b. Initiate your project: Once authentication is successfully done with Google account, run the below command to initialize the Firebase.

firebase init

It will ask the couple of questions like which service you want to use. Select the Hosting as shown in figure-4.

Figure-4: Select the hosting from firebase CLI

The next question is related to project. Select existing project as shown in figure-5.

Figure-5: Select project option

Then select which project from the Firebase. Please select appropriately as shown in figure-6.

Figure-6: Select project name

The type dist in public directory question, configure as single-page app, don’t require the automatic build and deploy and don’t need top overwrite it as shown in figure-7. And Firebase initialization is complete.

Figure-7: Complete initialization step

3. Deploy to Firebase Hosting:
When you’re ready, deploy your web app. Then, run this command from your app’s root directory:

$ firebase deploy

Once the deployment process completes, it will give you the hosting URL on console as shown in figure-8.

Figure-8: Deployment complete

Copy this hosting URL and open it on browser. Your application is hosted and live on the browser, as illustrated in figure-9.

Figure-9: Live application on internet

Thank you for following the article, and now you have a good knowledge about how to deploy/host the web app’s on Firebase.