Author: Damian Gemza
Deploying the application on Firebase
The PWA application will only work on a server that is encrypted (using the HTTPS protocol). The quickest way to run a PWA application on a domain that is HTTPS-certified is to deploy applications on Firebase Hosting.
To do this, you have to install the firebase-tools package. Execute the command below in your application terminal.
npm install -g firebase-tools
After installing the firebase-tools we will then need to sign in to the Firebase
service using the login and password of your Google account, and deploy the application on the
Firebase Hosting service. To do this, type in the command
firebase login in your terminal.
After logging in to Firebase, type in the command
firebase init hosting to
project, which will be deposited on Firebase Hosting. Then, from the menu that will appear to you in the
select the Firebase application we created two steps above. Then the console will ask you a few questions — answer
them according to the diagram below:
firebase init hosting
- 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? — n
After initializing the application we have nothing else left to do but to send it to
the Firebase servers. But first, we have to build a production version of our application.
To do this, run the command below in the terminal of your application.
npm run pwa
The last step after initiating the Firebase application is to then deploy it on the Firebase Hosting service. To do this, type in the command below in the terminal of your PWA application, and open the browser at the address that will display the terminal after the deployment process is finished.
And that's it! Your first PWA application is already on the Firebase servers, so you can pick up your mobile phone and open your favorite web browser at the address of the application. When you add it to your smartphone's home screen, you can launch it at any time — even without an active Internet connection via the icon. Isn't this a great option?
Previous lesson Download Next lesson
Spread the word:
Note: We can help you build your project.