To deploy our application to Firebase Hosting, we need to use the Firebase-CLI. The CLI will help with the process of packing the files and sending them to the Google Cloud server.

In this recipe, we will learn how to configure the Firebase-CLI to deploy your application to the web using your local terminal.

The prerequisites for this recipe are as follows:

• A Google account
• A Vue project
• A Firebase project
• Node.js 12+

The Node.js global objects that are required are as follows:

• @vue/cli
• @vue/cli-service-global
• firebase-tools

To install firebase-tools, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install -g firebase-tools

In this recipe, we will learn how to set up the Firebase-CLI on our project, and how to initialize it with our project created during the previous recipe:

1. Open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command on the root folder of your project:

> firebase login

2. The Firebase-CLI will open a browser window so you can log in to your Google account, and give access on the part of the Firebase-CLI to your Google Account. (If the browser doesn't open automatically, a link will appear on the Firebase-CLI, copy the link, and then paste it into your browser to continue.)
3. Open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command on the root folder of your project:

> firebase init

4. Now we are initializing the configuration process of the CLI with our project. For the first question of the CLI, we are going to use just the Hosting feature, so we need to select just Hosting:

? Which Firebase CLI features do you want to set up 
    for this folder? 
  Press space to select feature, then Enter to confirm 
    your choices. 
   Database: Deploy Firebase Realtime Database Rules
   Firestore: Deploy rules and create indexes for Firestore
   Functions: Configure and deploy Cloud Functions
❯  Hosting: Configure and deploy Firebase Hosting sites
   Storage: Deploy Cloud Storage security rules
   Emulators: Set up local emulators for Firebase features

5. Then, the CLI will ask which Firebase project we want to use. In our case, we created the project earlier in the previous recipe, so we will select Use an existing project:

? Use an existing project 
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

6. Now a list of available projects on your account will appear. Select the one you want to use to deploy with this application:

? Select a default Firebase project for this directory: (Use arrow 
   keys)
❯ vue-3-cookbook-firebase-18921 (Vue 3 Cookbook Firebase)

7. The CLI will ask about the public directory of the application, or in our case, because it's a single-page application, we need to use the build destination folder. Type the name of the destination folder, in our case it's dist:

? What do you want to use as your project public directory? dist

8. Finally, the last step in the process is to select whether we want to use the configuration as a single-page application. Type y to enable rewrites of all the URLs to index.html so we can use the history mode of vue-router:

? Configure as a single-page app (rewrite all urls to /index.html)? 
  (y/N) y

9. Open the package.json file on the root directory of your project, and add a new script to automate the build and deployment process:

"scripts": {
  "deploy": "npm run build && firebase deploy",
  ...
},

10. Open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command on the root folder of your project:

> npm run deploy

Now your project is deployed and available on the web, and the CLI will give you the links to access it:

In this recipe, we learned how to configure the Firebase CLI and to deploy our application.

First, we installed the Firebase-CLI and signed in to the Google authentication platform. Then, we were able to initialize the CLI in our project folder.

In the process, we selected the project we created in the previous recipe and pointed the building folder to the corrected one on a Vue-CLI project.

Then, we configured that we want to use a single-page application router structure, and added a deployment script to package.json. Finally, we were able to deploy our application and make it available to everyone.

Find out more information about Firebase Hosting at https://firebase.google.com/docs/hosting.