https://kotlinlang.org logo
#kobweb
Title
# kobweb
f

Filip Wiesner

02/27/2023, 7:18 PM
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 😅
d

David Herman

02/27/2023, 8:03 PM
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.
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.
f

Filip Wiesner

02/27/2023, 8:09 PM
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?
Please be patient with me 😅 I am new to this and web is outside my comfort zone
d

David Herman

02/27/2023, 8:11 PM
Of course! No dumb questions. These back and forths help me understand what I need to document bettter, as well.
(And I was new to web not too long ago!)
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 🙂
Basically,
kobweb export
turns your Kobweb project into a bunch of files that need to be served to the user.
kobweb export
by default outputs things in a custom way.
kobweb export --layout static
outputs things in a standard way.
You can actually run the commands yourself and look inside
.kobweb/site
to see what the outputs look like
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.
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.
f

Filip Wiesner

02/27/2023, 8:18 PM
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?
d

David Herman

02/27/2023, 8:19 PM
Well, you can run a kobweb server in kobweb mode or static mode 🙂
The latter is mostly for testing your site before you upload it to some third party static hosting provider
f

Filip Wiesner

02/27/2023, 8:20 PM
Yes, this was another pain point. What is the difference and which is used for what 😅
d

David Herman

02/27/2023, 8:20 PM
kobweb run --env prod
uses the kobweb format while
kobweb run --env prod --layout static
uses the static layout
kobweb run --env dev
digs into your build folders for finding content to serve
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
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.
(And I agree with you, the docs have to be a lot better here.)
f

Filip Wiesner

02/27/2023, 8:23 PM
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 🙏
d

David Herman

02/27/2023, 8:24 PM
Noted, thank you!
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.
By default, I think static layouts are what 99% of users will want.
f

Filip Wiesner

02/27/2023, 8:25 PM
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
d

David Herman

02/27/2023, 8:26 PM
Yes, there will be a section on using Gradle directly
f

Filip Wiesner

02/27/2023, 8:28 PM
Thank you very much, you saved me a lot of headaches
d

David Herman

02/27/2023, 8:28 PM
My pleasure. Appreciate the questions, it's very helpful!
f

Filip Wiesner

02/27/2023, 9:23 PM
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
Thanks again for your help
d

David Herman

02/27/2023, 9:28 PM
Whoa cool!! Quick work 🙂
What hosting provider are you using?
f

Filip Wiesner

02/27/2023, 9:31 PM
surge.sh because I used it before but I am open to suggestions for alternatives
d

David Herman

02/27/2023, 9:31 PM
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?
f

Filip Wiesner

02/27/2023, 9:32 PM
Yeah, I found that by peeking into source code and looking for invocations of Rgb constructor :D
d

David Herman

02/27/2023, 9:37 PM
Actually, my
rgba(value)
method is poorly named, I totally didn't catch that
I'll deprecate it and push people to using
argb
instead, good catch
f

Filip Wiesner

02/27/2023, 9:41 PM
I was also confused about the meaning of
color
. I would expect something like
foregroundColor
But fortunately documentation came to the rescue
d

David Herman

02/27/2023, 9:48 PM
Yeah
I originally tried to name things more explicitly, but I realized fighting against the web was impossible
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
f

Filip Wiesner

02/27/2023, 9:51 PM
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 😅
d

David Herman

02/27/2023, 9:54 PM
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 🙂
f

Filip Wiesner

02/27/2023, 9:55 PM
Yes, I've done that
d

David Herman

02/27/2023, 9:55 PM
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)
f

Filip Wiesner

02/27/2023, 9:56 PM
I will share what I'll come up with. I think that a lot of Android devs will look for something similar
d

David Herman

02/27/2023, 9:56 PM
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.
Like, GitHub Pages was tricky to get working at first because they host your site starting from a subfolder.
f

Filip Wiesner

02/27/2023, 9:57 PM
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.
d

David Herman

02/27/2023, 9:58 PM
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.
Kobweb's widget set is still super light. I'm hoping to fix that in the coming months.
f

Filip Wiesner

02/27/2023, 9:59 PM
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.
d

David Herman

02/27/2023, 10:01 PM
Not too familiar with Railway, I'll try to check it out sometime
I'm using Firebase myself
f

Filip Wiesner

02/27/2023, 10:04 PM
I am using Firebase for authentication and Crashlytics already so I might as well checkout their hosting options. Thanks for the tip
d

David Herman

02/27/2023, 10:04 PM
WIP: https://github.com/bitspittle/firebase-kotlin-bindings not really ever intending to make this official though
(No bindings for Crashyltics at this point)
f

Filip Wiesner

02/27/2023, 10:07 PM
Thanks! Will check it out tomorrow. Now it's time for some well deserved sleep. (Crashlytics are mobile only AFAIK)
d

David Herman

02/27/2023, 10:08 PM
f

Filip Wiesner

03/01/2023, 7:45 PM
Thanks for the firebase bindings 👍 Found typo so I made a PR
./gradlew publishToLocalMaven
->
./gradlew publishToMavenLocal
d

David Herman

03/01/2023, 7:46 PM
Oh thanks! Pulling shortly.
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.
Since now for every call into Firebase, it becomes two method calls.
My hope is that DCE will make this a trivial amount, but I haven't confirmed that yet.
f

Filip Wiesner

03/01/2023, 7:51 PM
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 😅
d

David Herman

03/01/2023, 7:52 PM
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 😄
f

Filip Wiesner

03/01/2023, 7:54 PM
Fair enough. I think I'll just use the
auth
so I don't really mind. But thanks for the warning
d

David Herman

03/01/2023, 7:54 PM
Good luck!
62 Views