# Deploying app as PWA

## Prepare Firebase project for PWA

To deploy the app as PWA , we will demonstrate using Firebase hosting. 

First create a project on [Firebase](https://firebase.google.com/). 

Now, in your project directory, run 

```
$ npm install -g firebase-tools
```

This will install Firebase tools in your project. Now login into Firebase using

```
$ firebase login
```

It will redirect you to browser, and authenticate using your google account. Once you are logged in, you can run this command to attach the code to your project.

```
$ firebase init
```

It will take you through a list of options for project setup. 

This will create a `firebase.json` file which should look like the following

```
{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

```

## Convert the app into a PWA

The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). It's possible to add both of these to an app manually. 

To add this package to the app run:

```bash
$ ng add @angular/pwa
```

Finally, build your project into production using

```
$ ionic build --prod
```

This will create a production build of your ionic app for PWA deployment. Use Firebase to deploy the app using

```
$ firebase deploy --only hosting
```

{% hint style="info" %}
Whenever you make any changes to the app, make sure you run `ionic build --prod` before deploying it again on the hosting. 
{% endhint %}

This will deploy your app on a Firebase url such as <https://ionic4fullapp.firebaseapp.com/> where you will see your app running perfectly.

The Firebase console will show the deployment like this

![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LaBUcdHsV67l_Rxh8qA%2F-LaBZKt8KEbI0MDth19i%2FScreen%20Shot%202019-03-17%20at%2010.21.58%20PM.png?alt=media\&token=671848e5-ee7e-4191-b204-738d570bea72)

For a more detailed step-by-step guide on PWA deployment, check [this blog](https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58)

{% hint style="info" %}
When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers and features like Geolocation etc.
{% endhint %}

For more information on PWA related option in `firebase.json` , check [here](https://firebase.google.com/docs/hosting/full-config#section-full-firebasejson)