So I've read the articles and came with questions as promised :smile: You mentioned that you wanted ...

# kobweb

[Filip Wiesner]

So I've read the articles and came with questions as promised 😄 You mentioned that you wanted full stack solution but you are focusing on static layouts for now. Maybe this is stupid question but what is the other side of "static site". Server-side rendering? Is that something Kobweb supports? Maybe I need to visit your Readme again 😅

[David Herman]

SSR is something different. You can check out https://github.com/kwebio/kweb-core to see an API in that space!

But by "static layouts" in Kobweb, I mean you don't run a server yourself. Instead, some service provider runs a server on their end, and when you visit a URL, they just match that URL to a static file on their server and send it over.

[David Herman]

If you ran your own Kobweb server, it receives any URL and blindly servers index.html and yoursite.js no matter what the URL is, because the Kobweb framework takes care of translating URLs into what finally gets rendered on the page.

[Filip Wiesner]

Sorry, I feel like it still doesn't click for me 😞 So Kobweb is library for static websites? THE way of distributing Kobweb site is to use provider like Netlify and serve static website, correct?

[Filip Wiesner]

Please be patient with me 😅 I am new to this and web is outside my comfort zone

[David Herman]

Of course! No dumb questions. These back and forths help me understand what I need to document bettter, as well.

[David Herman]

(And I was new to web not too long ago!)

[David Herman]

Fundamentally, Kobweb is flexible here. Static layouts are probably the easiest, but you can run a Kobweb server in the Cloud if you want to kobweb run --env prod and have it serve your files. Or you can even write your own server if you know what you're doing 🙂

[David Herman]

Basically, kobweb export turns your Kobweb project into a bunch of files that need to be served to the user.

[David Herman]

kobweb export by default outputs things in a custom way.
kobweb export --layout static outputs things in a standard way.

[David Herman]

You can actually run the commands yourself and look inside .kobweb/site to see what the outputs look like

[David Herman]

Once you have an index.html file and a yoursite.js file, your job is to get that to any user that visits your site.

[David Herman]

At that point, it will run yoursite.js which will populate the DOM with content, giving the user the illusion they grabbed a site over the internet, when they really grabbed a program that generates a site. Subtle difference.

[Filip Wiesner]

But kobweb server does the same as static site provider - serve the same JS and HTML files for any given URL. Or is there some functional difference?

[David Herman]

Well, you can run a kobweb server in kobweb mode or static mode 🙂

[David Herman]

The latter is mostly for testing your site before you upload it to some third party static hosting provider

[Filip Wiesner]

Yes, this was another pain point. What is the difference and which is used for what 😅

[David Herman]

kobweb run --env prod uses the kobweb format while kobweb run --env prod --layout static uses the static layout

[David Herman]

kobweb run --env dev digs into your build folders for finding content to serve

[David Herman]

I can appreciate it's a lot. For new users, I would say don't worry too much about it -- just iterate with kobweb run to start

[David Herman]

Whenever you're happy with your site and want to share it with the world, that's the moment you have to learn more about exporting.

[David Herman]

(And I agree with you, the docs have to be a lot better here.)

[Filip Wiesner]

Just a side note - when starting new project or using new library, the first thing I would do is go through the whole process of building and distributing it. There is nothing worse than working on a new thing and then realising you can't use it properly. So i would really appreciate your WIP documentation having section about this 🙏

[David Herman]

Noted, thank you!

[David Herman]

I definitely want to have a guide that walks you through creating a site. I'll make sure it is followed up with distributing it.

[David Herman]

By default, I think static layouts are what 99% of users will want.

[Filip Wiesner]

And another note, all CI/CD tools I use work with gradle (habit of Android development) so for me personally I would really appreciate having gradle alternatives to your kobweb tool which I don't really want to install on every CI build

[David Herman]

Yes, there will be a section on using Gradle directly

[Filip Wiesner]

Thank you very much, you saved me a lot of headaches

[David Herman]

My pleasure. Appreciate the questions, it's very helpful!

[Filip Wiesner]

