React-native-code-push: Env variables not passed to react native bundle command

[scottmas]

I am using the babel-plugin-transform-inline-environment-variables package to use custom env variables within my code and have them be set in the resulting react native bundle. This works great in local env, and when I directly invoke the react native bundle command.

However, when react native bundle gets invoked indirectly like so for my app:

appcenter codepush release-react -d Staging -a My-App/My-App-iOS -b main.jsbundle

Then the env variable is not defined and my build goes kapoot. However, when I set the env variables and manually invoke the exact same React Native bundle command that code push tells me it is doing, but add in the custom env var, namely:

MY_CUSTOM_ENV_VAR=foobar node node_modules/react-native/local-cli/cli.js bundle \
--assets-dest /var/folders/f9/etc/CodePush \
--bundle-output /var/folders/f9/etc/CodePush/main.jsbundle \
--dev false --entry-file index.js --platform ios

then it works great. So code push needs to be sure to pass along the env variables when it invokes the script.

I am using app center 1.0.16 and RN 55

[scottmas]

Also worth noting, is that weirdly enough, I only get the issue of the missing env variables on --platform ios.

[NickToropov]

Hi @scottmas, thanks for posting this issue!
I was trying to reproduce the issue with no success. Please look at my steps:
1) prepare a test project:

react-native init Issue1309
cd Issue1309
yarn add babel-plugin-transform-inline-environment-variables --dev
yarn add react-native-code-push
react-native link react-native-code-push

2) add transform-inline-environment-variables plugin in .babelrc file:

"plugins": [
    ["transform-inline-environment-variables", {
      "include": ["TEST"]
    }]
  ]

3) add demo code in App.render() method:

export default class App extends Component<Props> {
  render() {
    console.log(`TEST is equal to ${process.env.TEST}`);

4) execute TEST=Issue1309 appcenter codepush release-react -a <user-name>/Issue1309-Ios -d Staging

5) go to appcenter.ms, select your latest CodePush Staging release and click Download bundle button

6) rename downloaded file to .zip and unzip it.
7) open main.jsbundle from unzipped folder in a text editor and find line console.log("TEST is equal to Issue1309") that shows me that variable was applied.

Please could you specify if you did some special steps and/or provide me with demo project that I could reproduce this issue.

[scottmas]

Closing this for now, since I'm switching to react-native-config, which makes this issue go away. Not sure precisely what was happening.

[acomito]

@scottmas did you get react-native-config and react-native-code-push working together? I saw some people in the react-native-config raising issues but some are older.

Do you need to do anything special? I'm a little weary of using the environment variables available via appcenter.

UPDATE 1:
further reading: https://blog.blazingedge.io/react-native-continuous-integration-and-deployment/

[tvand7093]

I just had this issue, and for me it was caused by the bundler caching stuff. So after poking around a bit I found the extra-bundler-option flag which can be used like this:

appcenter codepush release-react -a your-org/your-app -d Staging \
--extra-bundler-option="--reset-cache"

This effectively tells the bundler to "start fresh" when building the bundle to deploy to CodePush.

[jamesholcomb]

Thanks @tvand7093, ran into this as well. Though it seems that --extra-bundler-option is only supported in appcenter CLI.

Why is --reset-cache not the default behaviour for the bundler?

[matteocollina]

Any news? REACT_APP_ENV=$API react-native bundle ... still doesn't work

[A-Tokyo]

Any news on this? Still doesn't work with the following config:

"react-native-code-push": "^6.1.0",
"code-push-cli": "^2.1.9",
"react-native": "0.61.5",

[A-Tokyo]

We solved the problem by using this node script in the CI to replicate .env content to a .env.js file that we then spread over our normal config.

eg:

import EnvConfig from 'react-native-config';
import CustomJSConfig from './env.js';

const config = {
  ...EnvConfig,
  ...CustomJSConfig,
};