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
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
- Open the Firebase on the browser, ‘https://console.firebase.google.com’.
- Click on the ‘Hosting’ option from the left side of the panel under ‘Develop’ as shown in figure-2.
It opens the view illustrate in figure-3. Click on the button ‘Get started’.
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.
The next question is related to project. Select existing project as shown in figure-5.
Then select which project from the Firebase. Please select appropriately as shown in figure-6.
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.
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.
Copy this hosting URL and open it on browser. Your application is hosted and live on the browser, as illustrated in figure-9.
Thank you for following the article, and now you have a good knowledge about how to deploy/host the web app’s on Firebase.