Book Image

Vue.js 2 and Bootstrap 4 Web Development

Book Image

Vue.js 2 and Bootstrap 4 Web Development

Overview of this book

In this book, we will build a full stack web application right from scratch up to its deployment. We will start by building a small introduction application and then proceed to the creation of a fully functional, dynamic responsive web application called ProFitOro. In this application, we will build a Pomodoro timer combined with office workouts. Besides the Pomodoro timer and ProFitOro workouts will enable authentication and collaborative content management. We will explore topics such as Vue reactive data binding, reusable components, routing, and Vuex store along with its state, actions, mutations, and getters. We will create Vue applications using both webpack and Nuxt.js templates while exploring cool hot Nuxt.js features such as code splitting and server-side rendering. We will use Jest to test this application, and we will even revive some trigonometry from our secondary school! While developing the app, you will go through the new grid system of Bootstrap 4 along with Vue.js’ directives. We will connect Vuex store to the Firebase real-time database, data storage, and authentication APIs and use this data later inside the application’s reactive components. Finally, we will quickly deploy our application using the Firebase hosting mechanism.
Table of Contents (19 chapters)
Vue.js 2 and Bootstrap 4 Web Development
About the Author
About the Reviewer
Customer Feedback

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:


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 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": [

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!