Does anyone have a good setup/architecture for ena...

# javascript

[Marc Knaup]

Does anyone have a good setup/architecture for enabling different environments?

Let’s say I have three environments live, test and dev.
In each environment I’d like to use different configuration values, for example a different API URL.
So basically I’d have three .kt files with different values each and depending on what I’d like to build/deploy I need a different one of these to be used 🤔

Ideally the values are provided when starting the server (e.g. webpack dev server) so that they can depend on environment variables (e.g. on Heroku).

[turansky]

I have similar open question.
Current plan - use DefinePlugin
Dynamic webpack configuration by webpack plugin

[Marc Knaup]

I don’t want to use that because I’d like to resolve the configuration after the JS project was built.

[Big Chungus]

Have a look at this

[Big Chungus]

I also have application.env on npmjs for js/ts projects specifically.

[Marc Knaup]

@Big Chungus thanks, that’s along the lines I’m thinking 🙂

[Marc Knaup]

I’ll work on a simpler solution though. No env vars in actual web code and and no JS lib dependencies.

[Big Chungus]

Well the idea is .env file, not necessarily your actual env variables

[Marc Knaup]

More like this:

import kotlinx.browser.*


public external interface Configuration {

	public val publicApiUrl: String
}


public val configuration: Configuration =
	window.asDynamic().appConfiguration.unsafeCast<Configuration>()

[Marc Knaup]

The defining side is more tricky 🙂

[Big Chungus]

Is this too "bloated" still for you? (example from kamp)

external interface AppEnv {
  val API_URL: String
}

inline val Window.env: AppEnv
  get() = asDynamic().env.unsafeCast<AppEnv>()

suspend fun loadEnv(): AppEnv {
  val env: AppEnv = fetch("/application.env").await().text().await()
    .split("\n")
    .filter(String::isNotBlank)
    .joinToString(",", "{", "}") {
      val (key, value) = it.split("=", limit = 2).let { c ->
        c[0] to c[1]
      }
      "\"$key\": \"$value\""
    }.let(JSON::parse)
  window.asDynamic().env = env
  requireNotNull(window.env.API_URL)
  return env
}

[Marc Knaup]

Yes, fetch request is unacceptable.

[Marc Knaup]

It needs to be there without network request

[Big Chungus]

But then you're forced to code env values at buildtime

[Marc Knaup]

Not really

[Big Chungus]

You basically cannot have an env ambiguous bundle

[Marc Knaup]

Someone serves the index HTML file. It can be injected there.

[Marc Knaup]

The index file needs to be dynamic anyway for security.

[Big Chungus]

What like via?

<script>
window.env={}
</script>

[Marc Knaup]

Yes

[Big Chungus]

But then you still need to have multiple index.html files built at compile-time

[Marc Knaup]

No, the index.html is a template and built on-the-fly for each request.

[Marc Knaup]

I deploy to Cloudflare Workers.
The worker simply injects dynamic parts on the fly.

[Marc Knaup]

Like security nonce and - to be done - configuration.

[Big Chungus]

Ah, got it. Didn't realise we're talking about SSR app

[Marc Knaup]

Yeah there doesn’t seem to be a good static solution if you want to make use of security nonce 🤷‍♂️

[Marc Knaup]

And the code generating the index.html on the fly is also Kotlin/JS, running on Cloudflare 😄

[Marc Knaup]

So I can re-use the Configuration definition on the service side to make it type-safe.

[Marc Knaup]

Just not sure yet how.

[Big Chungus]

class Configuration(
  val prop1: String,
  val prop2:Int
) {
  override fun toString() = """{
    prop1:"$prop1",
    prop2:$prop2,
  }"""
}
val html = """
  <script>
    window.env=$configuration
  </script>
"""

?

[Marc Knaup]

That seems very unsafe 😅
And I have an unnecessary class definition and JSON generating code in the web project. But I only need that for deployment/running.

[Big Chungus]

Well this is part of your "backend" that's serving index.html

[Marc Knaup]

But then it’s no longer typesafe

[Big Chungus]

it is, since that class is in commonMain

[Marc Knaup]

I need the external interface Configuration in the web project.

[Marc Knaup]

And only the JSON generating part in the deployment.

[Marc Knaup]

I could use kotlinx-serialization and just “assume” that the generated JSON is perfectly valid for the external interface which doesn’t use kotlinx-serialization.