From 08526e7f1e02c9f8d1063e6c64cdd662c091371e Mon Sep 17 00:00:00 2001
From: Kristian Aune <kraune@verizonmedia.com>
Date: Thu, 18 Aug 2022 13:22:21 +0200
Subject: Add config steps to readme

---
 client/js/app/README.md            |  70 ++++++++++++++++++++++++++++++-------
 client/js/app/img/querybuilder.png | Bin 0 -> 95609 bytes
 2 files changed, 57 insertions(+), 13 deletions(-)
 create mode 100644 client/js/app/img/querybuilder.png

(limited to 'client/js')

diff --git a/client/js/app/README.md b/client/js/app/README.md
index ae6a8d1cc25..9dbce216224 100644
--- a/client/js/app/README.md
+++ b/client/js/app/README.md
@@ -3,17 +3,71 @@
 ![Vespa logo](https://vespa.ai/assets/vespa-logo-color.png)
 
 # Vespa client
+This app contains the **Query Builder** and the **Trace Visualizer**.
 
-This app is work in progress.
-It currently contains the **Query Builder** and the **Trace Visualizer**.
+Install and start:
+
+    $ nvm install --lts node  # in case the installed node.js is too old
+    $ yarn install
+    $ yarn dev                # then open link, like http://127.0.0.1:3000/
+
+Alternatively, use Docker to start it without installing node:
+
+    $ docker run -v `pwd`:/w -w /w --publish 3000:3000 node:16 sh -c 'yarn install && yarn dev --host'
+
+When started, open [http://127.0.0.1:3000/](http://127.0.0.1:3000/).
+
+*Troubleshooting:* Remove the generated `node_modules` directory and try again.
+This is also relevant when switching between running local and in the container.
 
 
 
 ## Query Builder
-The Query Builder is a tool for creating Vespa queries to send to a local backend.
+The Query Builder is a tool for creating Vespa queries to send to a local Vespa application.
 The tool provides all of the options for query parameters from dropdowns.
 The input fields provide hints to what is the expected type of value.
 
+![Query Builder](img/querybuilder.png)
+
+To access a Vespa endpoint from the Query Builder,
+deploy with [CORS filters](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
+To the query-serving container, add an `http` element in _services.xml_ like:
+```
+    <container id="default" version="1.0">
+
+        <http>
+            <filtering strict-mode="false">
+                <request-chain id="request-chain">
+                    <filter id="com.yahoo.jdisc.http.filter.security.cors.CorsPreflightRequestFilter"
+                            bundle="jdisc-security-filters">
+                        <config name="jdisc.http.filter.security.cors.cors-filter">
+                            <allowedUrls>
+                                <item>*</item>
+                            </allowedUrls>
+                        </config>
+                    </filter>
+                    <binding>http://*/search/</binding>
+                </request-chain>
+
+                <response-chain id="response-chain">
+                    <filter id="com.yahoo.jdisc.http.filter.security.cors.CorsResponseFilter"
+                            bundle="jdisc-security-filters">
+                        <config name="jdisc.http.filter.security.cors.cors-filter">
+                            <allowedUrls>
+                                <item>*</item>
+                            </allowedUrls>
+                        </config>
+                    </filter>
+                    <binding>http://*/search/</binding>
+                </response-chain>
+            </filtering>
+
+            <server port="8080" id="default"/>
+        </http>
+```
+
+Deploy again, and (possibly) restart Vespa (internal port changes can be triggered by this).
+
 
 
 ## Trace Visualizer
@@ -45,13 +99,3 @@ Press the _JSON File_ button as shown in the image, and drag and drop the trace
 Then click on the newly added trace and see it displayed as a flame graph:
 
 ![Example Image](img/result.png)
-
-
-
-## Client install and start
-
-    nvm install --lts node  # in case your current node.js is too old
-    yarn install
-    yarn dev                # then open link, like http://127.0.0.1:3000/
-
-<!-- ToDo: publish a Docker image with all the clients ... -->
diff --git a/client/js/app/img/querybuilder.png b/client/js/app/img/querybuilder.png
new file mode 100644
index 00000000000..fa68f5bb82f
Binary files /dev/null and b/client/js/app/img/querybuilder.png differ
-- 
cgit v1.2.3