---
description: Steps to follow for running your apps on browser, device or deploy as PWA.
---

# Running the App (Web Browser)

_**These steps are common to all 3 apps in this platform. You will be redirected to this section again, if you skip this initially.**_

### Install the app dependencies

After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in `package.json` file in the root of the project.&#x20;

To do this  :

Open your favourite code editor and open the app folder which is **ION-4-TAXI-USR-FB-ionic5** in this case. It should show the following files.&#x20;

![](https://833912930-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKtay1j36CbfXCRwWg%2F-M5CU5IVbZd-TsHWqJpc%2F-M5CV7WAPIhNsgc0_hQw%2FScreenshot%202020-04-17%20at%206.59.01%20PM.png?alt=media\&token=abc7c91c-e2b9-483b-a6f1-71f1699b0e9c)

Now open a terminal and make sure that your folder name is shown at the terminal to ensure that you are running the following commands inside your ionic app folder path.

Run the following command

```
ION-4-TAXI-USR-FB-ionic5 $ npm install
```

The screen with the **npm install** running at the VS Code terminal is shown below.

![](https://833912930-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKtay1j36CbfXCRwWg%2F-M5CU5IVbZd-TsHWqJpc%2F-M5CVe0WZxezypmVHgXz%2FScreenshot%202020-04-17%20at%206.59.32%20PM.png?alt=media\&token=b5e17739-591e-425e-88fc-4a05c657e2ab)

If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as `high` , please contact us regarding the same.

###

### Run the app on Browser

Make sure you have the [initial setup](initial-setup) done, before you try to run your app.&#x20;

First we'll run the app in development environment.&#x20;

In development environment, your app runs in a browser (of your choice).&#x20;

It is recommended to make all changes and development while running the app on browser . Running on device while developing will be too time consuming.

After completing the above step we will run the app on browser, run the following command

```
ION-4-TAXI-USR-FB-ionic5 $ ionic serve
```

The screen with the "ionic serve" running at the VS Code terminal is shown below.

![](https://833912930-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKtay1j36CbfXCRwWg%2F-M5CVuDzWb3SeF0oEBrM%2F-M5CW6V9MsJmsYN3vx79%2FScreenshot%202020-04-17%20at%207.00.21%20PM.png?alt=media\&token=ea00a5dc-101d-441e-a0da-fb53610c9b26)

Make sure that your folder name is shown at the terminal to ensure that you are running the following commands inside your ionic app folder path.

This will build the project and deploy it on a `localhost` url (usually it is `localhost:8100`).

The initial deploy process will take some time when it creates "chunks" of code pieces. Once you see `compiled successfully` , you are good to go.&#x20;

After successfully running the app, your browser window will open automatically and load the app in a full screen view, as shown below.&#x20;

![](https://833912930-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKtay1j36CbfXCRwWg%2F-M5CVuDzWb3SeF0oEBrM%2F-M5CWOPg4lrBg8lzHkpD%2FScreenshot%202020-04-17%20at%207.01.31%20PM.png?alt=media\&token=66d252e4-c2e8-4d54-b6d6-b6dc1a51afa0)

To change the app to a device view, right click anywhere on the browser and choose `Inspect Element`and choose device mode.

The screen running the app in **device** **mode** is shown below.

![](https://833912930-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKtay1j36CbfXCRwWg%2F-M5CVuDzWb3SeF0oEBrM%2F-M5CX51OFJxez9EaDm0s%2FScreenshot%202020-04-17%20at%207.02.47%20PM.png?alt=media\&token=1e6e0231-d419-458e-9c9c-c64d0b874e72)

{% hint style="success" %}
If you are running both User and Driver apps together on same browser to test booking flow, make sure you run them in separate windows, and clear stored cache before trying to login. Otherwise User Firebase credential can login the Driver app, and vice versa. This can confuse the apps between roles.
{% endhint %}

More about browser development tools can be found out in following links

* [Chrome Dev Tools](https://developers.google.com/web/tools/chrome-devtools/device-mode/)
* [Firefox Dev Tools](https://developer.mozilla.org/en-US/docs/Tools)

## Next steps

For Complete Integration of These App checkout the Section  [Taxi Booking Complete Setup](../how-to-use-this-starter/taxi-booking-complete-demo).\
