In this tutorial, you’ll learn how to deploy your app to a free Vue.js hosting on Firebase.
1. Create a production build
First of all, you should have a production/public build of your Vue.js app. It’s usually created by running the following command:
npm run build
It will create a public build in a new folder, usually public/ or dist/. Make sure it exists before proceeding to the next step.
2. Install Firebase CLI
To host your site with Firebase Hosting, you need the Firebase CLI (a command-line tool). Run the following npm command to install or update to the latest CLI version.
npm install -g firebase-tools
3. Create a new Firebase project
Log in to your Firebase admin panel and create a new project.
4. Log in to Firebase using CLI
Now you need to log in to Firebase using previously installed command-line tool. Run the command below and follow the instructions:
5. Initialise/sync your Vue.js app
Run the command below and select ‘hosting’ as a sync method and choose your Firebase project from the list.
This command will generate two config files: .firebaserc and firebase.json.
6. Deploy Vue.js app to Firebase
The last step is deploying the app to Firebase. Run the command below to deploy your app.
The command above will transfer your public/ or dist/ folder to Firebase hosting and create a new build on Firebase.
If you find this post useful, please let me know in the comments below and subscribe to my newsletter.
Want to share this with your friends?
PS: Make sure you check other Vue.js tutorials, e.g. how to password protect your website in Vue.js, how to install Google Analytics tracking code in Vue.js.