From ade5bd05225910fe5c06c6ecc73f382f42c21aaa Mon Sep 17 00:00:00 2001
From: Brandon Martel <brandonmartel@gmail.com>
Date: Thu, 22 May 2025 11:13:01 -0500
Subject: [PATCH] chore: FIT-14: Ensure production deployment of playground is
 resolvable as a subpath redirect

---
 web/apps/playground/project.json |  8 ++--
 web/package.json                 |  4 +-
 web/webpack.config.js            | 68 +++++++++++++++++---------------
 3 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/web/apps/playground/project.json b/web/apps/playground/project.json
index efb3fdfc5424..2fc33c5882b3 100644
--- a/web/apps/playground/project.json
+++ b/web/apps/playground/project.json
@@ -10,7 +10,7 @@
       "defaultConfiguration": "production",
       "options": {
         "compiler": "babel",
-        "outputPath": "dist/apps/playground",
+        "outputPath": "dist/apps/playground/playground-assets",
         "index": "apps/playground/src/index.html",
         "baseHref": "/",
         "main": "apps/playground/src/main.tsx",
@@ -26,7 +26,8 @@
           "extractLicenses": false,
           "optimization": false,
           "sourceMap": true,
-          "vendorChunk": true
+          "vendorChunk": true,
+          "baseHref": "/"
         },
         "production": {
           "fileReplacements": [
@@ -39,7 +40,8 @@
           "sourceMap": false,
           "namedChunks": false,
           "extractLicenses": true,
-          "vendorChunk": false
+          "vendorChunk": false,
+          "baseHref": "/playground-assets/"
         }
       }
     },
diff --git a/web/package.json b/web/package.json
index 77e2d336bef1..7f90e1b65649 100644
--- a/web/package.json
+++ b/web/package.json
@@ -37,8 +37,8 @@
     "extract-antd-no-reset": "nx extract-antd-no-reset editor",
     "storybook:serve": "nx storybook storybook",
     "storybook:build": "nx build-storybook storybook",
-    "playground:serve": "FRONTEND_HOSTNAME=http://localhost:4200 MODE=standalone nx run playground:serve:development",
-    "playground:build": "NODE_ENV=production MODE=standalone nx run playground:build:production"
+    "playground:serve": "FRONTEND_HOSTNAME=http://localhost:4200 MODE=standalone-playground nx run playground:serve:development",
+    "playground:build": "NODE_ENV=production MODE=standalone-playground nx run playground:build:production && mv dist/apps/playground/playground-assets/index.html dist/apps/playground/index.html"
   },
   "husky": {
     "hooks": {
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 7df32c8257bb..98f2f5ced4c6 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -65,7 +65,7 @@ const optimizer = () => {
     result.minimizer = undefined;
   }
 
-  if (process.env.MODE === "standalone") {
+  if (process.env.MODE.startsWith("standalone")) {
     result.runtimeChunk = false;
     result.splitChunks = { cacheGroups: { default: false } };
   }
@@ -84,7 +84,7 @@ module.exports = composePlugins(
   withReact({ svgr: true }),
   (config) => {
     // LS entrypoint
-    if (process.env.MODE !== "standalone") {
+    if (!process.env.MODE.startsWith("standalone")) {
       config.entry = {
         main: {
           import: path.resolve(__dirname, "apps/labelstudio/src/main.tsx"),
@@ -94,7 +94,12 @@ module.exports = composePlugins(
       config.output = {
         ...config.output,
         uniqueName: "labelstudio",
-        publicPath: isDevelopment && FRONTEND_HOSTNAME ? `${FRONTEND_HOSTNAME}/react-app/` : "auto",
+        publicPath:
+          isDevelopment && FRONTEND_HOSTNAME
+            ? `${FRONTEND_HOSTNAME}/react-app/`
+            : process.env.MODE === "standalone-playground"
+              ? "/playground-assets/"
+              : "auto",
         scriptType: "text/javascript",
       };
 
@@ -265,38 +270,37 @@ module.exports = composePlugins(
       mode,
       plugins,
       optimization: optimizer(),
-      devServer:
-        process.env.MODE === "standalone"
-          ? {}
-          : {
-              // Port for the Webpack dev server
-              port: HMR_PORT,
-              // Enable HMR
-              hot: true,
-              // Allow cross-origin requests from Django
-              headers: { "Access-Control-Allow-Origin": "*" },
-              static: {
-                directory: path.resolve(__dirname, "../label_studio/core/static/"),
-                publicPath: "/static/",
-              },
-              devMiddleware: {
-                publicPath: `${FRONTEND_HOSTNAME}/react-app/`,
+      devServer: process.env.MODE.startsWith("standalone")
+        ? {}
+        : {
+            // Port for the Webpack dev server
+            port: HMR_PORT,
+            // Enable HMR
+            hot: true,
+            // Allow cross-origin requests from Django
+            headers: { "Access-Control-Allow-Origin": "*" },
+            static: {
+              directory: path.resolve(__dirname, "../label_studio/core/static/"),
+              publicPath: "/static/",
+            },
+            devMiddleware: {
+              publicPath: `${FRONTEND_HOSTNAME}/react-app/`,
+            },
+            allowedHosts: "all", // Allow access from Django's server
+            proxy: {
+              "/api": {
+                target: `${DJANGO_HOSTNAME}/api`,
+                changeOrigin: true,
+                pathRewrite: { "^/api": "" },
+                secure: false,
               },
-              allowedHosts: "all", // Allow access from Django's server
-              proxy: {
-                "/api": {
-                  target: `${DJANGO_HOSTNAME}/api`,
-                  changeOrigin: true,
-                  pathRewrite: { "^/api": "" },
-                  secure: false,
-                },
-                "/": {
-                  target: `${DJANGO_HOSTNAME}`,
-                  changeOrigin: true,
-                  secure: false,
-                },
+              "/": {
+                target: `${DJANGO_HOSTNAME}`,
+                changeOrigin: true,
+                secure: false,
               },
             },
+          },
     });
   },
 );