environment variables in babel.config.js

Question

We need to modify certain configuration/variables in our React Native app (built using Expo) depending on environment (local/dev/staging/production). I've looked at a number of libraries meant for this purpose but all seem to have a flaw that breaks for our use case:

• dotenv (breaks because it tries to access 'fs' at runtime, when it's no longer available since it's not pure JS package and can't be bundled by Expo)
• react-native-config (can't use it with Expo because it needs native code as part of the plugin)
• react-native-dotenv (kinda works but caches config internally and ignores any .env changes until the file importing the variable is modified)

As a cleaner alternative that does not require third party plugins, I'm considering using babel's env option and just listing all of the environments as separate json objects within babel.config.js . I'm not seeing much documentation or examples on this, however. Do I just add env field at the same level as presets and plugins that contains production , development , etc. fields as in example below:

module.exports = (api) => {
    api.cache(true);
    return {
        presets: [...],
        env: {
            development: {
                CONFIG_VAR: 'foo'
            },
            production: {
                CONFIG_VAR: 'bar'
            }
        }
    }
}

Would that work? And how would I access this CONFIG_VAR later in the code?

Answer 1

I just ran into the same issues when trying to setup environment variables in my Expo project. I have used babel-plugin-inline-dotenv for this.

1. Install the plugin

    npm install babel-plugin-inline-dotenv

2. Include the plugin and the path to the .env file in your babel.config.js file

 module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], env: { production: { plugins: [["inline-dotenv",{ path: '.env.production' }]] }, development: { plugins: [["inline-dotenv",{ path: '.env.development' }]] } } }; };

3. In your .env.production or .env.development files add environment variables like this:

    API_KEY='<YOUR_API_KEY>'

4. Later in your code you can access the above variable like this:

    process.env.API_KEY

To access your env variables within the babel.config.js file, use the dotenv package like this:

   require('dotenv').config({ path: './.env.development' })
   console.log('API_KEY: ' + process.env.API_KEY)

   module.exports = function() {
   // ...
   }