Github Pages demo page

.github/workflows/demo.yml

@@ -0,0 +1,37 @@
+name: Deploy @msw-devtools/demo
+
+on:
+  push:
+    branches: ['master']
+    paths:
+      - 'packages/demo/**'
+      - '.github/workflows/demo.yml'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy-demo:
+    name: Install dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-node
+      - uses: ./.github/actions/install-npm-deps
+
+      - name: Build all packages
+        run: npm run build -- --filter=@msw-devtools/demo
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: './packages/demo/dist/.'
+
+      - name: Deploy GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

packages/demo/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@msw-devtools/demo",
   "version": "0.1",
+  "author": "Valentin Kruglikov",
   "license": "MIT",
   "scripts": {
     "dev": "NODE_ENV=development npx webpack serve",
@@ -11,8 +12,6 @@
     "@msw-devtools/json-config": "*"
   },
   "msw": {
-    "workerDirectory": [
-      "dist"
-    ]
+    "workerDirectory": "./public"
   }
 }

packages/demo/public/index.html

@@ -19,7 +19,7 @@ <h3>Demo msw</h3>
       <p>
         <label>
           url:
-          <input id="url" value="test" type="text" />
+          <input id="url" value="/test" type="text" />
         </label>
       </p>
       <p>

packages/demo/src/index.ts

@@ -5,7 +5,13 @@ import { http } from 'msw'
 const handlers = [http.all('*', createResponseResolver())]
 
 setupWorker(...handlers).start({
-  onUnhandledRequest: 'bypass'
+  onUnhandledRequest: 'bypass',
+  serviceWorker: {
+    url:
+      process.env.NODE_ENV === 'production'
+        ? '/msw-devtools-extension/mockServiceWorker.js'
+        : '/mockServiceWorker.js'
+  }
 })
 ;(document.getElementById('form') as HTMLFormElement).addEventListener(
   'submit',

webpack.common.js

@@ -2,6 +2,8 @@ const path = require('path')
 const webpack = require('webpack')
 const CopyPlugin = require('copy-webpack-plugin')
 
+const IS_DEV = process.env.NODE_ENV === 'development'
+
 module.exports = ({ root, port, wdsClient = true }) => ({
   module: {
     rules: [
@@ -27,18 +29,20 @@ module.exports = ({ root, port, wdsClient = true }) => ({
       }
     ]
   },
-  devtool: 'inline-source-map',
-  devServer: {
-    port,
-    compress: true,
-    static: {
-      directory: path.join(root, 'dist')
-    },
-    client: wdsClient ? undefined : false,
-    devMiddleware: {
-      writeToDisk: true
-    }
-  },
+  devtool: IS_DEV ? 'inline-source-map' : false,
+  devServer: IS_DEV
+    ? {
+        port,
+        compress: true,
+        static: {
+          directory: path.join(root, 'dist')
+        },
+        client: wdsClient ? undefined : false,
+        devMiddleware: {
+          writeToDisk: true
+        }
+      }
+    : false,
   resolve: {
     extensions: ['.tsx', '.ts', '.js']
   },