# Running the App (Web Browser) These steps are common to both the apps in this platform. You will be redirected to this section again, if you skip this initially. {% hint style="success" %} ***Remember to enter your own GOOGLE API KEY in the source code in the place of YOUR\_API\_KEY. Without this api key, many functionalities might not work, especially maps. Check the*** [***docs***](https://enappd.gitbook.io/ionic-grocery-shopping-app-platform/extra/app-specific-requirements) ***for more info*** {% endhint %} ### 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. To do this : Open your favourite code editor and open the app folder which is **ION4-GROC-ADM-FB-IONIC5** in this case. It should show the following files. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LZDFYpdwcfbvdZnK_%2F-M5L_i4lpn7Ii27OAFeJ%2FScreenshot%202020-04-20%20at%2011.54.04%20AM.png?alt=media\&token=ec1db2e7-ae1b-48f7-9d03-5a3561f2e643) 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 ``` ION4-GROC-ADM-FB-IONIC5 $ npm install ``` The screen below shows **npm install** running in the VS Code terminal. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LZDFYpdwcfbvdZnK_%2F-M5L_vKAj4wiXGgGbdrY%2FScreenshot%202020-04-20%20at%2012.07.57%20PM.png?alt=media\&token=7307238e-b856-49a1-a9a5-93fa8d1b96d9) 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](https://app.gitbook.com/@enappd/s/ionic-4-grocery-shopping-app-platform/~/drafts/-M5LWsCICWcHUVGOtxeg/setup-and-deployment/initial-dev-environment-setup) and above steps 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. 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. ``` ION4-GROC-ADM-FB-IONIC5 $ ionic serve ``` The screen below shows **ionic serve** running in the VS Code terminal. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LaOcN0JrLSDHE-Sqf%2F-M5LassyYElatMYEP-wp%2FScreenshot%202020-04-20%20at%2012.08.20%20PM.png?alt=media\&token=2d7463e2-7af5-4a6c-9e4c-04cf87054c04) 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. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LaOcN0JrLSDHE-Sqf%2F-M5LbGvPrvb0PsosqR7w%2FScreenshot%202020-04-19%20at%206.39.44%20PM.png?alt=media\&token=c20ab54c-71d3-4090-a08b-cf9c56386fa9) Click on **Products** and check to see that you see a similar **Products** page, as given below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LpFPNuAELK8k8D2cg%2F-M5LuByq9fM9gtqlDsJw%2FScreenshot%202020-04-19%20at%207.26.35%20PM.png?alt=media\&token=ccb2ce99-4fed-4e0b-904a-d99406208f94) Click on **Category** and check to see that you see a similar **Category** page, as given below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LpFPNuAELK8k8D2cg%2F-M5LtroWVBKz8_FGUCEM%2FScreenshot%202020-04-19%20at%207.26.11%20PM.png?alt=media\&token=cc8abc6b-6200-4d9d-a8c7-512b2985f32d) Click on **Order** and check to see that you see a similar **Order** page, as given below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LpFPNuAELK8k8D2cg%2F-M5Lu33sfhqgvz7lldu6%2FScreenshot%202020-04-19%20at%207.27.52%20PM.png?alt=media\&token=ff90c6a6-3290-40b6-b3de-1559df383bb4) Click on **Offer** and check to see that you see a similar **Offer** page, as given below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LpFPNuAELK8k8D2cg%2F-M5LuKOO1pxeaCqAGlUl%2FScreenshot%202020-04-19%20at%207.28.22%20PM.png?alt=media\&token=3d9872af-2bd8-43ed-a6bd-edd23cae6b16) Similarly Click on **Users** and check to see list of **Users**. Click on **Select Themes** and check different themes available, as given below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5LpFPNuAELK8k8D2cg%2F-M5Lv-sK2P2wPUCh0B6m%2FScreenshot%202020-04-19%20at%208.53.43%20PM.png?alt=media\&token=ca8ab86c-94b5-4085-921b-67f60a089d7f) ## Next steps For Complete setup, checkout the Section [Grocery Dashboard And App Complete Setup](https://enappd.gitbook.io/ionic-grocery-shopping-app-platform/how-to-use-this-starter-1/grocery-dashboard-and-app-complete-setup)