Deployment and Hosting

Nowadays, there are plenty of hosting possibilities to choose from, and all are almost equivalent in terms of performance and services offered.

Therefore, we are free to choose the provider we prefer, but in this lesson, we will use the Firebase platform to host our application. Since we used Cloud Firestore for its offline persistence capabilities in a previous demo, using Firebase hosting is a natural choice.
This is not a rule, however. We can still use Cloud Firestore as NoSQL DB but host our application in Azure or Netlify, for instance. The decision is ours.

Firebase hosting

Firebase hosting is a web content hosting offered by the Firebase platform. It has many interesting advantages and, thanks to its CLI, setting up and deploying projects are extremely quick and easy.

Firebase hosting provides great features, not only for static web content, but also for more complex and dynamic apps:

• Secure: SSL is provided for the hosted data out of the box. We do not have to purchase a certificate. Our web app will be delivered through HTTPs protocol, according to Google’s goal to have an overall secure web.

• Fast: The deployed files are cached on SSDs at CDN edges in different locations. This means that the closest CDN location will deliver the data to our clients, ensuring that our content is delivered fast.

• Easy to deploy: Thanks to the Firebase CLI, we can simply setup our local project with basic Firebase parameters and deploy it to the cloud with one command. Moreover, through the Firebase console, we can get a set of important details about the downloads or the in-/outbound traffic from our application.
  If we find an error in the latest release, we can also rollout a previous version with a mouse click.

Setup Firebase

Below we describe all the needed packages and commands to deploy your application to Firebase step by step.

Create a Firebase project

First of all, we need to create a new Firebase project, which can be seen as a root container for web or mobile (iOS/Android) applications.
Once we create a project, we can choose to insert all the services that are compatible with our application. Considering our PWA, we might be interested in adding Google Analytics, Cloud Firestore, and eventually performance monitoring. Toggling features are very easy within the Firebase platform, as Firebase provides several SDKs that can be adapted according to our requirements.

Accessing the Firebase console, we can login with a Google account and select “Add new project”:

We need to provide a project name. I chose “Educative PWA.” The name must be unique. In case a project with the same name already exists in Firebase, an alternative one will be suggested.

At this stage, we can edit the Project ID, which is reported just under the input field where we entered the project name.

If we are satisfied with the given name, and it is unique, we don’t have to change anything, but keep in mind that we cannot change this parameter once the project is created.

We can opt to enable analytics or not. Analytics are a prerequisite for other services. Therefore, we might prefer to have analytics enabled if we plan to use features like Crashlytics or A/B Testing.

That’s it! Our Firebase project will be created for us. After the project is ready, we can explore its dashboard, where we can have full control over settings, billing, and available features: