How do I use this monaco library in an electron app?

Question

How can I use monaco in my electron app? out this example: What's the proper way to do that? i'm open to new suggestions. I throughout into building a micro frontends but it's not that nice in react/electron and in the end i would have to include the final index output file using iframe. I wish I could use something we do with dlls in desktop application. note: i'm new to react and electron, perdon mystakes that seems so simple.

Well, I tried to "merge" as needed both webpack configs. Is this the way to go? so far i couldn't make it. I added:

  resolve: {
    alias: {
      'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility')
    }

but it cannot find the vscode module, i'm getting the error:

Module not found: Can't resolve 'vscode' in 'C:\Users\jjj\Desktop\merge\Newton\node_modules\vscode-languageclient\lib\common' even tho the package is installed.

I also tried to add "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js' in the entry section but I got the error:

An unhandled error has occurred inside Forge: Conflict: Multiple chunks emit assets to the same filename index.js (chunks 179 and 915) Error: Conflict: Multiple chunks emit assets to the same filename index.js (chunks 179 and 915)

I did plan to -- assuming it's the proper way to go ---, once managed to fix this webpackes merge, I'd include the main file with the contents:

    require('monaco-editor');
    (self as any).MonacoEnvironment = {
        getWorkerUrl: () => './editor.worker.bundle.js'
    }
    require('./client');

then have <div id="container" style="width:800px;height:600px;border:1px solid grey"></div> somewhere to show the editor and the <script src="main.bundle.js"></script> wouldn't be needed due to the fact it would be included in the webscript's output javascript bundle file, used elsewhere by the entire application.

Answer 1

Various errors may occur depending on the bundler configuration, so I made it simple example by referring to codes monaco-editor and monaco-languageclient. Both repositories work after build, so I separated the main process and renderer process folders to avoid overlapping outputs. Maybe this is related to Forge's error.

I created an Electron renderer code using monaco-languageclient's client code, and in the main process, run monaco-languageclient's server. Therefore, both processes must share the same web socket port. You can also erase the following lines and run LanguageServer externally.

Here is an example without the iframe.