From 9133af4c3263b647be9841a1bb3fd3984e43a0fd Mon Sep 17 00:00:00 2001
From: Pavel Kudinov <pavel@near.org>
Date: Wed, 24 Jul 2024 13:22:00 -0700
Subject: [PATCH] Add how to run frontend to README (#921)

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index e918977f4..682af8129 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,24 @@ With everything configured correctly, we can now start all components of QueryAp
 docker compose up
 ```
 
+### Developing frontend
+1. Change `frontend/replacement.dev.json` to
+```json
+{
+    "REPL_ACCOUNT_ID": "dev-queryapi.dataplatform.near",
+    "REPL_GRAPHQL_ENDPOINT": "https://near-queryapi.dev.api.pagoda.co",
+    "REPL_EXTERNAL_APP_URL": "http://localhost:3000",
+    "REPL_REGISTRY_CONTRACT_ID": "dev-queryapi.dataplatform.near",
+    "REPL_QUERY_API_USAGE_URL": "https://storage.googleapis.com/databricks-near-query-runner/output/query-api-usage/indexers_dev.json"
+}
+```
+2. `cd frontend`
+3. `npm install`
+4. `npm run dev`
+5. `npm run serve:widgets:dev`
+6. Set flags https://dev.near.org/flags to `http://127.0.0.1:3030`
+7. Navigate to `https://dev.near.org/dev-queryapi.dataplatform.near/widget/QueryApi.dev-App`
+
 ### Local Configuration
 - Coordinator watches the dev registry contract by default (`dev-queryapi.dataplatform.near`). To use a different contract, you can update the `REGISTRY_CONTRACT_ID` environment variable.