Integration with appcenter build

[ivanpagac]

Hi,

is there a possiblitiy to integrate with appcenter thru setting the ENVFILE? Setting it as global variable doesnt work. Thanks

[jordanmkoncz]

@ivanpagac any luck with this? I'm also trying to get my app set up in AppCenter but not sure how to approach setting it up to use react-native-config.

[ivanpagac]

@jordanmkoncz for the ios its quite straightforward, just create new scheme and use it in your build. With Android I assume as per the code for gradle describes the order of precedence how to pick the right config file. For me setting up the ENVFILE in appcenter build was enought as this is a sys variable and is picked first. I was using wrong global variable .ENVFILE (with the . at the beginning) thats why it was not picking it.

[sabun123]

@jordanmkoncz for the ios its quite straightforward, just create new scheme and use it in your build. With Android I assume as per the code for gradle describes the order of precedence how to pick the right config file. For me setting up the ENVFILE in appcenter build was enought as this is a sys variable and is picked first. I was using wrong global variable .ENVFILE (with the . at the beginning) thats why it was not picking it.

For Android, does this mean we can't tell the Microsoft Visual Studio App Center to look at the .env files we create then? I couldn't quite grasp what you were saying when you mentioned setting up the ENVFILE in appcenter build.

Like you said, with iOS we can redirect the Build configuration to look at the different schemes, so it can read the specific .env file we've tied to that scheme.

I would rather not have to manually enter the environment variables into the build configuration in App Center, but instead have it read directly from a specific .env file for each of my branches.

Both setting the environment variables manually in build config in App Center, and also leaving it blank, I still have this issue:

Gradle 4.4
Resolved com.android.tools.build:gradle:3.1.4 in :classpath 
Project is either no Android app project or build version has not been set to override
Reading env from: .env
**************************
*** Missing .env file ****
**************************

Through Yarn, a simple yarn android-dev will tell it to look at the .env.dev file when run locally. With it being unable to use the environment variables I've set, my redux saga's can't work so my app essentially can't do any REST api calls. Is there any way to tell the App Center how to look at one of my .env files?

[vforvasile]

any updates here?

[ronilitman]

@ivanpagac Can you please elaborate on "setting up the ENVFILE in appcenter build"? What exactly did you do? Thank you very much.

[glocore]

@ivanpagac @sabun123 any updates?

[ghost]

@sabun123 I faced your exact issue. What I found is that the env variables set in Appcenter build config can be accessed in very specific ways as shown here. I got it to work with react-native-config by creating a appcenter-pre-build.sh script

#!/usr/bin/env bash
# Creates an .env from existing env files for use with react-native-config 
# based on branch
if [  "$APPCENTER_BRANCH" == "master" ]; then
   cp .env.prod .env
else
   cp .env.dev .env
fi

printf "\n.env created with contents:\n"
cat .env

Thus achieving what you were looking :

I would rather not have to manually enter the environment variables into the build configuration in App Center, but instead have it read directly from a specific .env file for each of my branches.

Lemme know if it helps

@vforvasile @platonish Alternatively instead of tying the environment config to a branch name we can specify the same in Appcenter config like this:

And then having a pre build script in this form:

#!/usr/bin/env bash
# Creates an .env from ENV variables for use with react-native-config
if [ $ENVIRONMENT_VARIABLE = "prod" ]; then
   cp .env.prod .env
else
   cp .env.dev .env
fi

printf "\n.env created with contents:\n"
cat .env

Also the following script is very useful if you want to pick out certain ENV variables(matching a pattern) from Appcenter Build config and create .env file

#!/usr/bin/env bash
# Creates an .env from ENV variables for use with react-native-config
ENV_WHITELIST=${ENV_WHITELIST:-"^RN"}
printf "Creating an .env file with the following whitelist:\n"
printf "%s\n\n" $ENV_WHITELIST
set | egrep -e $ENV_WHITELIST | egrep -v "^_" | egrep -v "WHITELIST" > .env
printf "\n.env created with contents:\n"
cat .env

For example this will create .env file which has RN_LABEL=APP_NAME alone (refer image)

[watadarkstar]

If this works @arjithn you're my hero!

EDIT: You're my hero!

[vj-raghavan]

I would be wary of using this in your current projects considering this isn't well maintained or essential for setting up your environment config.

My method after going through a lot of options was just to use a Javascript config file which exports configuration for different environment.

And to include in your app centre build pipeline use a before script like I shown in the below script.

`#!/usr/bin/env bash

Creates an .env from existing env files for use with react-native-config

based on branch

rm -rf config/env.config.js if [ "$APPCENTER_BRANCH" == "master" ]; then cp config/environment/prod.env.js config/env.config.js else cp config/environment/dev.env.js config/env.config.js fi

printf "\n.env created with contents:\n" cat config/env.config.js`

I took the idea for exporting the javascript file from https://www.reactnative.guide/6-conventions-and-code-style/6.3-environment-variables.html and the idea to use it in a pre build script from https://blog.usejournal.com/react-native-config-and-appcenter-environment-variables-a1a3492ca6a0

although the comment from @arjithn is really helpful as well.

I tested this with builds on App Center and they work for me.

[YahiaJabeur]

App Center works fine for me when I mention the ENVFILE in the Environment variables

But this method is not secure, because in the end we need to push the ENV file to repository

[andreialecu]

I haven't been able to find this in the documentation, but isn't it supported to simply specify environment variables normally, outside of the .env file, which react-native-config would pick up? The point of the .env file is to help set up development, in a production/build environment it's better to specify real environment variables.

Then there would be no reason to use ENVFILE or other prebuild scripts.

[andreialecu]

It seems like "real" environment variables are not supported, but using printenv to write them to a file seems to work.

That means adding printenv > .env to appcenter-pre-build.sh, that way you can use any environment variable set up via the AppCenter UI.

IMPORTANT NOTE: the above approach puts every variable in the .env file, and everything ends up in your built package, where it could be extracted from. This could include things like AWS_SECRET_KEY or other sensitive data. It's better to use something like:

echo SERVER_API=$SERVER_API >> .env
echo GOOGLE_API_KEY=$GOOGLE_API_KEY >> .env

[chenop]

@andreialecu point should be more loud and clear:

The Environment variables section does not inject variables into your app

So create an .env file programmatically via appcenter-pre-build.sh

[aureosouza]

If you add the AppSecret to each .env file, you can access it by BuildConfig.ANDROID_APP_CENTER_SECRET in Android and NSString *appSecret = [ReactNativeConfig envFor:@”IOS_APP_CENTER_SECRET”]; in iOS. That way you don't even need to create Config.plist or appcenter-config.json.

I wrote an article about it that may help: https://medium.com/@aureosouza0801/integrate-appcenter-and-react-native-config-85d44b7a3d2