Deploying your application

Well, now that we have a fully working application in our hands, it's time to make it public. In order to do this, we will deploy it to Firebase.

Start by installing Firebase tools:

npm install -g firebase-tools

Now, you have to tell your Firebase tools that you are actually a Firebase user who has an account. For this, you have to log in using Firebase tools. Run the following command:

firebase login

Follow the instructions to log in.

Now, you must initialize Firebase in your application. From the application root, call the following:

firebaseinit

You will be asked some questions. Select the third option for the first question:

Select the Hosting option for the first question

Select the PleaseIntroduceYourself project from the list of projects to associate to the application.

Initialization is over. Check whether the file called firebase.json has been created in the project's folder. This file can contain an innumerous number of configurations. Check out the official Firebase documentation in this regard at https://firebase.google.com/docs/hosting/full-config. For us, the very basic indication of the public directory to be deployed would be enough. The directory where vue-cli builds the production-ready assets is called dist; therefore, we will want the content of this directory to be deployed. So, add the following line of code to your firebase.json file:

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Do not forget to save your firebase.json file. Let's now build and deploy our application. Sounds like a big devops task, right? It's not really huge. Run npm build and then firebase deploy:

npm run build
firebase deploy

How difficult is it? After the successful deployment, Firebase will output the URL of your project. Now, you can start playing with it and send it to your friends. It's probably not the most beautiful URL in the world, right? Maybe you would like to connect it to your domain? Of course, it is possible!