babel-plugin-inline-dotenv icon indicating copy to clipboard operation
babel-plugin-inline-dotenv copied to clipboard

Switch between two .env files - for prod and dev

Open superKalo opened this issue 5 years ago • 2 comments

Hi. I've integrated this plugin on my Expo (React Native) project following these steps.

Can you please tell me if it is possible to configure the plugin to use the .env file for development and another file, .env.production, for production?

superKalo avatar Jul 08 '19 10:07 superKalo

cp .env.{staging} .env

Gregoirevda avatar Jul 08 '19 14:07 Gregoirevda

@superKalo In my babel.config.js file I have this:

const fs = require('fs');
const path = require('path');

module.exports = function(api) {
  api.cache(true);

  const envName = process.env.MY_ENV_NAME || 'local';
  const dotEnvPath = path.resolve(__dirname, 'config', `${envName}.env`);
  if (!fs.existsSync(dotEnvPath)) {
    throw new Error(
      `Babel config couldn't find dot env file path: ${dotEnvPath}`,
    );
  }
  console.info(`Loading environment variables from: ${dotEnvPath}`);

  return {
    presets: ['babel-preset-expo'],
    plugins: [['inline-dotenv', { path: dotEnvPath }]],
  };
};

and in package.json I have:

  "scripts": {
    "start": "expo start",
    "start:prod": "MY_ENV_NAME=prod yarn start",
    "start:staging": "MY_ENV_NAME=staging yarn start"
  }

Sometimes the babel config gets cached so you'll need to add --clear to the start command.

aiham avatar Jul 10 '19 16:07 aiham