Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the html plugin guide #353

Merged
merged 1 commit into from
Dec 15, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/admin_guide/customize_html.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
41 changes: 35 additions & 6 deletions docs/admin_guide/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```