How do I use node modules in ktor serve them up Like instead

Question

How do I use node modules in ktor serve them up Like instead of this ``` link libs package css somepackage min css stylesheet ``` which would be referencing stuff in the resources folder how do you do something like ``` link npm something ``` I haven t really been able to figure out this node thing

Gunslingor · Answer

```implementation npm grapesjs ``` works in my front end I guess somehow all I know is I still need grapejs in resources which seems odd

andylamax · Answer

ktor server is purely `jvm` trying to add `npm` deps there wont work You are literally trying to serve your applications with both the `jvm` and `node` environment Though it is achievable I do not advice

andylamax · Answer

If you need your ktor to generate a page with link to `grapesjs` download `grapesjs` locally and serve it from your `ktor` server or use the `CDN` i e link <https cdnjs cloudflare com ajax libs grapesjs 0 16 18 grapes min js>

andylamax · Answer

To successfully serve static assets i e css and js files make sure to configure static assets routes as instructed here <https ktor io samples feature static html>

Gunslingor · Answer

Okay that s what I did so all my my css and js type libs are in resources and ktor can server them up just fine I think usually But then there is implementation npm Am I not supposed to use that What s it for So resources is where the libs should live

Gunslingor · Answer

```implementation npm grapesjs ``` Webpack breaks when I don t have this

Gunslingor · Answer

Because of this ``` JsModule grapesjs JsNonModule external object Grapes var getComponents Function lt Array lt Components gt gt fun init param GrapesInit var getComponents Array lt Component gt var Modal Modal ```

Gunslingor · Answer

Does my confusion make sense now

Gunslingor · Answer

So confusing no idea what s expected docs aren t clear what am I missing

Gunslingor · Answer

Also tried to serve up this demo page from the resources folder and failed <https grapesjs com demo html>

Gunslingor · Answer

Then I was trying to use this thing which seems to rely on npm I have no idea <https github com artf grapesjs preset webpage>

Gunslingor · Answer

Really about to give up on kotlinJS CSS HTML CSS doesn t need to be this strongly typed HTML and CSS in functions would be nice but I find I find I spend a lot of time just troubleshooting I d love to replace JS with kotlin but there needs to be better js lib integration or something

andylamax · Answer

I fully don t get what you are trying to accomplish If you are using ktor to deliver your html you are going with the server side content approach You are using ktor to generate your html and also will serve your css and js all together If this is the case the code you wan t to write with kotlin js has to be compiled to the ktor resources and be included as you would include other js resources if you are using kotlin js to render your dom The you don t even need ktor to serve the resources Coz kotlin js together with webpack can be used to create a good js and bundle up all your assests and you can serve them using any server not just ktor But if you intend to use ktor as a server it should deliver all your bundled content from webpack s output But to understand your case fully maybe you should say what you are trying to accomplish is it a SPA is it just static html with some `javascript` in it Forgive me if I miss something

Gunslingor · Answer

But if you intend to use ktor as a server it should deliver all your bundled content from webpack s output That does answer my main query should my dev prod servers be serving up three js from node or from resources resources I suspected so This confused me implementation npm three that still seems to be required for the JsModule NonModule annotations but I m think that s all I end up using node for I don t really use node What am I trying to accomplish I guess I was trying to do the opposite serve node modules and limit resources to just img files and such I still don t really understand why I need npm without it webpack fails Edit now I m trying to understand why kotlin js still needs that npm function thingy inorder to allow me to create external functions to grapejs while at the same time I know I ll ALSO need to interface with to grapejs with pure JS not kotlin and really have no idea how that should be setup considering tooling optimizing etc Does it just go in resources Even though it s like 40k lines of frontend angularJS type code To clarify I think the only other options are to convert it to KotlinJS manually plop it in as a string ugly or something else I was trying to import it as a file but that seemed like a hard road with a lake at the end metaphorically speaking Where I am coming from old engineer coming around too the new tooling the last few 2 years ago I d do angular and server programming with notepad++ type tools it is still faster to compile obviously lol Anyway I KNOW JS I feel I m slightly above a novice for Kotlin maybe more but JS in this environment I do not know KotlinJS Ktor gradle kts IDEA effectively I ve been skyrocketing my skills but I feel I have to leap frog over some stuff learn the newest of the new new EDIT even more detail I m actually trying to follow along and implement this in my KotlinJS frontend My current approach is external interfaces but it s turning out to be a ton of work and things aren t necessarily working as well as their demos So I wanna be able to serve up that demo and add to it treat it like a block of content while I am programming in my Kotlin JS but it s got HTML CSS JS probably needs to be picked apart a bit

Gunslingor · Answer

Also wondering if I do manage to use it as a block whether I can group my js code resources under a package subfolders or something cause this grapejs stuff is 1 1000 of the code

Gunslingor · Answer

I was trying to write EVERYTHING in kotlin but I think I wanna backtrack writing css with kotlinx really sucks there is a reason css isnt strongly typed this is it lol I wanted to be able to still use css in my kotlinjs apps from css files but found no examples of the right way any of this make sense Might not

Gunslingor · Answer

Yeah so even with gradle you have to manage versioning of JS files manually still don t understand why

andylamax · Answer

Which version of kotlin are you using

Gunslingor · Answer

presently 1 3 72 I tried to upgrade but think I have to wait for my kotlin css package to catch up or use something else

Gunslingor · Answer

I ll try to upgradee again

Gunslingor · Answer

soon

andylamax · Answer

I think I fully understand what you are trying to accomplish Although I can tell all you need is `kotlin js` what are you using `ktor` for

andylamax · Answer

Looks like all you need is `kotlin js` I can help you setup using typed css with `kotlin css` or `kotlin styled` Configure webpack and what not FYI I am also still on 1 3 72

Gunslingor · Answer

ktor is part of backend kotlinJS is front end both of these are gradle subprojects I pulled out multiplatform plugin hated it not needed The backend will include ktor WebServer any active content will be served from here like all kotlinJS obviously But there will be a rest API for interfacing with external systems like tablue and exposed for DB interactions custom Java package for OPC interactions etc it will be big

Gunslingor · Answer

backend is server frontend is client htmlcssjs

Gunslingor · Answer

ktor does most of what I need there

Gunslingor · Answer

Really in environment setup mode learning how to do stuff efficiently I will need to do 1000 times