Running the App (Web Browser)
Steps to follow for running your apps on browser, device or deploy as PWA.
Last updated
Steps to follow for running your apps on browser, device or deploy as PWA.
Last updated
These steps are common to all 3 apps in this platform. You will be redirected to this section again, if you skip this initially.
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.
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.
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
The screen with the npm install running at the VS Code terminal is shown below.
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.
Make sure you have the initial setup done, before you try to run your app.
First we'll run the app in development environment.
In development environment, your app runs in a browser (of your choice).
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
The screen with the "ionic serve" running at the VS Code terminal is shown below.
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.
After successfully running the app, your browser window will open automatically and load the app in a full screen view, as shown below.
To change the app to a device view, right click anywhere on the browser and choose Inspect Elementand choose device mode.
The screen running the app in device mode is shown below.
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.
More about browser development tools can be found out in following links
For Complete Integration of These App checkout the Section Taxi Booking Complete Setup.
