Support HMR for codespaces development in our test apps (#4567)

2024-08-29 09:00:13 -07:00 · 2024-08-29 09:00:13 -07:00 · 3d74079e9e
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@ -6356,6 +6356,43 @@ packages:
      webpack: 5.89.0(webpack-cli@5.1.4)
    dev: false

+  /@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.2)(webpack@5.89.0):
+    resolution: {integrity: sha512-LFWllMA55pzB9D34w/wXUCf8+c+IYKuJDgxiZ3qMhl64KRMBHYM1I3VdGaD2BV5FNPV2/S2596bppxHbv2ZydQ==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      '@types/webpack': 4.x || 5.x
+      react-refresh: '>=0.10.0 <1.0.0'
+      sockjs-client: ^1.4.0
+      type-fest: '>=0.17.0 <5.0.0'
+      webpack: '>=4.43.0 <6.0.0'
+      webpack-dev-server: 3.x || 4.x || 5.x
+      webpack-hot-middleware: 2.x
+      webpack-plugin-serve: 0.x || 1.x
+    peerDependenciesMeta:
+      '@types/webpack':
+        optional: true
+      sockjs-client:
+        optional: true
+      type-fest:
+        optional: true
+      webpack-dev-server:
+        optional: true
+      webpack-hot-middleware:
+        optional: true
+      webpack-plugin-serve:
+        optional: true
+    dependencies:
+      ansi-html: 0.0.9
+      core-js-pure: 3.36.0
+      error-stack-parser: 2.1.4
+      html-entities: 2.5.2
+      loader-utils: 2.0.4
+      react-refresh: 0.14.2
+      schema-utils: 4.2.0
+      source-map: 0.7.4
+      webpack: 5.89.0(webpack-cli@5.1.4)
+    dev: false
+
  /@polka/url@1.0.0-next.25:
    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
    dev: false
@ -10577,6 +10614,12 @@ packages:
    hasBin: true
    dev: false

+  /ansi-html@0.0.9:
+    resolution: {integrity: sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg==}
+    engines: {'0': node >= 0.8.0}
+    hasBin: true
+    dev: false
+
  /ansi-regex@2.1.1:
    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
    engines: {node: '>=0.10.0'}
@ -20916,6 +20959,16 @@ packages:
    resolution: {integrity: sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==}
    dev: false

+  /react-refresh-typescript@2.0.9(react-refresh@0.14.2)(typescript@5.4.5):
+    resolution: {integrity: sha512-chAnOO4vpxm/3WkgOVmti+eN8yUtkJzeGkOigV6UA9eDFz12W34e/SsYe2H5+RwYJ3+sfSZkVbiXcG1chEBxlg==}
+    peerDependencies:
+      react-refresh: 0.10.x || 0.11.x || 0.12.x || 0.13.x || 0.14.x
+      typescript: ^4.8 || ^5.0
+    dependencies:
+      react-refresh: 0.14.2
+      typescript: 5.4.5
+    dev: false
+
  /react-refresh@0.11.0:
    resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
    engines: {node: '>=0.10.0'}
@ -20926,6 +20979,11 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: false

+  /react-refresh@0.14.2:
+    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
  /react-router-dom@5.3.4(react@18.3.1):
    resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==}
    peerDependencies:
@ -26582,7 +26640,7 @@ packages:
    dev: false

  file:projects/server.tgz:
-    resolution: {integrity: sha512-Kt6dF0htkwJ0TjA7F3NKycWCxhea6GFQevPJ0jb8p96s1aZ28mxkGPiJtMt/zP1b0tQszXTUfK0bbM9O+N5bIg==, tarball: file:projects/server.tgz}
+    resolution: {integrity: sha512-LpEeSn9Vp4mg8JHQtX6OadeYae8nMk33TA8ME/ey5b3hMZ7LTPsi3LZLW3ctt8KsOQdmw/nXQft2zBaHdTQMWA==, tarball: file:projects/server.tgz}
    name: '@rush-temp/server'
    version: 0.0.0
    dependencies:
@ -26591,6 +26649,7 @@ packages:
      '@azure/communication-identity': 1.3.0
      '@azure/communication-rooms': 1.1.0-beta.1
      '@azure/storage-blob': 12.17.0
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(webpack@5.89.0)
      '@types/cookie-parser': 1.4.7
      '@types/copy-webpack-plugin': 6.4.3
      '@types/cors': 2.8.17
@ -26625,6 +26684,8 @@ packages:
      node-fetch: 2.6.7
      prettier: 3.3.2
      pretty-quick: 4.0.0(prettier@3.3.2)
