From d26fce9603ec3128feed3b8009f2c6b46010f416 Mon Sep 17 00:00:00 2001
From: Valentin Kruglikov <dev.n@bk.ru>
Date: Fri, 3 Jan 2025 00:19:45 +0700
Subject: [PATCH] Github Pages demo page

---
 .github/workflows/demo.yml      | 37 +++++++++++++++++++++++++++++++++
 packages/demo/package.json      |  5 ++---
 packages/demo/public/index.html |  2 +-
 packages/demo/src/index.ts      |  8 ++++++-
 webpack.common.js               | 28 ++++++++++++++-----------
 5 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 .github/workflows/demo.yml

diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml
new file mode 100644
index 0000000..9027ba8
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 9c24ddf..807474b 100644
--- a/packages/demo/package.json
+++ b/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"
   }
 }
diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html
index aefe7e8..7184d24 100644
--- a/packages/demo/public/index.html
+++ b/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>
diff --git a/packages/demo/src/index.ts b/packages/demo/src/index.ts
index d8c245b..88df8fc 100644
--- a/packages/demo/src/index.ts
+++ b/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',
diff --git a/webpack.common.js b/webpack.common.js
index 6080b7f..e804df1 100644
--- a/webpack.common.js
+++ b/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']
   },