DEV Community

Cover image for Deploying Vue.js App To Firebase Hosting in a minute
Raja Tamil
Raja Tamil

Posted on • Originally published at softauthor.com

Deploying Vue.js App To Firebase Hosting in a minute

Create a Vue Project

Go ahead and create a brand new vue project if you haven’t already done so. Once the project is created, the folder structure will look like this:

alt text

Build The App

Once you’re ready to deploy… the first step is to build the app.

To build it, CD to your project on the Terminal and run.



npm run build 


Enter fullscreen mode Exit fullscreen mode

This will create a dist folder inside your project that has index.html and the static folder that may have css folder, js folder etc.

alt text

Initialize Firebase

Install Firebase CLI.



npm install -g firebase-tools


Enter fullscreen mode Exit fullscreen mode

Then, run the login command.



firebase login 


Enter fullscreen mode Exit fullscreen mode

Once you’re logged in to firebase with the URL that was provided on the Terminal, initialize Firebase.



firebase init


Enter fullscreen mode Exit fullscreen mode

It will ask a series of questions:

Which Firebase CLI features do you want to set up for this folder?hosting: Configure and deploy Firebase Hosting sites

Please select an option: Use an existing project (I would choose this option if I have a firebase project already created)

Select a default Firebase project for this directory 😕 → dist

Firebase defaults the project directory to public but our project build is in the dist folder. So, change to dist folder instead of public.

Configure as a single-page app (rewrite all urls to /index.html)?Yes (as it’s a single page app however all of the routes would work as expected).

RecommendedHow to create a route in vue.js

File dist/index.html already exists. Overwrite?No (so that Firebase does not overwrite with default index.html file).

Then, you will get the ✔ Firebase initialization complete! message.

Finally, run it.



firebase deploy


Enter fullscreen mode Exit fullscreen mode

This will give a hosting URL where you can see the vue app live. 🙂

Top comments (0)