> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/ionic-taxi-booking-app-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd.gitbook.io/ionic-taxi-booking-app-starter/setup-and-deployment-1/deploying-app-as-pwa.md).

# Deploying app as PWA

Learn how to deploy any of the three apps as PWA on a free Firebase hosting

## Prepare Firebase project for PWA

For 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/). 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:

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

![](https://833912930-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKtay1j36CbfXCRwWg%2F-LqKupNaz_nGdgzsWwuh%2F-LqKw9S19igzWP8mF6PU%2FfirebaseDriver.png?alt=media\&token=b3f4e229-89ff-41ae-8660-1085e0e2a8c0)

The Firebase console will show the deployment like this

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

{% 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)