https://kotlinlang.org logo
Join Slack
Powered by
So I've read the articles and came with questions ...
# kobweb
f
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
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
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
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
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
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
Yes, this was another pain point. What is the difference and which is used for what 😅
d
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
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
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
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
Yes, there will be a section on using Gradle directly
f
Thank you very much, you saved me a lot of headaches
d
My pleasure. Appreciate the questions, it's very helpful!
f
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
Whoa cool!! Quick work 🙂
What hosting provider are you using?
f
surge.sh because I used it before but I am open to suggestions for alternatives
d
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
Yeah, I found that by peeking into source code and looking for invocations of Rgb constructor :D
d
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
I was also confused about the meaning of 
color
. I would expect something like 
foregroundColor
But fortunately documentation came to the rescue
d
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
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
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
Yes, I've done that
d
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
I will share what I'll come up with. I think that a lot of Android devs will look for something similar
d
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
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
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
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
Not too familiar with Railway, I'll try to check it out sometime
I'm using Firebase myself
f
I am using Firebase for authentication and Crashlytics already so I might as well checkout their hosting options. Thanks for the tip
d
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
Thanks! Will check it out tomorrow. Now it's time for some well deserved sleep. (Crashlytics are mobile only AFAIK)
d
f
Thanks for the firebase bindings 👍 Found typo so I made a PR 
./gradlew publishToLocalMaven
-> 
./gradlew publishToMavenLocal
d
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
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
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
Fair enough. I think I'll just use the 
auth
so I don't really mind. But thanks for the warning
d
Good luck!
80 Views
Open in Slack
PreviousNext
Powered by