https://kotlinlang.org logo
Title
с

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

01/14/2022, 6:17 PM
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
1
b

Big Chungus

01/14/2022, 6:21 PM
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
с

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

01/14/2022, 6:37 PM
@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?
b

Big Chungus

01/14/2022, 6:38 PM
Well it depends on what setup you're after. Can you list out some bullet points on what you're trying to achieve?
с

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

01/14/2022, 6:41 PM
@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. :)
b

Big Chungus

01/14/2022, 6:41 PM
Do you want them both hosted together or would you like your frontend to be hosted standalone
с

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

01/14/2022, 6:43 PM
Depends, what do I get with each approach? 🤔 Btw, thank you for answering all my questions 🙏
b

Big Chungus

01/14/2022, 7:11 PM
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.
👍 1
Also get familiar with gradle module basics if you aren't already 😉
💯 1
с

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

01/14/2022, 8:53 PM
@Big Chungus I want them to be hosted together. :)
b

Big Chungus

01/14/2022, 8:55 PM
Allright, then you'll need your ktor server to also serve your compose app as static resources
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.
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
с

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

01/14/2022, 8:58 PM
I would also like to support Android as well
But android will be inside an Android Studio
and not inside Intelij IDEA
b

Big Chungus

01/14/2022, 8:58 PM
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
Android studio vs intellij is irrelevant here. Those are just IDEs, you want your project setup with gradle either way
с

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

01/14/2022, 8:59 PM
Yep
Now my question about sourceSets, I need to declare them manually inside a gradle file?
b

Big Chungus

01/14/2022, 9:00 PM
Ok then go for three module approach - shared, server & client (just like in my example above)
👍 1
с

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

01/14/2022, 9:01 PM
Yeah, that seems cleaner
b

Big Chungus

01/14/2022, 9:06 PM
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
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
Good luck!
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)
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.
с

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

01/14/2022, 9:36 PM
@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! 🙌
b

Big Chungus

01/14/2022, 9:37 PM
Let me know how you get on eventually
👍 1
m

martmists

01/14/2022, 9:41 PM
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
с

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

01/14/2022, 9:48 PM
@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. 🙃
b

Big Chungus

01/14/2022, 9:50 PM
There's some (but not many)
d

David Herman

01/16/2022, 12:02 AM
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.
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.
(It currently uses ktor on the backend but that's invisible to you)
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.