Un-ossify the build system

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+yarn-debug.log
+yarn-error.log
+spicedb
+zed
+build
+.vercel

.gitignore

@@ -5,3 +5,4 @@ spicedb
 zed
 build
 .vercel
+.env

Dockerfile

@@ -1,30 +1,24 @@
-ARG BASE_IMAGE=node:18-alpine3.18
+ARG BASE_IMAGE=node:22-alpine
 
 FROM --platform=$BUILDPLATFORM $BASE_IMAGE AS playground-builder
 WORKDIR /app
-COPY ./package.json .
-COPY ./yarn.lock .
-COPY ./playground-ui ./playground-ui
-COPY ./spicedb-common ./spicedb-common
-COPY ./playground/package.json ./playground/package.json
+# Bring in everything not ignored by the dockerignore
+COPY . .
 ENV YARN_CACHE_FOLDER=/tmp/yarn_cache
-RUN yarn install --frozen-lockfile --production --non-interactive --network-timeout 1000000
 
-COPY ./playground ./playground
+# Environment variables for build time.
+ARG VITE_AUTHZED_DEVELOPER_GATEWAY_ENDPOINT=""
+ARG VITE_GOOGLE_ANALYTICS_MEASUREMENT_ID=""
 
-WORKDIR /app/playground
+ARG VITE_DISCORD_CHANNEL_ID=""
+ARG VITE_DISCORD_INVITE_URL="https://authzed.com/discord"
+ARG VITE_DISCORD_SERVER_ID=""
+
+RUN yarn install --frozen-lockfile --non-interactive --network-timeout 1000000
 
-ARG APPLICATION_ROOT=/
-ARG NODE_OPTIONS=--openssl-legacy-provider
-ENV PUBLIC_URL ${APPLICATION_ROOT}
 RUN yarn build
 
 FROM $BASE_IMAGE AS playground-verifier
-RUN npm install -g jshint
-COPY ./playground/contrib/generate-config-env.sh .
-COPY ./playground/contrib/test-config-env.sh .
-RUN ./test-config-env.sh
-RUN echo 'Config Verified' > verified
 
 FROM nginx:1.25.2
 LABEL maintainer="AuthZed <[email protected]>"
@@ -34,18 +28,14 @@ ENV PORT=3000
 ENTRYPOINT ["./docker-entrypoint-wrapper.sh"]
 CMD []
 
-COPY ./playground/contrib/generate-config-env.sh .
-COPY ./playground/contrib/test-nginx-conf.sh .
-COPY ./playground/contrib/test-config-env.sh .
-COPY ./playground/contrib/nginx.conf.tmpl .
-COPY ./playground/contrib/docker-entrypoint-wrapper.sh .
+COPY ./contrib/generate-config-env.sh .
+COPY ./contrib/test-nginx-conf.sh .
+COPY ./contrib/test-config-env.sh .
+COPY ./contrib/nginx.conf.tmpl .
+COPY ./contrib/docker-entrypoint-wrapper.sh .
 RUN bash ./test-nginx-conf.sh
 
-COPY --from=playground-verifier verified .
-COPY --from=playground-builder /app/playground/build/ /usr/share/nginx/html/
-COPY wasm/main.wasm  /usr/share/nginx/html/static/main.wasm
-COPY wasm/zed.wasm  /usr/share/nginx/html/static/zed.wasm
+COPY --from=playground-builder /app/build/ /usr/share/nginx/html/
 
-RUN mkdir /usr/share/nginx/html/static/schemas
 COPY examples/schemas/ /usr/share/nginx/html/static/schemas
 RUN ls /usr/share/nginx/html/static/schemas > /usr/share/nginx/html/static/schemas/_all

README.md

@@ -58,7 +58,7 @@ Deploy an instance hosted on Vercel
 or using the Vercel CLI
 
 ```command
-NODE_OPTIONS=--openssl-legacy-provider vercel build
+vercel build
 vercel deploy --prebuilt
 ```
 
@@ -73,7 +73,7 @@ The `build` directory in the project root directory after running `yarn build` w
 For example:
 
 ```command
-NODE_OPTIONS=--openssl-legacy-provider yarn global install serve
+yarn global install serve
 cd build
 serve
 ```
@@ -86,8 +86,9 @@ Run `yarn install` in the _root_ project directory.
 
 ## Running for development
 
