feat: add auto deploy of example page (#275)

ryanseddon · web-flow · commit d381d35190f7 · 2026-03-09T14:45:41.000+11:00
diff --git a/.github/workflows/deploy-example.yml b/.github/workflows/deploy-example.yml
@@ -0,0 +1,47 @@
+name: Deploy Example to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build example
+        run: npm run build:example
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './example-dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/example/index.html b/example/index.html
@@ -1,28 +1,32 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>React Frame Component Examples</title>
     <style>
-        * {
-            color: blue;
-        }
-        iframe {
-          width: 100%;
-        }
-        section {
-          display: grid;
-          grid-template-columns: repeat(2, 1fr);
-        }
+      * {
+        color: blue;
+      }
+      iframe {
+        width: 100%;
+      }
+      section {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+      }
     </style>
-</head>
-<body>
-  <h1>&lt;Frame /> examples</h1>
-  <p>Two examples below showing how you can encapsulate individual components or your entire application</p>
-  <section>
+  </head>
+  <body>
+    <h1>&lt;Frame /> examples</h1>
+    <p>
+      Two examples below showing how you can encapsulate individual components
+      or your entire application
+    </p>
+    <section>
       <div id="example1"></div>
       <div id="example2"></div>
       <div id="example3"></div>
     </section>
-</body>
+    <script type="module" src="./app.jsx"></script>
+  </body>
 </html>
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "serve": "vite --root example",
     "start": "npm run serve",
     "build": "vite build",
+    "build:example": "vite build --config vite.example.config.js",
     "lint": "eslint src test",
     "prepublish": "npm run build",
     "deploy": "gh-pages -d dist",
diff --git a/vite.example.config.js b/vite.example.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  root: resolve(__dirname, 'example'),
+  plugins: [react()],
+  build: {
+    outDir: resolve(__dirname, 'example-dist'),
+    emptyOutDir: true
+  }
+});
