How can I load assets (png, svg, etc) when using t...

# javascript

[Lawik]

How can I load assets (png, svg, etc) when using the kotlin-frontend plugin? Preferably from the resources folder.

[Lawik]

Right now I have to rely on this which is rather ugly: require("../../../../processedResources/js/main/web/pattern (1).svg")

[napperley]

Where the assets are loaded from heavily depends on the back-end that is used.

[Lawik]

This is a SPA using React.

[Alexander Weickmann]

I use file-loader for this purpose

[Alexander Weickmann]

devDependency("file-loader")

config.module.rules.push(
{
test: /\.(jpg|png)$/,
use: [
'file-loader?name=[name].[ext]'
]
}
);

[Alexander Weickmann]

you still have to require your file like this:
kotlinext.js.require("favicon.png")

[Lawik]

@Alexander Weickmann
I use file-loader too, my question is how to "require" the assets in a nice way within my Kotlin files. Right now I have to provide them like this: kotlinext.js.require("../../../../processedResources/js/main/web/pattern (1).svg"), I want to load my assets the way you just showed (without providing the relative path).

[Alexander Weickmann]

I've got some output-related configurations in my gradle files that I found from different projects

kotlinFrontend {
configure<KotlinFrontendExtension> {
bundle("webpack", delegateClosureOf<WebPackExtension> {
publicPath = "/frontend/"
port = 8080
proxyUrl = "http://localhost:9090"
mode = if (devMode) "development" else "production"
})
}
}

tasks {
"compileKotlin2Js"(Kotlin2JsCompile::class) {
kotlinOptions {
metaInfo = true
outputFile = "${project.buildDir.path}/js/${project.name}.js"
sourceMap = true
sourceMapEmbedSources = "always"
moduleKind = "commonjs"
main = "call"
}
}
}

sourceSets {
getByName("main").output.resourcesDir = file("build/js/resources")
}

tasks.withType<KotlinJsDce> {
dceOptions.devMode = devMode
}

[Alexander Weickmann]

when the app runs on the server, it resolves the files from the /frontend folder, just like the dev server does

we run on docker and this is how I build the image:

RUN mkdir /app
RUN mkdir /app/frontend
COPY backend/build/libs/backend-all.jar /app
COPY frontend/build/bundle/* /app/frontend/

[Alexander Weickmann]

and then it all magically works somehow oO

[Lawik]

I'm guessing this is the part that makes it possible?

sourceSets {
   getByName("main").output.resourcesDir = file("build/js/resources")
}

I'll try it out later, thanks a lot.

[Alexander Weickmann]

yeah I think so. If you look at the generated webpack.config.js, there is this:

"resolve": {
        "modules": [
            "kotlin-js-min/main",
            "js/resources",

so whatever is in js/resources will be resolved by the webpack dev server

[Alexander Weickmann]

but this only does the trick for the webpack dev server used for local development.
- however, when I do a gradle build, the static resources also are copied to frontend/build/bundle
- from there the docker copy picks them up
- and the backend server exposes /frontend as path for static files