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.
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.
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.
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.
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:
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.
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.
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.
Top comments (0)