+      react-refresh: 0.14.2
+      react-refresh-typescript: 2.0.9(react-refresh@0.14.2)(typescript@5.4.5)
      rimraf: 2.7.1
      supertest: 6.3.4
      ts-jest: 29.1.5(jest@29.7.0)(typescript@5.4.5)
@ -26644,16 +26705,21 @@ packages:
      - '@swc/core'
      - '@swc/wasm'
      - '@types/eslint'
+      - '@types/webpack'
      - '@webpack-cli/generators'
      - babel-jest
      - babel-plugin-macros
      - encoding
      - esbuild
      - node-notifier
+      - sockjs-client
      - supports-color
+      - type-fest
      - uglify-js
      - webpack-bundle-analyzer
      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
    dev: false

  file:projects/storybook.tgz:
--- a/common/config/rush/variants/stable/pnpm-lock.yaml
+++ b/common/config/rush/variants/stable/pnpm-lock.yaml
@ -6376,6 +6376,43 @@ packages:
      webpack: 5.89.0(webpack-cli@5.1.4)
    dev: false

+  /@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.2)(webpack@5.89.0):
+    resolution: {integrity: sha512-LFWllMA55pzB9D34w/wXUCf8+c+IYKuJDgxiZ3qMhl64KRMBHYM1I3VdGaD2BV5FNPV2/S2596bppxHbv2ZydQ==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      '@types/webpack': 4.x || 5.x
+      react-refresh: '>=0.10.0 <1.0.0'
+      sockjs-client: ^1.4.0
+      type-fest: '>=0.17.0 <5.0.0'
+      webpack: '>=4.43.0 <6.0.0'
+      webpack-dev-server: 3.x || 4.x || 5.x
+      webpack-hot-middleware: 2.x
+      webpack-plugin-serve: 0.x || 1.x
+    peerDependenciesMeta:
+      '@types/webpack':
+        optional: true
+      sockjs-client:
+        optional: true
+      type-fest:
+        optional: true
+      webpack-dev-server:
+        optional: true
+      webpack-hot-middleware:
+        optional: true
+      webpack-plugin-serve:
+        optional: true
+    dependencies:
+      ansi-html: 0.0.9
+      core-js-pure: 3.36.0
+      error-stack-parser: 2.1.4
+      html-entities: 2.5.2
+      loader-utils: 2.0.4
+      react-refresh: 0.14.2
+      schema-utils: 4.2.0
+      source-map: 0.7.4
+      webpack: 5.89.0(webpack-cli@5.1.4)
+    dev: false
+
  /@polka/url@1.0.0-next.25:
    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
    dev: false
@ -10603,6 +10640,12 @@ packages:
    hasBin: true
    dev: false

+  /ansi-html@0.0.9:
+    resolution: {integrity: sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg==}
+    engines: {'0': node >= 0.8.0}
+    hasBin: true
+    dev: false
+
  /ansi-regex@2.1.1:
    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
    engines: {node: '>=0.10.0'}
@ -20959,6 +21002,16 @@ packages:
    resolution: {integrity: sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==}
    dev: false

+  /react-refresh-typescript@2.0.9(react-refresh@0.14.2)(typescript@5.4.5):
+    resolution: {integrity: sha512-chAnOO4vpxm/3WkgOVmti+eN8yUtkJzeGkOigV6UA9eDFz12W34e/SsYe2H5+RwYJ3+sfSZkVbiXcG1chEBxlg==}
+    peerDependencies:
+      react-refresh: 0.10.x || 0.11.x || 0.12.x || 0.13.x || 0.14.x
+      typescript: ^4.8 || ^5.0
+    dependencies:
+      react-refresh: 0.14.2
+      typescript: 5.4.5
+    dev: false
+
  /react-refresh@0.11.0:
    resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
    engines: {node: '>=0.10.0'}
@ -20969,6 +21022,11 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: false

+  /react-refresh@0.14.2:
+    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
  /react-router-dom@5.3.4(react@18.3.1):
    resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==}
    peerDependencies:
@ -26568,7 +26626,7 @@ packages:
    dev: false

  file:projects/server.tgz:
-    resolution: {integrity: sha512-Kt6dF0htkwJ0TjA7F3NKycWCxhea6GFQevPJ0jb8p96s1aZ28mxkGPiJtMt/zP1b0tQszXTUfK0bbM9O+N5bIg==, tarball: file:projects/server.tgz}
+    resolution: {integrity: sha512-LpEeSn9Vp4mg8JHQtX6OadeYae8nMk33TA8ME/ey5b3hMZ7LTPsi3LZLW3ctt8KsOQdmw/nXQft2zBaHdTQMWA==, tarball: file:projects/server.tgz}
    name: '@rush-temp/server'
    version: 0.0.0
    dependencies:
