/ Angular

Guide to creating a PWA with Firebase and Angular 6

We already talked about creating a PWA with Firebase in the previous article, we will now look at how to build it from scratch, understanding the different elements and how to build it in just a few clicks with Skaffolder.

If you want to skip the basics and see how to build your PWA in a few seconds click here.

Install the dependencies

You will have to have installed on your PC a version of NodeJS >= 8.9+, to check the version installed on your computer you can execute this command :

node -v

Then install Angular-cli with the following command:

npm install -g @angular/cli

If it is already installed you can verify that the version is at least Angular-cli 6 or higher with the command:

ng version

Create a new Angular project
Let's create a new project with angular-cli executing the command:

ng new pwa-app

We'll then have a project with the following structure:

Schermata-2018-11-29-alle-11.51.44

We'll now install the dependencies of the project with

npm i

Let's start the app with

npm start

Now we can visit http://localhost:4200 to see the app we just created.

Schermata-2018-11-29-alle-11.51.03

Turning the app into a PWA
We can now convert our app into a PWA with the command

ng add @angular/pwa

As a result, angular-cli will add various files to make the PWA run

Schermata-2018-11-29-alle-12.03.34

To enable the service worker, you'll have to execute the build indicating that it is a production build with the command:

ng build --prod

We can execute this build with a lite npm server, that needs to be installed with the command

npm i -g http-server

At this point, we can start the server by executing in the folder dist/pwa-app the command

cd dist/pwa-app
http-server -o

We can find what we created so far in http://localhost:8080

Test the PWA

To verify that our PWA was set out correctly, let's open Google Chrome's console and click on the tap "Application", from the menu "Service Worker".
We'll see that the service worker is activated if there is a green dot like in the image.

Schermata-2018-11-29-alle-12.05.10

By switching off the http server and updating the browser page, our application will still be up and running.

We successfully created a PWA!




It's time to add Firebase




Firebase is Google's as-a-service backend, it allows us to use a persistent database that works also when offline. When a new connection is available, it will automatically update the changes made with the database server.

This is exactly what is missing from our app to become a real PWA.

Set up our account

The first step is to set up our account.

Let's create a Firebase project by opening the Firebase console with our Google account at the following URL:
https://console.firebase.google.com

Click on "add project" and create a new one.

Schermata-2018-11-29-alle-12.22.30

By clicking on the code icon highlighted in the image

Schermata-2018-11-29-alle-12.19.52-copia

We'll get the codes that we'll need afterward to connect our app to the Firebase project.

Schermata-2018-11-29-alle-12.20.00

Now we can create the database, by opening the "Database" menu on the left and clicking on "Create new database" and selecting "Start in Test mode" as seen in the image.

Schermata-2018-11-29-alle-12.20.29

We successfully configurated our Firebase account and created our database.
Schermata-2018-11-29-alle-12.20.52

Let's finally code!
Install Firestore in our Angular project executing:

npm install firebase @angular/fire --save

In the file src/environments/environment.ts add the credentials of the Firebase project that we saved previously:

Schermata-2018-11-29-alle-12.40.32

In the file src/app.module.ts let's add the Angular modules needed for Firebase to work, meaning AngularFireModule and AngularFirestoreModule, as said in the lines 10, 11, 21 e 22.
Let's also add FormsModule that we'll need afterwards as said in the lines 3 and 19.

Schermata-2018-11-29-alle-12.57.26

We are ready now to execute some basic queries.

Add a document in the DB

To begin, we define our data model,in the TestModel interface creating the file src/app/test-model.ts

Schermata-2018-11-29-alle-13.53.30

Add a simple HTML form in the file src/app/app.component.html

Schermata-2018-11-29-alle-13.54.14

Finally, create the functionsave() in the file src/app/app.component.ts

Schermata-2018-11-29-alle-14.01.07

In this file, we have imported the dependence AngularFirestore in the constructor and linked this.testModelCollection to the collection of our database.

In the function save() with the instructionthis.testModelCollection.add(this.item); save the item in the database and in the following line empty out the object of the item.

Documents lists from the DB

In the file src/app/app.component.html add the print of an Observable of array using a *ngFor and the pipe async

Schermata-2018-11-29-alle-14.10.33

In the controller add the list in the function ngOnInit

Schermata-2018-11-29-alle-14.10.41

We joined together testModelCollection with the variable list, through the function snapshotChanges that will update in real time the list for every change made on the database, even from other users.

Schermata-2018-11-29-alle-14.20.09

Security on Firebase

With Firebase it's possible to manage the Google authentication in a few simple lines.

First, we need to configure our Firebase account.

In the Firebase console, select Authentication in the tab Sign-in method.

On this page enable the required authentication method, in this case "Google".

Schermata-2018-11-29-alle-14.29.42

Add to the application the module AngularFireAuthModule in the app.module.ts

Schermata-2018-11-29-alle-14.48.56

Now add a button to the HTML view to call the login function in the file src/app/app.component.html.

Schermata-2018-11-29-alle-14.46.51

Add the same function to the component src/app/app.component.ts

Schermata-2018-11-29-alle-14.47.15

The login() function exploits the AngularFireAuth module that is able to open Google SSO aunthentication pop-ups and to return the authenticated user.

CRUD application made in a few clicks

The application that we just created is very basic, for educational purposes.
Now that we know the basics, let's look at how to get the code of a fully working application in a few clicks.

Install Skaffolder-cli with the command

npm install -g skaffolder-cli

This utility allows us to create applications quickly.

Execute the access with the command

sk login

If you don't have an account, you can register for free at this address https://app.skaffolder.com/#!/register

Now we can create a project executing the following command in the folder we want to create the project in

sk new

Give your project a name and select Angular 6 - PWA - Firebase as frontend and NONE as backend.

Schermata-2018-11-29-alle-15.12.11-copia

Skaffolder-cli has now generated all the files needed for your application to work.

The only thing we need to do is add to the files src/environments/environment.ts and src/environments/environment.prod.ts the properties of our Firebase project like we did previously.

We can execute the application with

npm i
npm start

The app will open automatically on
http://localhost:4200

Let's now add a data model and create a CRUD function for adding a list, editing it and deleting it. We do this with the command:

sk add model

Name the model and add an attribute, answer YES to the request to create the CRUD interfaces like in the image
Schermata-2018-11-29-alle-15.32.18

On http://localhost:4200 we now have a working PWA CRUD, with the security managedn with Firebase and the possibility to manage all data with Firebase.

Start creating your PWA with Skaffolder now


The result:

Schermata-2018-11-29-alle-15.41.09

Schermata-2018-11-29-alle-15.42.45

Start creating your PWA with Skaffolder now