Best practice how to provide a config variable into javascript from a process environment.

[azachar]

Hello All!
I run into an interesting dilemma, how to provide an environment based configuration variable into a client javascript from a server process environment.

In my case I want to set stripe the publishable key from my hosting, something like

export STRIPE_KEY=BLA

Then after some magic I expect to be able to use this key in my client javascript

Stripe.setPublishableKey('<STRIPE_KEY>');

Is there any good practice?

Initially I thought it would be sufficient to the magic with grunt replace but this is not an option since I need to be able to deploy 1 build into 2 different environments (one staging and one production) without a code change.

Thank you for any suggestions.

Best regards,
Andrej

[andrewstuart]

I'm surprised you wouldn't just handle the transaction server side.

It feels a bit weird to me to send an environment variable to the client, rather than just a config file or database entry if you'll expose it to the client anyway.

If you keep going the client-side route, though, and you want the key to be exposed dynamically, I'd just set up a route that returns the key. Then you can just $http.get that route for the key.

[azachar]

Hi @andrewstuart, thank you for your response. The thing is that, Stripes has 2 parts one is a client part and second is a server part. In order to work with Stripe, you need both.

Honestly I found it bit too much to get a config variable via $http service especially if the server is actually providing a javascript to a client and then the client, would ask the server again for something that the server could send it right away.

Is there any other solution?

Thanks for any suggestions.

[ralyodio]

Make an api call app.get('/config', fn) that returns whatever you need on the client.

[andrewstuart]

You could certainly do some server-side templating of your javascript file to replace the variable values with whatever you want. If you need to use an ENV variable, this is probably your best bet. You can use something like Underscore's templating or a dedicated library like nunjucks.

A build step to replace the variable values in your script would probably be better so that you can serve static JS files and use fewer server resources for something that never changes.

I personally still think an http call provides the best reusability and separation of duties. One of the benefits of building an SPA that relies on an API is that when you're done, you have a full HTTP API (hopefully RESTful) that can be reused for any kind of app (IOS, Android, desktop, whatever). I assume if you'd go that way, you'd need the token on those clients also.

In addition, you have ways to cache the answer client side (localstorage, indexeddb) so that your clients only retrieve it when it's needed.

If round trips are your biggest concern, I can also see creating an aggregate "settings" route by which clients can pull down all the necessary information for them to operate in whatever environment they're in. With proper caching, you can heavily cut down on long-term round trip count, which is the biggest factor to scalability.

[Awk34]

Feel free to open another issue if you still have questions

[elis]

Any tips on creating 'client' configuration inside /config/environment/ that will be used via grunt in the angular app?

[Awk34]

@elis does this discussion help?

[elis]

Actually I was looking for something that could have end dependent variable
not necessarily API keys, but rather API prefix, or other 'non secret'
configuration.

On יום ג׳, 1 בספט׳ 2015 at 20:30 Andrew Koroluk [email protected]
wrote:

@elis https://github.com/elis does this
#1227
discussion help?

—
Reply to this email directly or view it on GitHub
#706 (comment)
.

[azachar]

In the end of the day I made a simple grunt task that does find and replace. All other solutions were just too complicated.

[jrogatis]

I know thats a old question but is for some reason wrong use the dotenv pagkage at client side ?