Merge pull request #1126 from pybricks/dlech

new web server script

CONTRIBUTING.md

@@ -118,10 +118,10 @@ So for local testing without https, we need to follow
 To serve the website, run:
 
     yarn build
-    python3 -m http.server --directory build
+    ./scripts/serve.py
 
 Note: the usual `npx serve` doesn't properly serve parts of the site so we use
-Python instead.
+a custom Python script instead.
 
 Then at `chrome://flags/#unsafely-treat-insecure-origin-as-secure`, add:
 

config/webpackDevServer.config.js

@@ -40,6 +40,7 @@ module.exports = function (proxy, allowedHost) {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': '*',
       'Access-Control-Allow-Headers': '*',
+      // items below required by Pybricks Code app
       'Cross-Origin-Opener-Policy': 'same-origin',
       'Cross-Origin-Embedder-Policy': 'require-corp',
     },

scripts/serve.py

@@ -0,0 +1,34 @@
+#!/usr/bin/env python3
+
+"""
+Serve the build directory using builtin Python web server.
+"""
+
+import http.server
+import pathlib
+import socketserver
+
+BUILD_DIR = (pathlib.Path(__file__).parent.parent / "build").resolve()
+PORT = 8000
+
+
+class Handler(http.server.SimpleHTTPRequestHandler):
+    def __init__(
+        self,
+        request: bytes,
+        client_address: tuple[str, int],
+        server: socketserver.BaseServer,
+        directory: str | None = ...
+    ) -> None:
+        super().__init__(request, client_address, server, directory=BUILD_DIR)
+
+    def end_headers(self) -> None:
+        # custom headers needed for some web API features
+        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
+        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
+        return super().end_headers()
+
+
+with socketserver.TCPServer(("", PORT), Handler) as httpd:
+    print(f"serving at http://0.0.0.0:{PORT}")
+    httpd.serve_forever()

src/app/App.tsx

@@ -18,6 +18,7 @@ import Terminal from '../terminal/Terminal';
 import Toolbar from '../toolbar/Toolbar';
 import Tour from '../tour/Tour';
 import { isMacOS } from '../utils/os';
+import { httpServerHeadersVersion } from './constants';
 
 const Docs: React.VFC = () => {
     const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
@@ -115,7 +116,7 @@ const Docs: React.VFC = () => {
                     contentWindow.document.documentElement.classList.add(Classes.DARK);
                 }
             }}
-            src={`static/docs/v${docsPackage.version}/index.html`}
+            src={`static/docs/v${docsPackage.version}/index.html?v${httpServerHeadersVersion}`}
             allowFullScreen={true}
             role="documentation"
             width="100%"

src/app/constants.ts

@@ -56,3 +56,14 @@ export const pybricksCopyright = 'Copyright (c) 2020-2022 The Pybricks Authors';
 /** LEGO "fair play" disclaimer */
 export const legoDisclaimer =
     'LEGO® is a trademark of the LEGO Group of companies which does not sponsor, authorize or endorse this site.';
+
+/**
+ * Provides a version for the required headers of this app.
+ *
+ * This is used for cache bursting when the required headers change.
+ *
+ * Currently, the following headers are required:
+ *      Cross-Origin-Opener-Policy: same-origin
+ *      Cross-Origin-Embedder-Policy: require-corp
+ */
+export const httpServerHeadersVersion = 2;