I was struggling a little with colors (couldn't find Color.argb() and was missing the ease of use of 0xFFFF0000 as in Compose for Android) but I succesully deployed first thing 🎉
https://cometes.app

[Filip Wiesner]

Thanks again for your help

[David Herman]

Whoa cool!! Quick work 🙂

[David Herman]

https://github.com/varabyte/kobweb/blob/0a7fbe7baa367684238ef00c3251656f6ccc13a2/f[…]/jsMain/kotlin/com/varabyte/kobweb/compose/ui/graphics/Color.kt you found that eventually?

[David Herman]

What hosting provider are you using?

[Filip Wiesner]

surge.sh because I used it before but I am open to suggestions for alternatives

[David Herman]

I used rgba as that's what they use in the web world but I could probably add argb as well. Is that what Jetpack Compose uses?

[David Herman]

Seems like it! https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#(androidx.compose.ui.graphics.Color).toArgb()

[Filip Wiesner]

Yeah, I found that by peeking into source code and looking for invocations of Rgb constructor :D

[David Herman]

Actually, my rgba(value) method is poorly named, I totally didn't catch that

[David Herman]

I'll deprecate it and push people to using argb instead, good catch

[Filip Wiesner]

I was also confused about the meaning of color. I would expect something like foregroundColor

[Filip Wiesner]

But fortunately documentation came to the rescue

[David Herman]

Yeah

[David Herman]

I originally tried to name things more explicitly, but I realized fighting against the web was impossible

[David Herman]

Especially since by conforming to the names, it means when you find web advice online about how to do X or Y, it's more likely that Kobweb will just translate 1:1

[Filip Wiesner]

Fair enough. I will create my own theme/palette anyways because I am just used to the Material theme world of Android and made the same on iOS 😅

[David Herman]

Good luck! You can definitely use Silk's color mode concept with your own colors. You can also override the Silk theme by using @InitSilk which I believe is actually documented in the README 🙂

[Filip Wiesner]

Yes, I've done that

[David Herman]

Also, if all you want to do is have a website that looks like a mobile app (e.g. like what Flutter is currently doing), be aware that JB is working on an approach to handle that. (The fabled Canvas API, which you may already be aware of)

[Filip Wiesner]

I will share what I'll come up with. I think that a lot of Android devs will look for something similar

[David Herman]

Oh, and re: your hosting provider, I don't have any strong opinions about changing. I'm just glad Kobweb worked correctly for you. I'm worried there's someday going to be a popular hosting service that Kobweb breaks on that for some feature I'm currently blind to.

[David Herman]

Like, GitHub Pages was tricky to get working at first because they host your site starting from a subfolder.

[Filip Wiesner]

Yes, I know about Compose Skia and I've already tried it. But when I am doing native iOS, I thought that I should also make native web.

[David Herman]

You don't have to use Silk in Kobweb. You can remove that dependency and use vanilla Compose for Web, as an option. I believe someone has a Material theme / port of Material widgets out there somewhere.

[David Herman]

Kobweb's widget set is still super light. I'm hoping to fix that in the coming months.

[Filip Wiesner]

Well I lost few hours on Railway hosting I use for my database and backend yesterday :D I tried to use their nginx template but couldn't make it to run. I know a lot of people migrated there after Heroku closed free tier.

[David Herman]

Not too familiar with Railway, I'll try to check it out sometime

[David Herman]

I'm using Firebase myself

[Filip Wiesner]

I am using Firebase for authentication and Crashlytics already so I might as well checkout their hosting options. Thanks for the tip

[David Herman]

WIP: https://github.com/bitspittle/firebase-kotlin-bindings not really ever intending to make this official though

[David Herman]

(No bindings for Crashyltics at this point)

[Filip Wiesner]

Thanks! Will check it out tomorrow. Now it's time for some well deserved sleep.
(Crashlytics are mobile only AFAIK)

[David Herman]

https://github.com/varabyte/kobweb/commit/61958f25ac0f79596dfb6746a9bc04f9a483f7c0 <- Will land in 0.11.12, thanks!

[Filip Wiesner]

Thanks for the firebase bindings 👍 Found typo so I made a PR
./gradlew publishToLocalMaven -> ./gradlew publishToMavenLocal

[David Herman]

Oh thanks! Pulling shortly.

[David Herman]

FYI this is my first attempt at writing a bindings library. I'm probably being a bit aggressive here by writing a whole new layer that delegates to the JS versions under the hood. It lets me write a really clean Kotlin API but I don't know if it's doing it at a signifcant cost to the final JS output.

[David Herman]

Since now for every call into Firebase, it becomes two method calls.

[David Herman]

My hope is that DCE will make this a trivial amount, but I haven't confirmed that yet.

[Filip Wiesner]

I am afraid I won't be able to help you here. I've touched Kotlin/JS just a little back in Kotlin 1.4 so I don't remember a thing 😅

[David Herman]

Since it's experimental for me and I'm just using it for a project that's already kind of large anyway, I don't mind. But I thought I'd issue a potential warning in case anyone wanted to use my code to learn from as if I was any sort of knowledgeable authority 😄

[Filip Wiesner]

Fair enough. I think I'll just use the auth so I don't really mind. But thanks for the warning

[David Herman]

Good luck!