How to quickly deploy your Progressive Web Apps using Firebase

One of the key features of a Progressive Web App(PWA) is:

Progressive Web Apps must be served from a secure origin.

This means the PWA application will only work on a server that is encrypted (using the HTTPS protocol). Well, I was so excited when I started building my very first Progressive web apps and wanted to test them on production and share them right away but I must say, this important feature discouraged me a bit. Whether you have already a certified domain, or you have to go through all the steps for setting it up ( getting, activating and installing the certificate), or you use to deploy services with automatic HTTPS over certified domains, well deploying PWA’s didn’t seem something to do on the fly.

But then I discovered actually there is a quick way to run a PWA application on a domain that is HTTPS-certified, thanks to Firebase Hosting. And here is how you can do it.

Getting started

You might have a PWA ready for production deployment, but if not you can clone the following simple ready-to-deploy PWA from the following repository of a simple web page with a cherry image and simple text.

Here is the repository and you can read the Juna Salviati’s great article explaining how to develop a minimal PWA.

In order to quickly deploy any PWA, what you need first is to install the firebase-tools package, and to do so run the following command on your terminal

npm install -g firebase-tools

After installing the firebase-tools you will then need to sign in to the Firebase service using the login and password of your Google account. To do so type the following command in your terminal:

firebase login

Once done with the authentication you will have the following success message on your browser:

Now let’s create your Firebase project where to deploy the PWA. To do so go to firebase console and if you are not authenticated use your Google account to login to the console where you are going to add a new project.

Give your project a name and click Create Project. Memorize the name of the project you just created. I called it ‘MyAwsomePWA’, as shown in the picture above.

Now reach from your terminal to the parent folder where you have saved the ready-to-deploy PWA folder. In case you cloned from the repository above and you have other stuff in the parent folder, then I strongly recommend you put the cloned folder in a new folder and rename the folder with the cloned content to dist or whatever easy folder name you want to give.

Then type in the command:

firebase init hosting

to initialize the project, which will be deposited on Firebase Hosting. From the menu that will appear to you in the terminal, select the Firebase application name, the one you just created on the Firebase web console which in my case I called ‘MyAwsomePWA’. Then the console will ask you a few questions, and answer based on the structure of a PWA you are deploying.

In our case, let’s say you have named the cloned repo folder to dist, here are the answers to type on the terminal:

• What do you want to use as your public directory? → dist
• Configure as a single-page app (rewrite all URLs to /index.html)? → y
• File dist/index.html already exists. Overwrite? → No

After initializing the application we have nothing else left to do but to send it to the Firebase servers. To do so, run the following command from the root folder of your project ready to deploy:

firebase deploy

and open the browser at the address that will be displayed in the terminal after the deployment process is finished and bingo!!! 🎉. If you have changes to deploy, the next time after updating your folder with ready to deploy the project, you just have to give the command firebase deploy.

As simple as that !!!!

Now you should be able to visit the Firebase hosted app anywhere: on your computer, on your phone, or on your tablet. You can share the URL and add it to your home screen on your mobile!!!! Isn’t this cool?

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.