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:
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.
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
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.
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.
By clicking on the code icon highlighted in the image
We'll get the codes that we'll need afterward to connect our app to the Firebase project.
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.
We successfully configurated our Firebase account and created our database.
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:
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.
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
Add a simple HTML form in the file src/app/app.component.html
Finally, create the functionsave() in the file src/app/app.component.ts
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
In the controller add the list in the function ngOnInit
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.
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".
Add to the application the module AngularFireAuthModule in the app.module.ts
Now add a button to the HTML view to call the login function in the file src/app/app.component.html.
Add the same function to the component src/app/app.component.ts
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.
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
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:
