chore(console): console preview environment

.github/workflows/build.yml

@@ -278,6 +278,55 @@ jobs:
           name: ${{ steps.diff.outputs.diff_name }}
           path: ${{ steps.diff.outputs.diff_name }}
 
+  console-preview:
+    name: "Console Preview"
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    env:
+      FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+      FLY_VERSION: "0.1.80"
+      APP_NAME: wing-console-pr-${{github.event.number}}
+    if: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository && !startsWith(github.head_ref, 'mergify/merge-queue/') }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+
+      - name: Download Dist Artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: dist
+          path: dist
+
+      - name: Install flyctl
+        uses: superfly/flyctl-actions/[email protected]
+        with:
+          version: ${{env.FLY_VERSION}}
+
+      - name: Deploy to Fly.io
+        id: deploy-fly
+        run: |
+          if ! flyctl status --app "$APP_NAME"; then
+            pushd ./apps/wing-console/console/app/preview
+            flyctl launch --no-deploy --copy-config --name "$APP_NAME" --image-label latest
+            popd
+          fi
+          flyctl deploy . --config ./apps/wing-console/console/app/preview/fly.toml --app "$APP_NAME" --image-label latest --vm-memory 512 --strategy immediate
+          flyctl scale count 1 --yes --app "$APP_NAME"
+          echo "deploytime=$(TZ=UTC date +'%Y-%m-%d %H:%M')" >> $GITHUB_OUTPUT
+
+      - name: Post preview comment
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            Console preview environment is available at https://${{env.APP_NAME}}.fly.dev :rocket:
+
+            *Updated (UTC): ${{steps.deploy-fly.outputs.deploytime }}*
+          comment_tag: Console preview environment
+          GITHUB_TOKEN: ${{secrets.PROJEN_GITHUB_TOKEN}}
+
   quality-gate:
     name: Quality Gate
     runs-on: ubuntu-latest

.github/workflows/delete-console-preview.yml

@@ -0,0 +1,28 @@
+name: Delete Console Preview
+
+on:
+  pull_request:
+    types:
+      - closed
+
+env:
+  FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+  FLY_VERSION: "0.1.80"
+  APP_NAME: wing-console-pr-${{github.event.number}}
+
+jobs:
+  destroy:
+    name: "Destroy"
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && !startsWith(github.head_ref, 'mergify/merge-queue/') }}
+    steps:
+      - name: Install flyctl
+        uses: superfly/flyctl-actions/[email protected]
+        with:
+          version: ${{env.FLY_VERSION}}
+
+      - name: Delete preview environment
+        run: |
+          if flyctl status --app "$APP_NAME"; then
+            flyctl apps destroy "$APP_NAME" -y
+          fi

apps/wing-console/console/app/preview/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:18.16.0-alpine
+
+WORKDIR /app
+
+COPY dist dist
+COPY apps/wing-console/console/app/preview/index.mjs dist/
+COPY apps/wing-console/console/app/demo demo
+
+RUN npm init -y && npm install --no-package-lock ./dist/*-[0-9]*.[0-9]*.[0-9]*.tgz
+
+ENTRYPOINT ["node", "dist/index.mjs"]

apps/wing-console/console/app/preview/fly.toml

@@ -0,0 +1,25 @@
+primary_region = "lhr"
+
+[build]
+  dockerfile = "Dockerfile"
+  ignorefile = ".dockerignore"
+
+[[services]]
+  protocol = "tcp"
+  internal_port = 3000
+  auto_stop_machines = false
+  auto_start_machines = false
+  min_machines_running = 1
+
+  [services.concurrency]
+    hard_limit = 250
+    soft_limit = 200
+    type = "connections"
+
+  [[services.ports]]
+    port = 80
+    handlers = ["http"]
+
+  [[services.ports]]
+    port = 443
+    handlers = ["tls", "http"]

apps/wing-console/console/app/preview/index.mjs

@@ -0,0 +1,7 @@
+import { fileURLToPath } from "node:url";
+import { createConsoleApp } from "@wingconsole/app";
+
+await createConsoleApp({
+  wingfile: fileURLToPath(new URL("../demo/index.w", import.meta.url)),
+  requestedPort: 3000,
+});

apps/wing-console/console/app/web/index.tsx

@@ -8,7 +8,9 @@ ReactDOM.createRoot(document.querySelector("#root")!).render(
   <React.StrictMode>
     <Console
       trpcUrl="/trpc"
-      wsUrl={`ws://${location.host}/trpc`}
+      wsUrl={`${location.protocol === "http:" ? "ws://" : "wss://"}${
+        location.host
+      }/trpc`}
       layout={Number(query.get("layout")) || 1} // default to 1 = vscode (2 = playground, 3 = tutorial)
       theme={query.get("theme") as any}
       color={query.get("color") as any}