From 937b37ebb38f465fccbe3900e29c02e2bf868d13 Mon Sep 17 00:00:00 2001
From: Ravi Patel <ravi60353@gmail.com>
Date: Wed, 8 Jan 2025 13:39:46 +0530
Subject: [PATCH] feat: Setup App Panel Frontend for Local API Development
 (#357)

* feat: proxy setup for live and mock data

* fix: proxy removed
---
 CONTRIBUTING.md       | 33 +++++++++++++++++++++++++++++----
 frontend/package.json |  2 +-
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 175facf1b..3c9c9743e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -81,6 +81,8 @@ core migrations only, you can create and run app specific migrations as describe
 
 ## Contributing to Zango frontend
 
+### with mock server
+
 1. Go to the frontend directory of the repository and install the dependencies
 
 ```bash
@@ -94,8 +96,32 @@ core migrations only, you can create and run app specific migrations as describe
     yarn mock
 ```
 
-3. Generating and Using frontend build in Zango
-   To test your frontend app with the Zango framework, follow these steps:
+### with live data
+
+#### Prerequisite
+
+Before running this application, ensure that your Zango backend is up and running.
+
+#### Default Port Configuration
+
+By default, the application uses Zango's default running port `(localhost:8000)`. If you wish to use a different port, you can easily configure this in your package.json file under the proxy key.
+
+1. Go to the frontend directory of the repository and install the dependencies
+
+```bash
+    cd frontend
+    yarn install
+```
+
+2. Start the application with dev server
+
+```bash
+    yarn dev
+```
+
+### Generating and Using frontend build in Zango
+
+To test your frontend app with the Zango framework, follow these steps:
 
 Run the build command:
 
@@ -105,8 +131,7 @@ Run the build command:
 
 This command generates the build and places it inside the `backend/src/zango/assets/app_panel/js` directory of Zango.
 
-The generated build will include the latest timestamp in its filename (`build.<timestamp>.min.js`). By default, the most recent build will be served. If you need to use a different build, you can update the filename in the ``backend/src/zango/apps/shared/tenancy/templates/app_panel.html`` file.
-
+The generated build will include the latest timestamp in its filename (`build.<timestamp>.min.js`). By default, the most recent build will be served. If you need to use a different build, you can update the filename in the `backend/src/zango/apps/shared/tenancy/templates/app_panel.html` file.
 
 4. Collecting Static Build for Your Project
 
diff --git a/frontend/package.json b/frontend/package.json
index 42d11e740..1e7806d9c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,7 +42,7 @@
 		"yup": "^0.32.11"
 	},
 	"scripts": {
-		"start": "react-scripts start",
+		"dev": "react-scripts start",
 		"mock": "REACT_APP_MSW_MOCK_API=true react-scripts start",
 		"build": "node generate-build.js && npm run build:react && npm run build:bundle",
 		"build:react": "react-scripts build",