chore: FIT-14: Ensure production deployment of playground is resolvable as a subpath redirect (#7595)

Author: bmartel

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/"
         }
       }
     },

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": {

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,
               },
             },
+          },
     });
   },
 );