Has anyone managed to launch `browserRun` from the new Kotli kotlinlang #javascript

Has anyone managed to launch `browserRun` from the...

Joffrey

07/29/2019, 10:10 PM

Has anyone managed to launch

browserRun

from the new Kotlin/JS gradle plugin? Where am I supposed to place my

index.html

and other static public files? I'm seeing a blank page with the text "Cannot GET /" at the top left-hand corner.

Soren Valle

07/29/2019, 10:12 PM

New to this, so take it with a grain of salt, but this is my config.

Soren Valle

07/29/2019, 10:12 PM

https://gist.github.com/SorenV/fd0cb276cc3b7c204d334c0064170f44

Soren Valle

07/29/2019, 10:13 PM

It works by copying the files to the "web" dir and pointing the configured dev server to that directory.

Soren Valle

07/29/2019, 10:13 PM

set "open" to "true" to have it auto open the browser.

Joffrey

07/29/2019, 10:14 PM

Wow that's great thanks, I'll try to look into this but this will definitely help me a lot

Soren Valle

07/29/2019, 10:14 PM

np, the documentation is lagging

Joffrey

07/29/2019, 10:15 PM

Yes, I'm impatiently waiting for the YouTrack issue about the doc for the new Kotlin/JS plugin to be "solved" 🙂

Soren Valle

07/29/2019, 10:16 PM

Same, you can config webpack and package.json, but not in gradle (much at all)

Soren Valle

07/29/2019, 10:18 PM

you need to drop the config files in /src/package.json.d/anyname.js and src/webpack.config.d/anyname.js

👍 1

Joffrey

07/29/2019, 10:18 PM

Just being able to tell the dev server where to serve is what I was looking for

Joffrey

07/29/2019, 10:19 PM

But indeed if further config is needed, it's good to know where to put it

👍 1

Ilya Goncharov [JB]

07/29/2019, 11:32 PM

@Joffrey if you have

main

function, and your

index.html

is simple and only execute

app.js

, you can use generated HTML page, follow

host/webpack-dev-server

But in case with necessary custom

index.html

you can create it in any place (e.g.

$projectDir/static

), and then you need to set this folder as a

contentBase

in your DevServer like in @Soren Valle gist. Copying seems redundant.

Soren Valle

07/30/2019, 6:47 PM

@Ilya Goncharov [JB] Thank you for commenting. I believe you are correct, but I don't think I understand how to configure it. I figured I needed to copy the files manually from build/ to a common web dir and define my own index.html because the defaults don't seem to work. The default the dev server content base is

Copy code

$projectDir/build/processedResources/Js/main

which does not get generated in the tree, only test/ does. The webpack entry is the same as

Copy code

compileKotlinTask.outputFile.parent

, but the output is

Copy code

$projectDir/build/libs

which also does not get generated, it only has some jars in it. So it seems I'm not privy to some auto-magic behavior I have not yet located. Do you have any advice?

Ilya Goncharov [JB]

07/30/2019, 7:33 PM

@Soren Valle when you run dev server, you can go to

%host%/webpack-dev-server

This page show you information about your generating js bundles, including address to generating bundle (e.g.

%host%/app.js

). In

index.html

you can link on this address (

<script src="/app.js">

). Then you should configure

DevServer

runTask

via

Copy code

devServer = KotlinWebpackConfigWriter.DevServer(contentBase = listOf("%path-to-folder-contains-index.html%"))

Soren Valle

07/30/2019, 11:35 PM

@Ilya Goncharov [JB] Thanks to your help I was able to figure some things out. It turns out if you create an

Copy code

index.html

file in

Copy code

$projectDir/src/main/resources

it copies the files to

Copy code

$projectDir/build/processedResources/Js/main

which is also the default content base of the devServer. From there you can link as needed. I think the WebpackHtmlPlugin might work as well, but I haven't messed with that yet on dev runs. Now to figure out how to get the npm dependencies from including the dev dependencies... Even running dce and Uglify the main bundle was 5mb.

Soren Valle

07/30/2019, 11:36 PM

Also the reason it wasn't generating the files is that webpack dev server serves from memory by default. I didn't know that until today. If you want to see the files you can out put them, but by default it's confusing.

snrostov

08/04/2019, 8:46 AM

Where am I supposed to place my index.html and other static public files?

@Joffrey You can put it in the resource root:

src/main/resources

index.html

should be something like this:

Copy code

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="react-app">Loading...</div>
  <script src="project-name.js"></script>
</body>
</html>

Starting from 1.3.50 wizard will create this file by default. You can try eap: https://discuss.kotlinlang.org/t/kotlin-1-3-50-early-access-preview/13525 Currently only build.gradle supported through. See https://youtrack.jetbrains.com/issue/KT-31953 for more details. There is plan to generate this file automatically behind the scene: https://youtrack.jetbrains.com/issue/KT-31690

snrostov

08/04/2019, 8:48 AM

you need to drop the config files in /src/package.json.d/anyname.js and src/webpack.config.d/anyname.js

@Soren Valle

/src/package.json.d

is not supported yet, only

src/webpack.config.d

Joffrey

08/04/2019, 12:26 PM

@snrostov Thanks, yes I finally found out that the files in

src/main/resources

were copied and served properly (thanks to @Soren Valle's example). Since I didn't want to hardcode the JS filename in

index.html

, I configured

processResources

to inject the JS file name in it. It might be useful to have this feature out of the box :)

👍🏻 1

snrostov

08/04/2019, 12:28 PM

I configured
processResources
to inject the JS file name in it. It might be useful to have this feature out of the box :)

Totally agreed. It is in the plan: https://youtrack.jetbrains.com/issue/KT-31690

❤️ 1

Joffrey

08/04/2019, 12:31 PM

@snrostov It's so nice to see that you guys at JetBrains are working hard to do things right. I'm excited about the new features and impatient to see all this coming to life! Thanks again for all your work!

21 Views

Open in Slack

Previous Next