Optional ineternal monaco-editor loading

npm-packages/dashboard-self-hosted/next.config.js

@@ -107,6 +107,19 @@ const nextConfig = {
       };
     }
 
+    if (
+      !isServer &&
+      process.env.NEXT_PUBLIC_LOAD_MONACO_INTERNALLY === "true"
+    ) {
+      const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+      config.plugins.push(
+        new MonacoWebpackPlugin({
+          languages: ["json", "typescript", "javascript"],
+          filename: "static/[name].worker.js",
+        }),
+      );
+    }
+
     return config;
   },
 };

npm-packages/dashboard-self-hosted/package.json

@@ -22,7 +22,10 @@
     "react-dom": "^18.0.0",
     "react-use": "~17.6.0",
     "system-udfs": "workspace:*",
-    "zod": "^3.24.0"
+    "zod": "^3.24.0",
+    "@monaco-editor/react": "4.7.0",
+    "monaco-editor": "0.40.0",
+    "monaco-editor-webpack-plugin": "~7.1.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.10",

npm-packages/dashboard-self-hosted/src/lib/monacoInternalLoader.ts

@@ -0,0 +1,8 @@
+import { loader } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+
+loader.config({ monaco });
+
+loader.init().then((_monacoInstance) => {
+  /* ... */
+});

npm-packages/dashboard-self-hosted/src/pages/_app.tsx

@@ -40,6 +40,10 @@ import { z } from "zod";
 import { UIProvider } from "@ui/UIContext";
 import Link from "next/link";
 
+if (process.env.NEXT_PUBLIC_LOAD_MONACO_INTERNALLY === "true") {
+  import("../lib/monacoInternalLoader").then((a) => a);
+}
+
 // Context for self-hosted dashboard sidebar settings
 const SelfHostedSettingsContext = createContext<{
   visiblePages?: string[];

self-hosted/README.md

@@ -395,6 +395,10 @@ npx convex import --replace-all <path-to-export-file>
   random identifier plus the version of the backend in use. You may opt out of
   the beacon by setting the environment variable `DISABLE_BEACON` to `true`.
 
+## Dashboard optional configuration
+
+- The dashboard uses the **monaco-editor** npm package for all the editor-like elements. By default, monaco loads it's core from a CDN. You could configure it to load internally by setting the `NEXT_PUBLIC_LOAD_MONACO_INTERNALLY` environment variable to `true`
+
 ## Running the dashboard locally
 
 From the `npm-packages/dashboard-self-hosted` directory, run:

self-hosted/docker/docker-compose.yml

@@ -53,6 +53,7 @@ services:
       - "${DASHBOARD_PORT:-6791}:6791"
     environment:
       - NEXT_PUBLIC_DEPLOYMENT_URL=${NEXT_PUBLIC_DEPLOYMENT_URL:-http://127.0.0.1:${PORT:-3210}}
+      - NEXT_PUBLIC_LOAD_MONACO_INTERNALLY
     depends_on:
       backend:
         condition: service_healthy