Adding dsl to existing React project

[einarhaaland]

I have two separate existing projects: Langium dsl and React.

My goal is to add monaco editor + my Langium dsl to my existing React project. (Have been following the A-Z guide)

The React project has files that already exist in the Langium dir like tsconfig.json, package.json and public folder.

A couple of questions on what to do next:

• Can I keep the projects separate and specify the outfile directory of the language-server-bundle to be in the React project? (Is the language server bundle all that is needed to have monaco use my dsl?)
• Do I have to merge the two projects?
• Do I have to recreate the Langium dsl from within the React project?

Thank you for your patience as I am new to this.

[msujew]

Hi @einarhaaland,

Can I keep the projects separate and specify the outfile directory of the language-server-bundle to be in the React project? (Is the language server bundle all that is needed to have monaco use my dsl?)

Yes, that's what I would recommend. For the monaco-component (with the embedded language client) to use your language server, all that's needed is the bundle file. You need to make it available to the worker somehow. The ways in which we are doing this is by either:

1. Bundling the worker file as an artifact of the dsl project and copying it to the public/ folder as part of the build process.
2. Only do the usual TypeScript -> JavaScript transformation in the dsl project and then run esbuild to output the bundle into the public/ folder directly.

I'm sure there are also other ways to accomplish this, but this is what we're currently using in our own projects.