Photo by Prateek Katyal from Pexels
I always forget how to deploy SPA applications like Vue or React in firebase hosting the process is easy so I decided finally to make a tutorial for whom that will need it and for me.
What is gonna be cover in this tutorial?
- Setup the firebase Hosting Project
- Installing the Firebase CLI
- Configuring your local project with environment variables
- Initialize Firebase Project using Firebase CLI Tools
- Deploy your application
Setup the firebase Hosting Project
We have two ways to make the setup. It can be using the web site or the firebase-cli
Step 1 - Register
First, we need to register our project in firebase
Step 2 - Install Firebase CLI
npm install -g firebase-tool
Step 3 - Log in with Firebase client
So the browser will open to enable you to select your Google account. Once you complete the authentication process the following webpage will be displayed.
Configuring your local project with environment variables
First, if you already have your project you only need to add the files:
the content the file is:
VUE_APP_FIREBASE_API_KEY='' VUE_APP_FIREBASE_DOMAIN='' VUE_APP_FIREBASE_DB_URL='' VUE_APP_FIREBASE_PROJECT_ID='' VUE_APP_FIREBASE_STORAGE_BUCKET='' VUE_APP_FIREBASE_MESSAGING_SENDER_ID='' VUE_APP_FIREBASE_API_ID='' VUE_APP_FIREBASE_MEASUREMENT_ID=''
Of course, every file you can fill with correct value depends on the environment.
Note that all variables that start with
VUE_APP_will be statically embedded into the client bundle with
Initialize Firebase Project using Firebase CLI Tools
We now initialize the firebase project with Firebase-CLI tools in our local project app directory executing the following command.
- Step 1 We choose Hosting
- Step 2 The next step we asked if we won't use the existing project or make a new project from the console, for this tutorial we choose: use and existing project.
The next step is where the application deploys the site, the default settings for vuejs the deploy folder is
distwhen firebase-cli ask about
public directorywe answer writing
Note: If later we want to change where is output our
distwe only updated the file
Deploy your application
So, finally the deploy we only need to execute two commands to build our Vue project and deploy:
npm run build && firebase deploy
And we expect the next output:
Top comments (0)