# Deploying app as PWA

{% hint style="info" %}
This app's UI isn't designed as a PWA, but you can always make UI changes and deploy it as a PWA as well. Following info is useful just in case you want to change and deploy it as PWA
{% endhint %}

## Prepare Firebase project for PWA <a href="#prepare-firebase-project-for-pwa" id="prepare-firebase-project-for-pwa"></a>

Detailed explanation of Firebase integration in [our tutorial here](https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58)​‌

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 <a href="#convert-the-app-into-a-pwa" id="convert-the-app-into-a-pwa"></a>

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/). While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this.‌‌

To add this package to the app run:

```
$ 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
```

Whenever you make any changes to the app, make sure you run `ionic build --prod` before deploying it again on the hosting.‌‌

This will deploy your app on a Firebase url such as [https://spotifyapp.firebaseapp.com/](https://ionic4fullapp.firebaseapp.com/) where you will see your app running perfectly.‌‌

The Firebase console will show the deployment like this​‌

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LqBqAw4qSMckDjeSSDw%2F-LqGO_Gi1JCkLUT9J3xO%2F-LqGkeRYaieDMbZfynXg%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LaBUcdHsV67l_Rxh8qA_-LaBZKt8KEbI0MDth19i_Screen%20Shot%202019-03-17%20at%2010.21.58%20PM.png?alt=media\&token=2cbb0e66-38c9-4216-ae25-e5cd10ca9a17)

For a more detailed step-by-step guide on PWA deployment, [check this blog​](https://enappd.com/blog/pwa-features-in-ionic-4/102/)​‌

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.‌‌

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