why is the best way to inject a gradle property intokotlin JS code? e.g. for a API key?

# javascript

[Robert Munro]

why is the best way to inject a gradle property intokotlin JS code? e.g. for a API key?

[Big Chungus]

Write it to json file at src/jsMain/resources and then require it in your kotlin code

[jw]

Write it to a source file as a const

[jw]

As a task

[Robert Munro]

@Big Chungus i need it not to be in the source code as its open source? just got got a warning email from google - though its gooing to be available in the website anyway

[Big Chungus]

Writing to source will give you red squiggles in idea

[Robert Munro]

true

[Big Chungus]

//build.gradle.kts
tasks {
  val jsProcessResources by getting(Copy::class) {
    doLast {
      buildDir.resolve("processedResources/js/secrets.json").writeText("""{ "apiKey": "${project.properties["apiKey]}" }""")
    }
  }
}

//src/jsMain/kotlin/index.kt
external fun require(module:String): dynamic
private val API_KEY = require("./secrets.json").apiKey

[Big Chungus]

This way the secrets.json will only ever live in build/processedResources/js , but will still be available for kotlin kompiler, thus making kt code work

[Big Chungus]

JSON files are imported as regular js objects so require("./secrets.json") returns const jsObject = {apiKey: "XXXX"} (that's why you can refer to it by property name on dynamic return

[Big Chungus]

You could also define your json structure with external interface to keep type-safety

external interface Secrets {
  val apiKey: String
}
external fun require(module:String): dynamic
private val secrets: Secrets = require("./secrets.json")
private val API_KEY = secrets.apiKey

[Robert Munro]

do you think i'd have to add a resolve path or something i keep getting Module not found: Error: Can't resolve 'secrets.js' in '/Users/robmunro/repos/sentinel/website/build/js/packages/website/kotlin-dce-dev'

Have plyed with json file as well but no matter what the file name i get the same path in the error. Seems like it's not looking a processedResources

[Big Chungus]

How did you require it in kt code?

[Robert Munro]

so Secrets.kt:

external interface Secrets {
    val SWEBSITE_MAPS_API_KEY: String
}
external fun require(module:String): dynamic
private val secrets: Secrets = require("./secrets.json")
public val SWEBSITE_MAPS_API_KEY = secrets.SWEBSITE_MAPS_API_KEY

gives
Can't resolve '/secrets.json' in '/Users/robmunro/repos/sentinel/website/build/js/packages/website/kotlin-dce'

[Robert Munro]

have tried moving around the secrets.json in the hierarchy a bit e.g. to "processedResources/js/main/secrets.json" (tried lots of diffreent paths) but it always seems to be looking in kotlin-dce

[Big Chungus]

OK, you'll need to add extra paths to webpack via webpack.config.js.d (i'll post instructiuons how later as I'm away from my PC now)

[Robert Munro]

cool thanks!!

[Robert Munro]

if i write it to there it works for now - but my browserProductionWebpack fails

tasks {
    val processResources by getting(Copy::class) {
        doLast {
            buildDir.resolve("js/packages/website/kotlin-dce-dev/secrets.json")
                .writeText("""{"SWEBSITE_MAPS_API_KEY" : "${project.properties["SWEBSITE_MAPS_API_KEY"]}" }""")
        }
    }
}

but it works for now

[Big Chungus]

A bit late but better than never. Here's what you need to do to get processedResources resolved properly. (use processedResources/js/main instead of processedResources/frontend/main). Ignore all the other configs there, that line is the only one you need.

[Robert Munro]

thanks very much ! - Maybe you could give us some pointers on which bits in gradle to configure? 🙃 - I have this at the moment https://github.com/sentinelweb/website/pull/4/commits/6cded10732d78398b5431709445e91bd86f7f7d3 - I dont have very much experience with webpack