Feature request: Add an option to bypass loading monaco's resources from cdn

[ysslang]

Awesome app. However, the default cdn of monaco-editor is 'cdn.jsdelivr.net', which takes endless time to load in some areas (china specifically). It would be really nice to have an option to load monaco-editor's resources from other location.

I've found that monaco-editor/react did offer a loader option , which we can provide other path to load the editor's resources. reference 1, reference2. With this config, it's possible to load resources fom other faster cdn, or even load directly from the server where rustpad was deployed (would need to npm install monaco at first though)

I'd like to accomplish this request myself, but I'm not fimiliar with frontend frameworks. Also I deploy rustpad by docker, it's a nightmare to keep track your update and build my patched image. Please help me.

[brucekomike]

I have sucessed making a build which have embeded monaco editor. 3 files modified manually (others might by npm, while i'm not familiar with these tools). and i don't know whether this suitable for everyone. (please excuse me for there may be grammar issue, since i'm not an English native speaker)

steps

i assume you have the latest branch cloned and have moved into it.

npm

npm install monaco-editor

modify code

diff --git a/src/App.tsx b/src/App.tsx
index d2728a1..45b5a30 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,9 @@
 import { Box, Flex, HStack, Icon, Text, useToast } from "@chakra-ui/react";
 import Editor from "@monaco-editor/react";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
+import { loader } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+loader.config({ monaco });
 import { useEffect, useRef, useState } from "react";
 import { VscChevronRight, VscFolderOpened, VscGist } from "react-icons/vsc";
 import useLocalStorageState from "use-local-storage-state";

the two changes below were intended to solve the docker building failure:

diff --git a/vite.config.ts b/vite.config.ts
index da3296d..2f0f17c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import wasm from "vite-plugin-wasm";
 export default defineConfig({
   base: "",
   build: {
+    target: 'esnext',
     chunkSizeWarningLimit: 1000,
   },
   plugins: [wasm(), topLevelAwait(), react()],

diff --git a/Dockerfile b/Dockerfile
index 900bbe3..99bf4cb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -16,6 +16,7 @@ FROM --platform=amd64 node:lts-alpine AS frontend
 WORKDIR /usr/src/app
 COPY package.json package-lock.json ./
 COPY --from=wasm /home/rust/src/rustpad-wasm/pkg rustpad-wasm/pkg
+RUN npm install
 RUN npm ci
 COPY . .
 ARG GITHUB_SHA

run code manually

wasm-pack build rustpad-wasm
cargo run

then in another terminal

npm run dev

docker build .

the building process works well after the modifications mentioned in previous section. so noting to document.

[ekzhang]

That's awesome thanks for sharing! I think I learned how to do this in another way too in the past couple months