-1. Copy the files in the `wasm` root directory into `playground/public/static`
-2. Run `yarn start` from the `playground` subdirectory
+```
+yarn run dev
+```
 
 ## Updating wasm dependencies
 
@@ -102,6 +103,26 @@ The project contains prebuilt WASM files for versions of both SpiceDB and zed. T
 [wasm-config.json]: https://github.com/authzed/playground/blob/main/spicedb-common/wasm-config.json
 [jq]: https://jqlang.github.io/jq/
 
+## Updating the generated protobuf code
+
+This project uses generated gRPC code to talk to the download API. To regenerate:
+
+1. Install [buf](https://buf.build/docs/installation/) if you haven't already
+1. Run `buf generate`
+1. Commit the changes
+
+## Building the Docker Container
+
+```
+docker build . -t tag-for-playground-image
+```
+
+Build args can be specified for the build-time environment variables:
+
+```
+docker build --build-arg VITE_AUTHZED_DEVELOPER_GATEWAY_ENDPOINT=https://my.developer.endpoint . -t tag-for-playground-image
+```
+
 ## Developing your own schema
 
 You can try both [SpiceDB](https://github.com/authzed/spicedb) and [zed](https://github.com/authzed/zed) entirely in your browser on a SpiceDB Playground deployment thanks to the power of [WebAssembly](https://authzed.com/blog/some-assembly-required).

TODO.md

@@ -0,0 +1,7 @@
+- [x] Fix tests
+- [x] Fix environment variable setting in dockerfile
+- [ ] Fix environment variable setting in vercel
+- [x] Fix build
+- [x] Fix buf.gen.yaml
+- [x] Get local instance working without errors
+- [ ] Add documentation of `buf generate`

buf.gen.yaml

@@ -0,0 +1,15 @@
+---
+version: 'v2'
+plugins:
+  - remote: "buf.build/community/timostamm-protobuf-ts:v2.9.1"
+    out: 'src/spicedb-common/protodefs'
+    opt:
+      - "long_type_string"
+      - "generate_dependencies"
+      - "optimize_code_size"
+inputs:
+  - module: "buf.build/authzed/api:v1.38.0"
+    paths:
+      - "authzed/api/v0"
+  - git_repo: "https://github.com/authzed/spicedb"
+    subdir: "proto/internal"

contrib/generate-config-env.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+generate_nginx() {
+    conf_template=$1
+    nginx_conf=$2
+    envsubst '$PLAYGROUND_DEVELOPER_API_DOWNLOAD_ENDPOINT,$HEADER_CONTENT_SECURITY_POLICY' < "$conf_template" > "$nginx_conf"
+    echo "${nginx_conf}:"
+    cat "$nginx_conf"
+}

playground/contrib/nginx.conf.tmpl → contrib/nginx.conf.tmpl

@@ -30,14 +30,6 @@ http {
             add_header Cache-Control no-cache;
             add_header Content-Security-Policy "frame-ancestors 'self' ${HEADER_CONTENT_SECURITY_POLICY};" always;
         }
-        location /config.json {
-            add_header Cache-Control no-cache;
-            add_header Content-Security-Policy "frame-ancestors 'self' ${HEADER_CONTENT_SECURITY_POLICY};" always;
-        }
-        location /config-env.js {
-            add_header Cache-Control no-cache;
-            add_header Content-Security-Policy "frame-ancestors 'self' ${HEADER_CONTENT_SECURITY_POLICY};" always;
-        }
         location ~ ^/s/([^/]+)/download$ {
             rewrite ^/s/([^/]+)/download$ ${PLAYGROUND_DEVELOPER_API_DOWNLOAD_ENDPOINT}/$1;
             add_header Content-Security-Policy "frame-ancestors 'self' ${HEADER_CONTENT_SECURITY_POLICY};" always;

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

playground/public/index.html → index.html

@@ -5,23 +5,23 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
 
-  <script src="%PUBLIC_URL%/wasm_exec.js"></script>
+  <script src="/wasm_exec.js"></script>
 
   <meta charset="utf-8" />
   <meta name="robots" content="noindex,nofollow" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+  <link rel="icon" href="/favicon.svg" />
   <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
   <meta name="theme-color" content="#000000" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <script src="%PUBLIC_URL%/config-env.js"></script>
+  <link rel="apple-touch-icon" href="/logo192.png" />
+  <link rel="manifest" href="/manifest.json" />
   <title>SpiceDB Playground</title>
 </head>
 
 <body>
   <noscript>JavaScript is required to run this single-page app. Sorry :/</noscript>
   <div id="root"></div>
   <div id="portal"></div>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 
 </html>

package.json

@@ -1,17 +1,111 @@
 {
-  "name": "code",
-  "private": "true",
+  "name": "playground",
   "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "dependencies": {
+    "@apollo/client": "^3.7.3",
+    "@apollo/link-context": "^2.0.0-beta.3",
+    "@fontsource/roboto": "^5.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@glideapps/glide-data-grid": "^4.0.2",
+    "@glideapps/glide-data-grid-cells": "^4.0.2",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@monaco-editor/react": "^4.3.1",
+    "@protobuf-ts/grpcweb-transport": "^2.9.4",
+    "@protobuf-ts/plugin": "^2.6.0",
+    "ansi-to-html": "^0.7.2",
+    "color-hash": "^2.0.2",
+    "d3-scale-chromatic": "^2.0.0",
+    "dequal": "^2.0.2",
+    "file-saver": "^2.0.5",
+    "file-select-dialog": "^1.5.4",
+    "google-protobuf": "^3.21.2",
+    "graphql": "16.6.0",
+    "install": "^0.13.0",
+    "line-column": "^1.0.2",
+    "lodash.throttle": "^4.1.1",
+    "markdown-it": "^13.0.1",
+    "marked": "^4.0.10",
+    "monaco-editor-core": "^0.39.0",
+    "parsimmon": "^1.18.1",
+    "react": "^18.3.1",
+    "react-cookie": "^4.1.1",
+    "react-dom": "^18.3.1",
+    "react-joyride": "^2.5.3",
+    "react-reflex": "^4.0.9",
+    "react-responsive-carousel": "^3.2.23",
+    "react-router-dom": "^5.3.4",
+    "sjcl": "^1.0.8",
+    "string-to-color": "^2.2.2",
+    "string.prototype.replaceall": "^1.0.6",
+    "styled-components": "^6.1.14",
+    "typeface-roboto-mono": "^1.1.13",
+    "use-deep-compare": "^1.1.0",
+    "use-deep-compare-effect": "^1.8.1",
+    "use-keyboard-shortcuts": "^2.2.2",
+    "visjs-network": "^4.24.11",
+    "yaml": "^2.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/color-hash": "^1.0.2",
+    "@types/d3-scale-chromatic": "^3.0.0",
+    "@types/file-saver": "^2.0.5",
+    "@types/jest": "^29.5.0",
+    "@types/line-column": "^1.0.0",
+    "@types/markdown-it": "^12.2.3",
+    "@types/node": "^20.3.3",
+    "@types/parsimmon": "^1.10.6",
+    "@types/react": "^18.3.1",
+    "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-router-dom": "^5.3.0",
+    "@types/sjcl": "^1.0.30",
+    "@types/styled-components": "^5.1.26",
+    "@types/use-deep-compare-effect": "^1.5.1",
+    "@types/uuid": "^9.0.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cypress": "^12.9.0",
+    "cypress-wait-until": "^1.7.2",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "postcss-safe-parser": "7.0.0",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^2.1.8"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "yarn workspace playground build && ./scripts/copy-build.sh",
+    "dev": "HTTPS=true vite",
+    "build": "tsc -b && vite build && ./scripts/copy-build.sh",
+    "test": "vitest",
+    "lint": "eslint .",
+    "lint-fix": "eslint --fix .",
+    "cy:run": "cypress run --browser chrome",
+    "cy:open": "cypress open",
     "update:spicedb": "./scripts/update-spicedb.sh",
     "update:zed": "./scripts/update-zed.sh"
   },
-  "workspaces": [
-    "spicedb-common",
-    "playground-ui",
-    "playground"
-  ],
-  "dependencies": {}
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

placeholder.env

@@ -0,0 +1,8 @@
+# You can copy this file to .env and set these locally.
+# Otherwise we set envs at the vercel level.
+VITE_AUTHZED_DEVELOPER_GATEWAY_ENDPOINT=
+VITE_GOOGLE_ANALYTICS_MEASUREMENT_ID=
+
+VITE_DISCORD_CHANNEL_ID=
+VITE_DISCORD_INVITE_URL=https://authzed.com/discord
+VITE_DISCORD_SERVER_ID=