Vscode-react-native: Set Environment Variable when running

[timscott]

Actual Behavior

1. No way to set environment variable, or it's not documented.

Expected Behavior

1. Can set environment variable. One way would be to set a custom launch command to be like MY_VAR=foo react-native run-ios

NOTE: We're using this specify an environment specific .env file used by react-native-config.

Software versions

• React-Native VS Code extension version: 0.4.4
• VSCode version: 1.17.2
• OS platform and version: 10.11.6
• NodeJS version: 8.5.0
• React Native version: 0.48.4

[jwargo]

Can you elaborate a little here? What do you want to be able to do? How do you want to be able to do it? It feels like some details are missing here.

[timscott]

We are using react-native-config to set environment specific variables. Among other things, we are using it to set the host for api calls in dev. Localhost is addressed differently with different simulator/emulators. In android emulator it's 10.0.2.2. In GenyMotion it's 10.0.3.2. In the iOS simulator, it's localhost.

react-native-config uses ENVFILE environment variable to pick up the correct .env file. To illustrate, here are some of the scripts we use:

"scripts": {
  "ios": "ENVFILE=etc/dev.ios.env react-native run-ios",
  "android": "ENVFILE=etc/dev.android.env react-native run-android",
  "geny": "ENVFILE=etc/dev.genymotion.env react-native run-android"
}

There are probably other ways we can handle this using the variant switch, but I would expect that a debug runner might allow customizing the execute command for more flexibility.

[waltermvp]

@timscott @jwargo in in the same boat here, need to specify an environment variable for react native config ive tried adding the following to my debug ios configuaration with luck no success

            "env": {
                "ENVFILE": ".env.dev"
            },            

[waltermvp]

@jwargo any ideas?

[jwargo]

I don't know. @iTOYS can you please take a look?

[waltermvp]

Also when i hover over "env" i get `Property env is not allowed' even though documentation says its allowed.

[iTOYS]

I believe we can do it.

[waltermvp]

@itoys would this require an enhancement to do? Or should this just work?

[iTOYS]

@waltermvp It isn't work now. Going to implement this on the next week

[waltermvp]

Got it thanks, if I can help let me know :)
@itoys

[waltermvp]

@iTOYS Am I using this correctly?

        {
            "name": "Debug iOS Demo",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react",
            "env": {
                "ENVFILE": ".env.demo"
            }
        },

[iTOYS]

@timscott
If I right understand you, set env file via envFile property:
{ "name": "Debug iOS Demo", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "ios", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react", "envFile": "${workspaceFolder}/.env.demo" },

Also, please update extension to 0.5.4

[waltermvp]

@iTOYS not working either way for me (providing variables from launch.json directly or providing a file name for a env file) can you provide an example of the contents of .env.demo. I want to make sure im using the correct format.

[iTOYS]

@timscott
Which result do you expect?

launch.json:

{
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "sourceMaps": true,
            "env": {
                "TEST": "123"
            },
            "envFile": "${workspaceFolder}/.env",
            "outDir": "${workspaceRoot}/.vscode/.react"
        },

.env:

TEST1=123
TEST2=123

So, react-native run-ios will be spawn with merged global ENV, variables from launch.json and variables from .env file

[kralcifer-ms]

@iTOYS I just went to try this for first time and can't seem to get env vars injected into the app. I've tried env in launch.json, .envFile referred to in launch.json, Workspace Settings -> react-native.ios.env.device, and setting in console that launches vscode.

I'm trying to use the visionmedia debug npm package. In my main App.tsx I can enable logging in App.tsx and I see the output of logging from various modules in my React Native app in the Debug Console (no colors yet but different problem to solve there next!). Now, rather than enabling the logging from javascript in App.tsx I should be able to drive it from env variable called DEBUG that should turn on which components to log. At breakpoints in my running app, in global I see __DEV__ which RN injects somehow but have yet to see the DEBUG env that I've defined several ways as mentioned in my first paragraph. Any tips on how to spot what's wrong?

RN: 0.49.1
vscode: 1.21.1 (Mac)
react native tools: 0.6.6

launch.json I've tried workspaceRoot and workspaceFolder and neither work:
{
"name": "Debug iOS device",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"env": {
"DEBUG": "mixerViewing",
},
"envFile": "${workspaceRoot}/.env",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "device",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},

.env file sits next to package.json and contains:
DEBUG="mixerViewing"
I've tried with and without quotes.

Workspace Settings I added this:
"react-native.ios.env.device": {
"DEBUG": "mixerViewing"
}

and finally, in the console window that I launch vscode with I did:
export DEBUG=mixerViewing
and then typing 'env' shows DEBUG and after launching vscode in intergrated console in there it also shows DEBUG but when I debug my app DEBUG does not show in global.

DEBUG has yet to appear in global when I stop at a breakpoint when debugging my app.

[svvitale]

I really hate to dredge up an issue this old, but I'm encountering the same issue. It appears that the env and envFile launch parameters are being passed to the start-android command, but are NOT being passed to the packager.

In my case, I'm using babel-plugin-transform-inline-environment-variables which enables access to the packager's ENV via process.env.VARIABLE_NAME.