How to quickly deploy your Progressive Web Apps using Firebase
How to quickly deploy your Progressive Web Apps using Firebase. 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 deploy services with automatic HTTPS over certified domains, well deploying PWA’s didn’t seem something to do on the fly. HawksCode is a Software Company that have team of professionals that can help in building web apps with firebase.
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.
You might have a PWA ready for production deploy, 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.
In order to quickly deploy any PWA, what you need first is to install the firbase-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.
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 create 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.
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, answer based on your 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:
nd open the browser at the address that will be displayed in the terminal after the deployment process is finished. If you have changes to deploy, for the next time after updating your folder with ready to deploy project, you just have to give the command firebase deploy.
I hope you like this blog, How to quickly deploy your Progressive Web Apps using Firebase. To learn more visit Easyshiksha.