Skip to content

Environment Variables

Antony Budianto edited this page Sep 25, 2016 · 9 revisions

As a developer who works with many environments, like local machine, your teammate's machine, staging, QA, or production, you need to make sure that changing app's config won't breaks other environments. The usual way is to have environment variables which varies between environments.

It's one of The Twelve-Factor App and I tried to adapt it as much as possible since some aren't applicable for client-side app.

The usual use cases:

  • Staging server uses stag-api.domain.com where Production server uses api.domain.com
  • My local machine uses localhost where my teammate's machine uses api.domain.dev
  • PORT differences

The starter supports dotenv environment variables

❔ How it works

It works by reading your .env located at project root and send it to process.env which Webpack will process

⭐ Advantages

  • Independently managed by each environment, resulting Scalable environment config (No file that groups every environments)

ℹ️ Getting started

  1. Create .env file or Copy one from .env.example
  2. Access the variable from process.env.<YOUR_VAR>

⚠️ Warning

  • Since this is client-side environment variables, DON'T STORE SENSITIVE INFORMATION like your api tokens, secret keys, or other variables that should be kept secret on server-side
  • This is why you can commit env.<environment>.json to source control since it should only contains non-sensitive environment values.

  • The whole Environment Variable is also optional, you can just ignore to create .env

⭐ Support this starter by giving stars, sharing to your friends, or contributing

Clone this wiki locally