@ -26577,6 +26635,7 @@ packages:
      '@azure/communication-identity': 1.3.0
      '@azure/communication-rooms': 1.1.0-beta.1
      '@azure/storage-blob': 12.17.0
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(webpack@5.89.0)
      '@types/cookie-parser': 1.4.7
      '@types/copy-webpack-plugin': 6.4.3
      '@types/cors': 2.8.17
@ -26611,6 +26670,8 @@ packages:
      node-fetch: 2.6.7
      prettier: 3.3.2
      pretty-quick: 4.0.0(prettier@3.3.2)
+      react-refresh: 0.14.2
+      react-refresh-typescript: 2.0.9(react-refresh@0.14.2)(typescript@5.4.5)
      rimraf: 2.7.1
      supertest: 6.3.4
      ts-jest: 29.1.5(jest@29.7.0)(typescript@5.4.5)
@ -26630,16 +26691,21 @@ packages:
      - '@swc/core'
      - '@swc/wasm'
      - '@types/eslint'
+      - '@types/webpack'
      - '@webpack-cli/generators'
      - babel-jest
      - babel-plugin-macros
      - encoding
      - esbuild
      - node-notifier
+      - sockjs-client
      - supports-color
+      - type-fest
      - uglify-js
      - webpack-bundle-analyzer
      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
    dev: false

  file:projects/storybook.tgz:
--- a/common/config/webpack/sampleapp.webpack.config.js
+++ b/common/config/webpack/sampleapp.webpack.config.js
@ -6,6 +6,12 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const CopyPlugin = require("copy-webpack-plugin");
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const ReactRefreshTypeScript = require('react-refresh-typescript');
+
+// Detect if running in GitHub Codespaces environment through environment variable set by codespace.
+// More details: https://docs.github.com/en/codespaces/developing-in-a-codespace/default-environment-variables-for-your-codespace#list-of-default-environment-variables
+const RUNNING_IN_GH_CODESPACES = !!process.env.CODESPACES;

 const webpackConfig = (sampleAppDir, env, babelConfig) => {
  const config = {
@ -46,7 +52,12 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: {
-            transpileOnly: true
+            transpileOnly: true,
+
+            // Enable HRML for GH codespaces devlopment (this was found to not work on MacOS so enabling for GH Codespaces only)
+            getCustomTransformers: () => ({
+              before: [!env.production && RUNNING_IN_GH_CODESPACES && ReactRefreshTypeScript()].filter(Boolean),
+            })
          },
          exclude: /dist/,
          sideEffects: false
@ -66,6 +77,9 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
      ]
    },
    plugins: [
+      // Enable HRML for GH codespaces devlopment (this was found to not work on MacOS so enabling for GH Codespaces only)
+      !env.production && RUNNING_IN_GH_CODESPACES && new ReactRefreshWebpackPlugin(),
+
      new HtmlWebpackPlugin({ template: './public/index.html' }),
      new webpack.DefinePlugin({
        'process.env.PRODUCTION': env.production || !env.development,
@ -86,12 +100,19 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
          { from: path.resolve(sampleAppDir, "public/assets"), to: "assets",  noErrorOnMissing: true },
        ]
      })
-    ],
+    ].filter(Boolean),
    devServer: {
      port: 3000,
      hot: true,
      open: true,
      static: { directory: path.resolve(sampleAppDir, 'public') },
+      // To support hot reloading in GitHub Codespaces, we need to use the secure websocket URL
+      // For more details: https://github.com/orgs/community/discussions/11524#discussioncomment-2176952
+      client: RUNNING_IN_GH_CODESPACES ? {
+        webSocketURL: {
+          port: '443'
+        }
+      } : undefined,
      proxy: [
        {
          path: '/token',
--- a/samples/Server/package.json
+++ b/samples/Server/package.json
@ -41,6 +41,7 @@
    "@azure/communication-rooms": "1.1.0-beta.1 || ^1.1.0"
  },
  "devDependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
    "@types/cookie-parser": "^1.4.2",
    "@types/copy-webpack-plugin": "^6.4.0",
    "@types/express": "^4.17.8",
@ -64,6 +65,8 @@
    "jest-junit": "^16.0.0",
    "prettier": "3.3.2",
    "pretty-quick": "^4.0.0",
+    "react-refresh": "^0.14.2",
+    "react-refresh-typescript": "^2.0.9",
    "rimraf": "^2.6.2",
    "supertest": "^6.3.3",
    "ts-jest": "^29.1.5",