How to Deploy Vue.js Applications with Firebase Hosting
Whether you’re deploying static sites, simple app landing page or a complex progressive web app (PWA), Firebase Hosting provides you with the tools, features and the infrastructure tailored to deploy and manage your websites and apps.
What we’ll cover in this quick tutorial?
· Setup the Firebase Hosting Project
· Configuring your Local Project
· Installing the Firebase CLI
· Deploy your application
Setup the Firebase Hosting Project
To set up a firebase hosting project, head over to their official site and click on “GO TO CONSOLE” link within the end of the main navigation menu.
Next, login with your google account or register for a new one if you don’t have it. Once the authentication process is completed, you’ll be redirected to the Firebase Console welcome page.
Now, add a new project by clicking on the “Add project” box as shown in the image below:
This post contains an affiliate link, meaning, at no additional cost to you, if you click through and make a purchase, I may receive a commission.
You can name your project whatever you want to. In my case I’m going to name it vue-news-app. Once you do that, hit the “Create project” button.
The whole point from this section is getting the “Project ID” and uses it in the configuration part.
Now, from the left side menu select Project Overview -> Project Settings to get the id of your project.
Just save your project id somewhere within a text file, and I will tell when to implement it in your local application.
Now we’re done we the Firebase console interface, the next step is configuring our vue.js application for the deployment process.
Installing the Firebase CLI
Now, open you command prompt and install the Firebase CLI via npm:
npm install -g firebase-tools
This installs the firebase command globally, which we’ll make use of to deploy your Vue Application to Firebase Hosting.
Add to Chrome — Honey it’s a free chrome extension that finds you the Internet’s best discount codes.
Configuring your Vue Project
To configure your project you first need to build it for the production mode. To do that, within your project root folder run the following command:
npm run build
This will create a dist folder with everything you need to deploy.
Next, you’ll need to point Firebase to the dist folder. That’s why we’re going to need two configuration files to do just that.
In your code editor open your Vue project. And within the root folder create a new file called .firebaserc with the following content:
It’s the time to use your project id. Just replace the “your-firebase-project-id” with your project id value.
Again! From the root folder of your project, let’s create another configuration file called firebase.json, and then add the following content to it:
Great! Now that you’ve finished the configuration part, let’s take a quick look on the project structure to make sure everything is setup, before jumping to the section you’ve been waiting for, the deployment.
Deploying your Application
To deploy your application, you need first to connect your local machine to your Firebase account and obtain access to your Firebase projects. To do so, run:
Once you successfully logged in, the following success message you’ll be displayed.
Now, from the root of your project directory, run the following command to deploy your application:
This command deploys the dist folder content to your Firebase project that you’ve created earlier. Now if you visit https://your-firebase-project-id.firebaseapp.com, you should see the desired site live on a HTTPS server.
In my case, it’s going to be https://vue-news-app.firebaseapp.com.
Remember, if you’re looking to deploy your future builds, just run the following command:
npm run build && firebase deploy
And it’ll take care of both, building and deploying.