How do I use node modules in ktor, serve them up? ...

# ktor

[Gunslingor]

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]

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]

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]

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]

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]

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]

implementation(npm("grapesjs"))

Webpack breaks when I don't have this.

[Gunslingor]

Because of this:

@JsModule("grapesjs")
@JsNonModule
external object Grapes {
    //var getComponents: Function<Array<Components>>
    fun init(param: GrapesInit)
    var getComponents: Array<Component>
    var Modal: Modal
}

[Gunslingor]

Does my confusion make sense now?

[Gunslingor]

So confusing, no idea what's expected, docs aren't clear... what am I missing?

[Gunslingor]

Also tried to serve up this demo page from the resources folder and failed. https://grapesjs.com/demo.html

[Gunslingor]

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]

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]

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]

"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: https://grapesjs.com/docs/getting-started.html#import-the-library

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, https://grapesjs.com/demo.html. 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]

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]

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]

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

[andylamax]

Which version of kotlin are you using?

[Gunslingor]

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]

I'll try to upgradee again

[Gunslingor]

soon

[andylamax]

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]

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]

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]

backend is server frontend is client, htmlcssjs

[Gunslingor]

ktor does most of what I need there

[Gunslingor]

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