How to manage react-native .env variables with PhpStorm Run/Debug Configuration?

Question

I am using PhpStorm and trying to automate the run with specific env variable. Managing .env variables for dev, staging, prod is very time saving and safe. So when I run set ENVFILE=.env.staging && react-native run-android from terminal, it picks the .env.staging variables but then I am not able to debug react-native app from PhpStorm. I am using react-native-config package.

When I run with this config it always picks from .env file.

Then I tried to run with package.json scripts like

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "android-dev": "set ENVFILE=.env.staging",
    "android-staging": "set ENVFILE=.env.staging && react-native run-android",
    "android-prod": "set ENVFILE=.env.prod && react-native run-android",
    "build-android-prod": "set ENVFILE=.env.prod && cd android && ./gradlew assembleRelease && cd .."
  }

Although it opens the debug tab when I run debug with PhpStorm debug, but it was not showing debug variables.

So what I want is that clicking the Run/Debug choose the correct .env file and I will able to debug React Native app from PhpStorm.

Answer 1

You can create separate run configurations with appropriate names for dev , staging and prod , setting the corresponding environment variables ( ENVFILE=.env.staging , ENVFILE=.env.prod and ENVFILE=.env.dev ) in Environmentvariables: field of each of them, like: