Create a Simple VueJs Progressive Web Apps (PWA) and Deploy to Firebase

In this tutorial, we are going to create a simple VueJs PWA application and also show you how to deploy it to firebase. As we know that PWA is being more famous these days due to its very fast performance and can be used for different platforms with a single code base as well as the offline functionality and caching support.

1. Install Vue CLI

If you haven't installed the Vue CLI, open the command prompt or terminal and run the following command to install it globally. 

- For npm package manager:

npm install -g @vue/cli

- For yarn package manager:

yarn global add @vue/cli

2. create a VueJs PWA project:

vue create vue-pwa

Now, select the manual option

Select Progressive Web App (PWA) Support option from the list. As you need to go to that option using the down arrow on the keyboard and hit the spacebar to select that option. Also select the other option if you are going to use them like Router, Vuex, etc.

Now, go to the project directory and run the application.

cd vue-pwa
yarn serve

Vue CLI created a sample demo application for us so, we are using the same for this tutorial. If you look into the Application tab by doing the inspect element of the above running project, there you can see the Service Workers. The main heart of the PWA is this service worker. As if we run the PWA application locally the service worker will not work, as it required an HTTPS secure connection.

 

The service worker is the script that will run in the background separately from the application which helps to install, activate, caching of our application. There are more thing about service worker, will discuss in the future article.

So how we can test the PWA application. As we can use some third-party services as well as we can simply deploy to firebase.

3. How to test our PWA application locally:

- Build the application in production mode:

yarn build

This will create the deployment-ready dist folder.

First, run this locally using http-server package. In order to do the show first install it globally.

npm install http-server -g

Now, run the dist folder:

http-server dist/

Which will run the application. Now what we need to do is tunnel our local server with HTTPS. Please follow this Tunnel local server to the public internet with HTTPS using Ngrok. This will tunnel our local server over HTTPS. Now open the tunneled URL. You can see the service worker as follows.

Also, you can see the + icon to install your PWA app in the browser.

If you run the same tunneled URL on the mobile then you will get the following screen to install your PWA application.

Add vue-pwa to Home screen if you click this, it will add the application to the home screen so that you can later open it by simply clicking it.

4. Deploy to firebase.

Now, let's deploy the build dist folder in the firebase server.

- Go to the firebase console "https://console.firebase.google.com/"

- Create a project by giving the project name.

- Installing firebase in our system.

 Open the command prompt or terminal and install firebase globally.

npm install -g firebase-tools

Initialize the project: Make sure to go to the project directory.

firebase login

This will ask for a google login. You can authenticate the google account where your firebase console project is created. If you want to logout use the following command.

firebase logout

Now, initialize the project:

firebase init

This will ask a couple of question make sure you insert the right as below:

We are simply using it for hosting our application so chose the same option.

Make sure the above setting. The public directory will be dist in our case, as we are deploying the dist folder.

This will create two files in our project:

- .firebaserc

where you can find the project's configuration. Make sure you have the same project name in the "default" section to that create on the firebase console. While deploying it, will use the same firebase console project created. In my case, it is "vue-pwa-7ed80". The config file looks like below.

{
  "projects": {
    "default": "vue-pwa-7ed80"
  }
}

- firebase.json

where all the hosting configuration is done. The config file looks like below.

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Deploy our application.

First, build the application:

yarn build

Now, deploy the build dist folder

 

firebase deploy

This will deploy our application to the firebase server. You can see the deployment history and track from the console under the Hosting section inside the firebase console.

Firebase gives the live HTTPS URL which you can see in the firebase console. If you run that URL you will see the service worker will register and can be run the application as a PWA application.

Finally, we created a simple VueJs application with PWA support and successfully deployed it to the firebase.