From 99dc7ad0bb1baee310b18f225254903a4089db19 Mon Sep 17 00:00:00 2001
From: cgu <cgu@pinterest.com>
Date: Tue, 15 Dec 2020 11:07:04 -0500
Subject: [PATCH] Update the html plugin guide

---
 docs/admin_guide/customize_html.md |  2 +-
 docs/admin_guide/plugins.md        | 41 +++++++++++++++++++++++++-----
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/docs/admin_guide/customize_html.md b/docs/admin_guide/customize_html.md
index 6b9630b97..6f46333f4 100644
--- a/docs/admin_guide/customize_html.md
+++ b/docs/admin_guide/customize_html.md
@@ -4,7 +4,7 @@ title: Customize HTML
 sidebar_label: Customize HTML
 ---
 
-Querybook allows for some basic customization in the frontend. You can use the web plugin to inject custom javascript into Querybook frontend. Please check [Plugins Guide](./plugins.md) to see how to get started.
+Querybook allows for some basic customization in the frontend. You can use the web plugin to inject custom javascript into Querybook frontend. Please check [Plugins Guide](./plugins.md) to see how to setup plugins. Once the plugins setup is completed, you would need to create a folder named `webpage_plugin` under the `plugins` folder and a typescript file with path `webpage_plugin/custom_script.ts` as the entrypoint.
 
 Right now there are four use cases for custom javascript:
 
diff --git a/docs/admin_guide/plugins.md b/docs/admin_guide/plugins.md
index a5e206f28..1565d0e0c 100644
--- a/docs/admin_guide/plugins.md
+++ b/docs/admin_guide/plugins.md
@@ -58,22 +58,51 @@ Web page plugin allows you to inject custom js, css to Querybook. Place your cus
 
 ## Installing Plugins
 
-0. Ensure you can run the vanilla Querybook
+1. Ensure you can run the vanilla Querybook
 
-Please ensure you can spin up Querybook's docker images (webserver, scheduler, workers) and able to set environment variables. Check "Setup Querybook" for more details.
+Please ensure you can spin up Querybook's production docker images (webserver, scheduler, workers) and able to set customized settings. Check [Infra Config](infra_config.md) for more details.
 
-1. Setup a new project folder for Querybook plugins
+1. Setup a new project folder for Querybook plugins. This should be outside of Querybook's repo.
 
 Querybook can be pulled from dockerhub directly, so this is mainly used for plugins and custom environment settings.
 
-2. Copy plugins folder from the Querybook repo
+3. To get started. Copy plugins folder from the Querybook repo.
+
+```sh
+cp -R ../querybook/plugins .
+```
 
 Copy the `plugins` folder from the root directory of this project to the custom project folder.
 
-3. Extending the docker image and install dependencies
+4. Extending the docker image and install dependencies
 
 Create a new dockerfile which can be used to install additional libraries and dependencies. Make sure to also COPY the plugins folder into the docker image.
 
-4. Pack the plugins with the new docker image
+```Dockerfile
+FROM .../querybook:latest
+
+# If you need to install additional libs
+RUN rm -rf /var/lib/apt/lists/* \
+    && apt-get update \
+    && DEBIAN_FRONTEND=noninteractive apt-get install --no-install-recommends -y \
+    ... \
+    ... \
+    ... \
+    && apt-get clean
+
+# If you need to install additional python packages
+COPY plugins/requirements /opt/plugins/requirements
+RUN pip install -r /opt/plugins/requirements/base.txt
+
+# Copy the plugins directory
+COPY plugins /opt/plugins
+```
+
+5. Pack the plugins with the new docker image
 
 Last but not least, remember to set docker environment variable QUERYBOOK_PLUGIN to the path of the plugins folder and also include it as part of the PYTHONPATH.
+
+```Dockerfile
+ENV QUERYBOOK_PLUGIN=/opt/plugins
+ENV PYTHONPATH=/opt/datahub/datahub/server:/opt/plugins
+```