Create Build and Deploy Vue Js App to Firebase Hosting

You have built a brand new vue js application using the Firebase but don’t know how to create a build and deploy the vue js app to Firebase hosting?

Well, If you want to know the steps involved in deploying a vue js app to firebase hosting, then this quick step by step vue firebase tutorial is for you.

Firebase provides numerous solutions under one roof if you are looking for blazingly fast and secure hosting no matter what your content is? Be it dynamic, static and microservices, but one thing is for sure Firebase is a gold mine for you.

Firebase offers production-grade web hosting for modern days developers without getting into various tantrums; you can deploy your web app with just a couple of commands.

Not just that, but you can also pair Firebase Hosting with Cloud Functions or Cloud Run to build and host microservices on Firebase.

Create Vue Js Build and Deploy to Firebase Hosting Example

  • Step 1: Download Vue Application
  • Step 2: Make Vue Js App Build
  • Step 3: Invoke Firebase CLI
  • Step 4: Access Firebase CLI
  • Step 5: Deploy Vue App to Firebase Hosting

Download Vue Application

If you already created an app, then jump on to the next step. But if your answer is no, follow the given instruction to manifest a new vue app on your system.

We will install a brand new vue application, create the build and host it on the Firebase hosting.

npm install -g @vue/cli

vue create tiny-vue-project

cd tiny-vue-project

Make Vue Js App Build

Next, we will create the build of the vue project; ideally, npm run build is a standard command available through command-line-interface mainly run your scripts.

npm run build

After executing, npm run build command, we can see an arbitrary new folder generated by the name of `dist`. It is fundamentally an accumulation of your project, which will be deployed to firebase.

vue js build

After you generated the vue build, use the cd your project name command to enter into your project’s dist folder.

cd dist

Set Up Firebase CLI

Accessing Firebase CLI is our next task; in order to deploy vue to Firebase, we need to install firebase-tools package globally on our system.

npm install -g firebase-tools

Access Firebase CLI

We are all set to take the next step; with the help of firebase cli, we need to log-in to the firebase console; here is the command that needs to be executed.

firebase login

After invoking the above command, an authentication popup window will appear in front of you; use your firebase project’s registered email to login to Firebase.

Deploy Vue App to Firebase Hosting

Subsequently, we will execute the provided command; this command will connect the directory to a Firebase project.

Note: In your local project directory, you can also set up Cloud Functions or Cloud Run for your dynamic content and microservices.

firebase init

There after, you require to answer to firebase cli regarding the project deployment, and the questions are:

Which Firebase features do you want to set up for this directory?
=> Hosting: Configure and deploy Firebase Hosting sites

Please select an option:
=> Use an existing project (Select this option; if you have already created the firebase project, otherwise choose “Create a new project.”)

However, If anyhow you face the following error:

Failed to list Firebase projects. See firebase-debug.log for more info

Recklessly, execute the given command and re-authenticate to firebase console.

firebase login --reauth

There after …

Select a default Firebase project for this directory:
Set dist instead of public

Configure as a single-page app (rewrite all urls to /index.html)?
Yes

Set up automatic builds and deploys with GitHub?
Your choice (Yes/No)

Configure as a single-page app (rewrite all urls to /index.html)?
Yes

Here is the output you will receive on the terminal screen, after above process was done properly.

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

After following all the instructions, its time to deploy vue to divine firebase hosting, here is the command you need:

firebase deploy

After the vue app is correctly deployed to firebase, you will get the Deploy complete! Message on the firebase cli screen along with Hosting and Project console URLs.

Conclusion

In this quick guide, we took the pragmatic approach to understand how to build the vue js app and, most importantly, how to deploy the vue app to firebase hosting. Also, we got familiar with all the necessary methods for deploying a vue firebase app to firebase hosting.

We hope our intensive efforts significantly help you in your learning endeavours and will surely help you hosting your vue app.