https://kotlinlang.org logo
#compose-web
Title
# compose-web
l

Leandro Borges Ferreira

10/09/2023, 10:13 PM
hello folks. I'm trying to create a hello world with compose-web... But without luck so far. I have a small module for a web app together with an android and desktop app. I create create a hello world with this:
Copy code
fun main() {
    document.body?.appendText("Hello, world JS!")
}
But when I try this:
Copy code
fun main() {
    onWasmReady {
        Window {
            Box(modifier = Modifier.fillMaxSize()) {
                Text("Hello, world JS!", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}
I get a blank page... nothing happens =|. Does anyone knows what this could be? Did anyone have this problem before?
p

Pablichjenkov

10/09/2023, 10:17 PM
You have to place a canvas in the dom. Check the official examples how is done https://github.com/JetBrains/compose-multiplatform/tree/master/examples
l

Leandro Borges Ferreira

10/09/2023, 10:35 PM
🤔 I read a bit the bird example. I see that they use
renderComposable
with the id of a div as the parameter. But when I do this:
Copy code
renderComposable(rootElementId = "root") {
        Box(modifier = Modifier.fillMaxSize()) {
            Text("Hello, world JS!", modifier = Modifier.align(Alignment.Center))
        }
    }
And this:
Copy code
[...]
<body>
<div id="root"></div>
<script src="webApp.js"> </script>
</body>
</html>
I get the same thing... Okay, maybe I'm a super noob web developer (I'm a android dev, not web =|), but shouldn't this work? That's what i see in the sample
p

Pablichjenkov

10/09/2023, 11:11 PM
I think you are mixing
compose-web
and
compose-html
. You probably want the second but you mentioned
compose-web
. In any case, just find the proper example, clone it and make sure it works. Then build on top of that. Without code and the project is hard to see what could be wrong
l

Leandro Borges Ferreira

10/09/2023, 11:53 PM
You're right @Pablichjenkov. Checking the example and coping that did the trick. I copied one example and it is working now. Thanks for help =]
👍 1
20 Views