Hello, I have been dabbling with some KotlinJS and...

# javascript

[Stan van der Bend]

Hello, I have been dabbling with some KotlinJS and would appreciate if someone could answer some of my questions and give some tips + tricks.

My Project structure.
1. MP project (called: api ): contains common code (data models) and a Ktor client for JS and JVM targets
2. Ktor server (called: backend): depends on project api and serves content from project api at routes (Ktor resources defined in project api)
3. Nuxt + Vue frontend (called: web-frontend): a website where users can login to their account, see hiscores, make purchases, etc..
4. A Desktop App (called: game-launcher): a JVM app where users can login to their account and launch the game, make purchases, etc..
My goals:
1. Define data models in project api that I can use in projects web-frontend and game-launcher
2. Define a Ktor HTTP client for JS and JVM targets that can interact with project backend
My questions:
1. How should I handle the JS distribution of project api?
2. How should I install the JS distribution in project web-frontend?
3. How should I use the JS distribution in project web-frontend?
• How do I import it?
• Can I use it in typescript?
What I have tried:
I have tried various configurations now, kind of hopping all over the slack + internet + github to see if anything just works but am failing. If people can give me some suggestions I will try it and post my progress with it in this thread.

[Edoardo Luppi]

As far as I understand from your description, the API project should be of type binaries.library() and it should target browser(). It should also specify generateTypeScriptDefinitions() so that @JsExport-ed interfaces or classes are correctly visible from JS/TS and TS types are outputted.

How should I install the JS distribution

How do I import it?

Using an top-level npm/yarn/pnpm workspace, pointing packages discovery to where the K/JS API distribution is outputted. You can then declare a dependency on it, as you'd do for any npm package, in your Vue side.