Deploy PWA on Firebase

Author: Damian Gemza

-

Deploying the application on Firebase

The PWA application will only work on a server that is encrypted (HTTPS protocol). The quickest way to run a PWA application on a domain that is HTTPS-certified is to deploy applications in Firebase Hosting. In order to create a Firebase account, open this page.

After logging in to the Firebase service, you need to create a new application, which will be our PWA application. To do this, click the "Add Project" button and go through the short form in which you will provide the name of your project and some other required information.

After creating a new Firebase application, return to your PWA application terminal, and install the firebase-tools utility by running the following command in it.

            
              npm install -g firebase-tools
            
        

After installing firebase-tools we will have no choice but to then sign in to the Firebase service using the login and password of the Google account, initiate a new Firebase project, and deploy it in the Firebase Hosting service. To do this, type in the command firebase login in your terminal.

            
              firebase login
            
        

After logging in to Firebase, type in the command firebase init hosting to initialize the project, which will be deposited in Firebase Hosting. Then, from the menu that will appear to you in the terminal, select the Firebase application 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 deploy it in 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.

            
              firebase deploy
            
          

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 Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Damian Gemza
Damian is a front-end developer. He is passionate about everything related to the world of Web Development. He is interested in the subject matter of Angular and everything that is connected with it. He knows and uses the Ionic framework and Progressive Web Apps technology. Recently he has started to write tutorials related to the Web Development.