I work on a single page Elm app at work. We run the app locally while developing it, on a staging server, and in production. With this, we have different servers and API keys we use in each environment. Up until now, we’ve been passing these values into the app with flags and storing it in Main's model. This got kind of frustrating because have 30+ pages and we have to pass the server URL to every page’s init and update function along with various API keys depending on the page.
I wanted to refer to these values like regular variables, but since they were passed in as flags at runtime, we couldn’t. To do this, I wrote a tool that allows you to specify environment variables and generate an Elm file with those values so you can access them anytime, anywhere in the program. We use elm-graphql as well so I just added this tool to our pre-build process and it worked like a charm. I thought it may be helpful to others in the community, so I moved it to it’s own package and published it!
Thank you for this. Would you mind explaining a bit more about how it works. I’m just a hobby developer and a bit lost with this kind of thing. If we use this package to generate an Elm file with the keys in, wouldn’t that mean the keys will appear somewhere in the JS file that they generate? How would this work in production?
Sorry if this is a silly question. Your patience is appreciated.
If we use this package to generate an Elm file with the keys in, wouldn’t that mean the keys will appear somewhere in the JS file that they generate?
Yes, whatever you specify will end up in your JS bundle. This is fine for things like your server’s URL but can concerning for things like a API keys. Some general advice if you want to use this tool to store API keys and the like are:
Don’t check the generated constants file into your version control, instead list it in .gitignore
Restrict the API keys to only have access to the services that it uses
Restrict the API keys to only accept request from certain websites, IP addresses, etc
In the case of using a google API key, they have a whole list of recommendations on how to keep your keys as secure as possible here.
How would this work in production?
Pretty much the same! Since this is based on environment variables and since you shouldn’t keep the constants file in version control, you can generate the constants file before you build your app. You could do something like elm-constants && elm make src/Main.elm, so that you re-generate the constants file before every build. That way when you build in your development environment it’ll generate a file pointing to your dev sever with your dev API keys, when you build in staging, it’ll generate a file pointing to our staging server with your staging API keys, etc.
I do the same with a pair of