Building a Progressive Web App with Angular — Part 2
Tags: angular, pwa, webapp, javascript
Published: 2019-05-15 01:45:15

---
title: Building a Progressive Web App with Angular — Part 2
published: true
description: 
tags: angular, pwa, web app, javascript
series: Building a Progressive Web App with Angular
---

This is part 2 of my tutorial on Building a Progressive Web App with Angular. In this tutorial I will explain how to host your web app on Firebase Hosting, and how to notify users when your web app has an update.

If you do not have an account with Firebase you will need to make one. To do this, visit https://firebase.google.com/; click on Sign In and follow the prompts.

If you already have an account, click on **GO TO CONSOLE** and it should take you to the **Welcome to Firebase!** screen. From here you can make a new project or use an existing project.

![](https://thepracticaldev.s3.amazonaws.com/i/wgbhrx9z4mvv05bxt0k4.png)

Open the command line and type the following command.

`npm install -g firebase-tools`

Once completed, you should be able to use the `firebase` command. To connect your local machine to your Firebase account run the following command:

`firebase login`

You should get a few questions on the command prompt and you will be redirected to a Google authentication page where you will need to login and give access.


Now lets initialize our Firebase project.

`firebase init`

You will get a series of question. For the purpose of this tutorial we are only interested in the hosting options, so make sure you select: **( ) Hosting: Configure and deploy Firebase Hosting sites** and press **Enter**.

Next you will be asked if you want to select an existing project or create a new one. Select the one that is appropriate for you. For this tutorial I selected the **Create a new project** option.

On the **Hosting Setup** section you need to specify the output directory. Since we are using Angular CLI the output files will be located in the dist folder once your project is built. Be sure to select **dist** for this option.

![](https://thepracticaldev.s3.amazonaws.com/i/jfc3cosxfqv6l7gpilws.png)

Select **Yes** for single-page app and that is it. Your project is now setup to use Firebase Hosting.

##Let’s do some coding

Open VS Code or your preferred editor.

First let’s change our build directory, open `angular.json` file and change the outputPath to be: `"outputPath": "dist"` The Angular CLI default is `dist/[PROJECTNAME]`, and since we told Firebase CLI that our project will be on the `dist` folder only, we need to make a small change on our `angular.json` file.


![](https://thepracticaldev.s3.amazonaws.com/i/gf5zuwi7eziuyvebwzx6.png)
![](https://thepracticaldev.s3.amazonaws.com/i/nqb9r3yg8lnjwlm2mkuc.png)

Now, let’s build our application and upload to Firebase. Open your command line and type the following command:

`ng build --prod`

Once the application is done, open the **dist** folder you will see your application files there. To upload the app to Firebase we need to run the following command:

`firebase deploy`

The deploy should take a few seconds and you should be able to see what is happening on the command line. Once it’s done you will get a Hosting URL and if you open that URL in your browser you will see the default Angular application.


##Let’s make some changes to our app
We will make some HTML changes so we can display a welcome message and also notify the user that we have changed the website so they know to reload to view the latest version of our site. We will be using Angular Material to display the alter message, so let’s install Angular Material.

`ng add @angular/material`

Once the installation is completed, we need to add MatSnackBarModule to our `app.modules.ts` file.

{% gist https://gist.github.com/enniob/1ce64508007a3214212ae2fbf2ba4672 %}

Now let’s open `app.component.html` file and change the HTML to display our welcome message. For now we will just have a basic welcome message. Delete all the HTML from the file and just enter the following HTML code:

{% gist https://gist.github.com/enniob/d109a235d1f0edea19513c1d559bda3e %}

Open `app.component.ts` and let’s setup our Snackbar to notify the user once there is a change to the website. To do that we need to import MatSnackBar, and SwUpdate to our component.

{% gist https://gist.github.com/enniob/f1312ecf6c68729c520ed47d58fe387a %}

The code in the constructor method will execute when the app loads and it will check to see if there are any updates between the server files and the files cached on the service workers. If they are indeed different, a snackbar will display on the screen and prompt the user to reload the application. So let’s try that now that we imported all the required modules and we added the code to check for updates. Let’s build our application again and upload to Firebase.

`ng build --prod`

Wait a few seconds and open your Firebase project URL in a new tab. The app will load using the files from the service worker cache, and after it’s done checking if files were updated, you will see the snackbar asking the user to reload the page. Click on “Reload” and you should see the updated app.

![](https://thepracticaldev.s3.amazonaws.com/i/9nu7spznz0f7y50fd9or.png)


This completes our tutorial. In the next tutorial I will build a PWA app that will use everything that we learned in part 1 and part 2. If you have any questions, comments or suggestion for any other topic you want to see covered, please let me know.