Configuring Env Vars for React Native Apps on Bitrise
You might have heard or even been using this cool package for managing environment variables in React Native called react-native-config. It lets you define your app’s environment variables on a .env file, and inject the values into the Javascript codebase.
react-native-config by default only reads values from .env at the root of the project. You can also specify which file it should read from. But .env files are excluded from git, since different machines would usually need different values depending on their environment, which presents a problem when building on a CI tool (in my case, Bitrise) where values are provided only as variables. Here’s how I configured my Bitrise build workflow to get react-native-config to read environment values.
A typical .env file usually looks something like this:
API_BASE_URL=https://myapi.test
API_CLIENT_ID=1234
API_CLIENT_SECRET=my-secretThen in Javascript files, the values would be accessed like so:
import Config from 'react-native-config'console.log(Config.API_BASE_URL); // https://myapi.test
console.log(Config.API_CLIENT_ID); // 1234
console.log(Config.API_CLIENT_SECRET) // my-secret
However, .env files are not committed to git, hence Bitrise would have no access to these values when building. So I headed over to the Workflow Editor: Env Vars section…
And so I thought “Hey! This is neat! I could just put the values here then Bitrise and react-native-config will work together to magically read the values, right?”. Wrong. Like the naive “devops” engineer I am, I pasted in the values and went ahead starting a build. Surely enough, the build succeeded (yay!), yet once I ran the app, I’m greeted with a nice familiar crash.
Upon investigating, I found that the crash was caused by undefined env values. “How could this be? I was so sure…” — no I wasn’t, I never was. It turns out, those env vars I have pasted in was only to provide values to the build “workflow”. So to fix this, I added a ‘Script’ step in the workflow right after the “Git Clone Repository” step, to read the env values and write them into a new .env file.
In the script content, I put a set of commands like this:
echo "API_BASE_URL=$API_BASE_URL" >> $BITRISE_SOURCE_DIR/.env
echo "API_CLIENT_ID=$API_CLIENT_ID" >> $BITRISE_SOURCE_DIR/.env
echo "API_CLIENT_SECRET=$API_CLIENT_SECRET" >> $BITRISE_SOURCE_DIR/.envcat $BITRISE_SOURCE_DIR/.env
So to put simply, all it does is read values provided in the Workflow Env Vars, echo it out line by line in a standard dotenv format into a new .env file in the root source directory. It also echoes out the contents of the new .env file to the logs for good measure. Now react-native-config will actually have a file to look for values!
Quite convenient, though I couldn’t achieve what I initially wanted. I would only need to remember adding new variables into the script step.
On a side note, this was a reasonably hasty attempt in achieving my specific case, for which I have not thoroughly reviewed the performance and security-wise. If you happen to know a better method of doing this, please do let me know :)
