Deploying to Firebase

Author: Anna Morawska

-

Deploying to Firebase

At this point, we have a small, good-looking application. But to be honest - it is not very useful. It's just a frontend - we are not able to store new appointments and new data won't persist if you refresh the page. The app is also available only on our local environment.

Certainly, we need some backend solution, but on the other hand we are here to learn about PWA concepts, not to bother about servers, API or datastores.

In this tutorial, we are going to use a firebase platform, a solution provided by Google. It allows us to keep our backend code as simple as possible and focus on what really matters in building progressive web apps.

In order to take advantage of the benefits provided by Firebase - we need to set up a new project there. To do this, open the following address in your web browser.

Firebase console

After logging in to the Firebase service, you need to create a new 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.

Now, we need to install firebase-tools globally on our machine to be able to use firebase commands. Open the command-line/ terminal and type:


      npm install -g firebase-tools
    

After that, let's sign in to the Firebase service using the login and password of the Google account:


      firebase login
    

Next, we need to initialize our app as a Firebase project. In the project root directory run:


      firebase init
    
Firebase CLI

The console will ask you a few questions - answer them according to the guide below:

  • Which Firebase CLI features do you want to setup for this folder? For now, select just firebase hosting. We will configure other features latter.
  • Select a default Firebase project for this directory Choose the project you have just created on the Firebase platform
  • What do you want to use as your public directory? - build - it's where our production code lives
  • Configure as a single-page app (rewrite all urls to /index.html)? (y/N) - y
  • File build/index.html already exists. Overwrite? (y/N) - n

Firebase will create two files with configuration and project information. firebase.json and .firebaserc. If you want to change any settings you defined during the initialization process, check them out.

Before we deploy our application to the firebase servers, we will prepare an npm script which will save us some keystrokes in the future. Add following npm script in your package.json file:


      ...
      "scripts": {
        "deploy": "npm run build && firebase deploy",
        ...
    

From now on, if we want to deploy a new version of our application, we just need to run this script.

It fires the build process which prepares a production version of our application and then sends it to the Firebase Hosting service. Now, we have nothing else left to do but to publish our app.


        npm run deploy
      

And that's it! Your first 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!

Add new event preview

Something doesn't work for you? Check the code for this lesson on our repository


Rate this lesson

Previous lesson Next lesson

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

About the author