Hi there people, I'm glad to be here. Few days ago...

# compose-web

[Стефан Јовановић]

Hi there people, I'm glad to be here. Few days ago I've started reading about Compose for Web, and to be honest I immediately got some ideas for my future projects where I can explore it furthermore! 🙂

Now I also have few questions. I want to create a project with Ktor as a back-end server and Compose Web for front-end. Now I'm having troubles setting up the basic project manually in Intelij IDEA. Can someone provide me some maybe useful resource where I can read more about it, or even explain it to me here. Is there any kind of template for creating that project which includes Ktor and Compose Web, like we have it on start.ktor.io (Even tho it would be even better to be able to generate that kind of project directly inside Intelij IDEA, and not externally like that) :D

[Big Chungus]

Here's an example of ktor server and compose-web frontend that can be hosted both, standalone and embedded into ktor server https://github.com/mpetuska/kamp/tree/feature/compose/app

[Стефан Јовановић]

@Big Chungus Thanks for the repository. I've checked the code, and there are many things that I'm not familiar with. For example inside a gradle build file I'm not sure what all those blocks actually mean, if I were to create a blank template, I would have to add those things manually, even tho I don't know what each block means. That's the main problem for me atm. Is there are resource that can help me with that, or it's still early for well documented text?

[Big Chungus]

Well it depends on what setup you're after. Can you list out some bullet points on what you're trying to achieve?

[Стефан Јовановић]

@Big Chungus Well I was planning to start with a simple project like, having a simple web page designed with Compose Web, and a backend server, where I would get the data and display it inside that page. So for example, reading the data from the server, and displaying it on the page. Ktor + Compose Web. :)

[Big Chungus]

Do you want them both hosted together or would you like your frontend to be hosted standalone

[Стефан Јовановић]

Depends, what do I get with each approach? 🤔
Btw, thank you for answering all my questions 🙏

[Big Chungus]

This decision is not language-specific, so google around and ping me back once you've made it. We can discuss gradle setup from there.

[Big Chungus]

Also get familiar with gradle module basics if you aren't already 😉

[Стефан Јовановић]

@Big Chungus I want them to be hosted together. :)

[Big Chungus]

Allright, then you'll need your ktor server to also serve your compose app as static resources

[Big Chungus]

Basic setup for that would be to either have three modules (shared, backend, frontend) or a single KMP module, where JS target is the frontend and JVM target is the backend.

[Big Chungus]

The downside of the latter is that it prevents you from extending your client to also have a desktop or android app in the future

[Стефан Јовановић]

I would also like to support Android as well

[Стефан Јовановић]

But android will be inside an Android Studio

[Стефан Јовановић]

and not inside Intelij IDEA

[Big Chungus]

But for simplicity, let's assume you go with single module. In that case you want KMP setup to have js and jvm targets, which will give you three main sourceSets - commonMain, jsMain and jvmMain

[Big Chungus]

Android studio vs intellij is irrelevant here. Those are just IDEs, you want your project setup with gradle either way

[Стефан Јовановић]

Yep

[Стефан Јовановић]

Now my question about sourceSets, I need to declare them manually inside a gradle file?

[Big Chungus]

Ok then go for three module approach - shared, server & client (just like in my example above)

[Стефан Јовановић]

Yeah, that seems cleaner

[Big Chungus]

Here are key bits to note:
• This obtains a reference to JS output from client module so that it could be embedded into server module output (fat-jar)
• This creates a run task supporting KTOR's hot-reload for local development
• This adds js bundle output file location is added to the classpath, so that they could be picked up from outside the jar when running in dev-mode (better hot-reload)
• This is where JS output is actually embedded into the server fat-jar
• And finally, here both possible places for JS static resources are registered as static resources that ktor will be serving
• Oh and this configures the actual hot-reload

[Big Chungus]

Then on the client module:
• This configures kotlin.js plugin to produce executables
• This changes where final distribution will be placed so it's fixed and can be relied on by the server module
• This configures webpack dev-server to proxy all requests to the locally running server (to make use of webpack hot-reload when working on the frontend only)
• This expands js output file name into index.html template here

[Big Chungus]

Good luck!

[Big Chungus]

The idea with this separation is that you can then add jvm and android targets to client module and share some common client logic between them.

Code sharing between client and server modules happens in another module entirely, which is then simply added as a dependency to both (like here and here)

[Big Chungus]

With this setup, once you build server module, it spits out a single jar which is self-contained and can be executed with java -jar my-app.jar, serving both, REST endpoints as well as your frontend.

[Стефан Јовановић]

@Big Chungus Wow, thank you for the detailed answer, I'll be sure to bookmark all of this! Also I'm so excited to work on it! 🙌

[Big Chungus]

Let me know how you get on eventually

[martmists]

If you hit any walls feel free to let us know, I've started to get the hang of this slightly strange setup as well

[Стефан Јовановић]

@martmists Yeah, but since it's new, I guess we can expect to see at least some more documentation about it in the future, and maybe even some improvements when it comes to project setup. 🙃

[Big Chungus]

There's some (but not many)

[David Herman]

Depending on how simple your server needs are, you may want to check out my project, Kobweb, which makes it a breeze to define server API routes.

[David Herman]

For example, by simply annotating a method, say, @Api fun login(ctx: ApiContext), I automatically generate <http://yoursite.com/api/login|yoursite.com/api/login> which can take query parameters and handle post/get/update/etc. verbs.

[David Herman]

(It currently uses ktor on the backend but that's invisible to you)

[David Herman]

Re: generating a ktor project inside IntelliJ, there's an official plugin which does this, but at some point in the last year it became paid. Using the ktor generate site is the free version.