Environment Configuration for JavaScript Apps

For traditional server-side web apps, environment-specific configuration is handled in a variety of ways, including environment variables, configuration files or password stores. But a front-end web app running in a framework like React or Vue can’t really use these same techniques since they typically run in the browser, not in the server environment. Yet they still need environment-specific configurations.

Fortunately, this problem can be breached at either build-time or run-time. This session demonstrates techniques for both, allowing you to manage your DevOps pipelines to create environment configurations appropriate to your situation.

Transcript

1. Environment Configuration for JavaScript Apps David Truxall, Ph.D. bit.ly/js-env
2. About Me @davetrux davidtruxall.com bit.ly/js-env spnsurvivors.org
3. Why? Development Production Test Integration Staging Demo UAT Pre-Production
4. Why? • Move an app between environments v Different URLs v Feature flags v Different server names v Different ports v Different keys v Different certificates • DevOps and Automation
5. Files web.config *.plist registry *.ini *.properties *.yaml CONFIG.SYS .zshrc .bash_profile
6. Environment Variables $PATH $JAVA_HOME %APPDATA% $USER $HOSTNAME %TEMP% %SystemRoot% %PROGRAMFILES% $HOME
7. Our Problem It runs on the client….
8. Some Solutions Build Time • .env files • WebPack Run Time • Server injection • Mapped with Docker/Kubernetes • Server-side Rendering (SSR)
9. A word about Secrets Vault credstash Keywhiz Torus Confidant
10. Build Pipeline GitHub Docker Container npm WebPack Jenkins Helm
11. Server or Virtual Machine Site Service DB Site House
12. Docker Container Container Container Container Container Container Container Container Container Apartment Building
13. Kubernetes Container Container Container Container Container Apartment Complex Container Container Container Container Container Container Container Container Container Container Container Main Office
14. Build Time .env Files
15. .env Files .env .env.local .env.[mode] (env.production) .env.[mode].local
16. Demo Using .env files
17. .env files Pros • Built-in plumbing Cons • Managed manually • Changes not propagated • New devs • Ops problem • Environment-specific builds
19. WebPack Basics JS JS JS JS CSS Bundle.css CSS JPG Optimized PNG WebPack Bundle.js PNG Optimized JPG JS
20. WebPack Basics Entry Loaders Plugins Output
21. Demo WebPack-based configuration
22. WebPack Configuration Pros • New team members • Changes propagate • Flexibility • Least moving parts • No deployment steps • Default of 2 environments Cons • Hack-y for React • Manual config or eject • Environment-specific builds -> many images • Information may be in the repo • Default of 2 environments
23. Run-time Server-Side Injection Cluster Injection
24. Server-Side Injection User Request Index.html
25. Demo Server-side Injection
26. Server-Side Injection Pros • New team members • Changes propagate • Management of data • Many environments easier Cons • Node.js vs nginx • Server-side is now code • Server needed for local dev • Hot reloading
27. Kubernetes Check-In Code GitHub Docker Container npm/webpack Exclude file Helm ConfigMap K8s Local file for dev
28. Demo Runtime Injection in Kubernetes
29. K8s Injection Pros • New team members • Changes propagate • Management of data • One Image -> many environments • Local vs server separation Cons • Complexity • Testing locally
30. JavaScript Environment Configuration Build Time • .env files • WebPack Runtime • Server injection • Mapped with Docker/Kubernetes
31. Shameless Plug @davetrux davidtruxall.com bit.ly/js-env spnsurvivors.org