# Web app setup

How to run the Readymade Grocery Web app

![](https://3572121219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQFsNoDheBHqvtH8b92%2F-MQG9FWAy4AcvoqQvJYT%2F-MQG9cXU4LTEdSJsRslz%2Fimage.png?alt=media\&token=6fbab227-2b35-4775-85c8-86c1f55eb165)

In Above Screenshot you can find the grocery-cms-dashboard folder, open the folder to run the CMS dashboard.

## ADD CREDENTIAL TO PROJECT <a href="#add-credential-to-project" id="add-credential-to-project"></a>

Inside the project folder, there will be a folder called **src**. Once you navigate to the **src** folder you will see a folder called **environments** where the application's **api\_keys** and the server connection URL is stored.![](https://gblobscdn.gitbook.com/assets%2F-M5WxZmimXAJIlsmznFC%2F-MO51KxtLI_nrm2N3npa%2F-MO51Wg_ODRM77-LcJOC%2F6%20\(1\).png?alt=media\&token=ba21d506-b398-4c90-808f-c5118a268942)![](https://gblobscdn.gitbook.com/assets%2F-M5WxZmimXAJIlsmznFC%2F-MO51KxtLI_nrm2N3npa%2F-MO51cFy7Sq1cQ-SEyc9%2F7%20\(1\).png?alt=media\&token=c18fdc03-f1ff-4577-b07d-f937e8298025)

Generally, for every application, there will be two environments i.e Development and Production. Similarly, **environments** folder will have three files to store development, testing and production environment configurations. environment.ts contains the development environment configuration, environment.test.ts contains testing environment configuration environment.prod.ts contains the production environment configuration.

UPDATE API URL TO CMS DASHBOARD. You need to change the value of the API endpoint in the file

`src/environments/environment.ts`

`apiEndPoint:` the value must be your deployed API URL.

Open the Terminal and navigate to the project folder`grocery-cms--dashboard`and install NodeJS dependencies. Please make sure you have node, npm, and [angular-cli](https://cli.angular.io/) installed before running the below command:

```
$ npm install
```

Once the packages get installed you may run the application by running the command below and you can see the app is running on your browser.

```
$ ng serve
```

## PRODUCTION RELEASE <a href="#production-release" id="production-release"></a>

You need to change the value of API endpoint in file src/environments/environment.prod.ts To build an app for production:

```
$ ng build --prod
```

The above command will create a dist directory that you can deploy on any Hosting. If there is any issue please google it or if you don't find any solution please feel free to report us, we will look into it.[<br>](https://docs.ionicfirebaseapp.com/online-grocery-shopping-and-delivery-system/website/web-app-installation)