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:
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
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.
Initialize Firebase
Install Firebase CLI.
npm install -g firebase-tools
Then, run the login command.
firebase login
Once you’re logged in to firebase with the URL that was provided on the Terminal, initialize Firebase.
firebase init
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).
Recommended → How 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
This will give a hosting URL where you can see the vue app live. 🙂
Top comments (0)