Deploying Vue.js App To Firebase Hosting in a minute
1. 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:
2. 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
js folder etc.
3. Initialize Firebase
Create A Firebase Project from Firebase Console.
Install Firebase CLI.
npm install -g firebase-tools
Then, run the login command.
Once you’re logged in to firebase with the URL that was provided on the Terminal, initialize Firebase.
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.
This will give a hosting URL where you can see the vue app live. 🙂