search

electrode-io / electrode-confippet

node.js environment aware application configuration
Other
108 stars 18 forks source link

Can the config settings be used client-side in an isomorphic/universal electrode app? #12

Closed mypark closed 7 years ago

mypark commented 7 years ago

I'd like to pass in some config variables to the react components as well - is there any way to use or pass it in to the client components as well? I suppose I can pass it in as initial state into a redux store, but is there a better way?

wmertens commented 7 years ago

No, the problem is that it reads everything from files that are not visible via a require tree, and you can't load files in the browser. Client builds work by following the dependencies only.

So your initial state workaround is good, although just putting the config in a global seems like a better idea. That way you can read it without needing connect()

Thanks to your question, thinking more about it, the biggest issue is that you need to read the config dir to see what things to load. If you knew exactly which files you need, you can just require() them, and they would be part of the runtime.

Webpack can't help you with that, but it will let you try to load missing modules (it hardcodes an error, and you can put that in a try block). It can even infer computed requires, so in theory it would be possible to just

let envConf
try { envConf = require(`./config/${process.env.NODE_ENV}`) }
catch () {}

and so on, for each configurable thing.

The really cool thing would be then that the config becomes hot-reloadable and easy to understand for new programmers, it's just code. If not running under webpack, you can register handlers so you can require YAML or JSON5, that's not a problem.

However, this requires a bunch of boilerplate, because you can't require app-things from a module.

Maybe there is a way to preload the dependencies in webpack so that a module can just load app-config/default and so on? Hmmm. Food for thought.

wmertens commented 7 years ago

I ended up creating a __CONFIG__ setting that I populate using templates and then provide into the app bundle with Webpack's DefinePlugin.

jchip commented 7 years ago

@wmertens is right, confippet is only for server side.

In the WML internal parts of Electrode, we actually have a isomorphic module plus a Hapi plugin that transfers a section called uiConfig from the app's config composed by confippet and injects it into the HTML as window.__wml.config