I started using MS appcenter in my bare react-native app, and during the set up they ask me to add two new files to the project:
For IOS: AppCenter-Config.plist with
<dict>
<key>AppSecret</key>
<string><MY_SECRET_KEY></string>
</dict>
And for Android I need to add a JSON file with the key:
{
"app_secret": "<MY_SECRET_KEY>"
}
I'm already using a package in my app to handle .env files: https://github.com/luggit/react-native-config
Is there any way to use this package or another one, in order to get the APP_SECRET for the appcenter config files from a ENV variable?
I just don't want to keep these keys under version control.
Appcenter allows us to use build scripts, you can see more details here:
https://learn.microsoft.com/en-us/appcenter/build/custom/scripts
The workaround I found to fix this was using a post-clone script. You need to create a bash script on the root folder of your app that will write the .env file using the environment variables.
First, create a new file called appcenter-post-clone.sh.
And after you can write your .env file with something like this:
#!/usr/bin/env bash
echo "Creating .env file"
cat > ./.env <<EOL
API_URL=${API_URL}
API_KEY=${API_KEY}
EOL
Found this - The app secret (name is a bit confusing) is only for checking in-app updates - its seems you cannot trigger release with it.
So I think it is unnecessary to move the secret to the .env file.
Related
I have a secret key that I need to use in my app. On the web, I would use a .env file, but with React Native and Expo.
I want to use the EAS Build, and found the following documentation EAS variables docs
This gives information about adding the "secret" to your eas.json file, but I am unable to find 2 important things:
What code to use to access the secret variable in the dev and prod environment.
I'm thinking in production the code would be 'process.env.SECRET_KEY' and hoping the same code would apply for the dev environment, but I am not sure how to get the process.env in dev to be populated with the SECRET_KEY.
When I console.log(process.env) in my app, I just get NODE_ENV: "development".
My thought is that many apps need some sort of Secret bit of info, so any ideas on a best practice or at this point just any way to get this to work!
I was able to get the environment (secret) variable working with the eas build process.
I am sure there are other ways to accomplish this, however this is the approach I took:
I chose to use a .env file for the dev environment and the eas secret:create command for eas builds.
First, you need to create a secret for your project with the eas cli.
eas secret command
Then, create you .env file with your secret. Make sure this has the same spelling as the secret created for eas.
You will then use the app.config.js file to inject the secret so that your code can access it. NOTE: I found that I needed to remove the app.json file. I moved all the config from app.json to app.config.js.
Also remember to run npm install dotenv on your terminal to add dotenv to your project.
// the dotenv/config will read your .env file
// and merge it with process.env data
// This is just for the builds that happen outside of eas
import "dotenv/config";
// the secrets created with eas secret:create will
// be merged with process.env during eas builds
const secretKey = process.env.SECRET_KEY;
export default {
name: "TV Tracker",
slug: "tv-tracker",
scheme: "tvtracker",
...
// THIS IS WHAT WE READ IN THE CODE
// uses the expo constants package
extra: {
secretKey: secretKey,
},
};
Now we can read the secretKey using the expo-constants module.
import Constants from "expo-constants";
...
let secretKey = Constants.expoConfig.extra.secretKey;
Got my answer here
https://github.com/expo/eas-cli/issues/1265#issuecomment-1301525320
I do wish expo simplified/cleaned their documentation a bit and made like one simple example which just works out of the box instead of providing tons of information where it's so easy to miss Constants.expoConfig vs Constants.manifest
As a follow-up to #markmccoid's answer, I usually use a bash script to put the .env secrets into eas for the project.
while IFS='=' read -r key value; do
eas secret:create --scope project --name "$key" --value "$value"
done < .env
I'm wondering how can I set up the MS AppCenter to use the specific .env file, let' say the .env.staging for example:
and the CI/CD of the AppCenter will do the build for me with that .env file
If you have separate branches for staging, release etc. this can be made to work.
For each of the branches have a common environment variable to identify the specific release. Ex: TARGET = staging
(Or you can even use Appcente's pre-defined variable APPCENTER_BRANCH to grab the branch name. Depends on the strategy you follow.)
Next create a either a appcenter-pre-build.sh or appcenter-post-build.sh and update it as follows. This will create a copy of your TARGET env file as .env
#!/usr/bin/env bash
# Appcenter pre-build hook to setup amplify.
set -e
IFS='|'
echo "Making a copy of .env file"
cp .env.${TARGET} .env
One of my android application is developed using React-Native and I have plans to distribute this using app-center as this app is for Internal users. In App-Center I have different projects (created new app) for the different environments - one for dev, one for uat and one for production.
My issue here is whenever I create build package (apk file) to deploy to App Center project, I need to manually change the app-center config. I have used .env config file to get config for different environment. But I can't use this to set app-center config. Can anyone guide me how I can automate this process by either configuring the app-center in .env file or somewhere in code?
If you want to use a specific configuration for each build with the same code, you should use the appcenter's environment variable.
Just add an "app_secret" environment variable, and use a pre build script to create a appcenter-config.json file containing the app_secret
I got an application what we white-label for others.
This means we share the same functionality through the apps but there are some specific design elements (mostly colors and pictures) in each app.
I'm looking for the easiest and best way to identify the built app for my Expo React Native codebase.
My plan is store everything in the same javascript codebase, and just get load the correct config files by the application name.
In this case, I would get a few apps in the stores:
BlueApp
RedApp
GreenApp
All of them would load the same expo app: exp.host/#comp/colours
And this expo app should set the background to blue in the BlueApp and red in the RedApp.
! I don't want to detach my expo app, I want to still build my apps with the expo.
It is possible to use a different configuration file by doing expo start --config=some-app.json. One problem I ran into is that some assets were still being required at a specific location (eg. assets/images/icon.png).
The solution I came up with is to switch the project, via a bash script, every time you start a project. That way, the development you run you will also publish without fussing around config parameters that expo may or may not support.
So in your package.json you can have run commands which look like this:
./switch project1 && expo start
The bash script would sync all assets from src directory, including app.json to their expected paths. The directory structure would looks like this:
src
- project1
- app.json
- assets
- project2
- app.json
- assets
and the script:
#!/bin/bash
if [ $1 == "swaggr" ] || [ $1 == "chatsera" ]
then
echo "switching to $1"
unlink app.json
cp ./src/$1/app.json ./app.json
rsync -rvz ./src/$1/assets/ ./assets/
else
echo "could not switch project. $1 is invalid"
fi
If you use this approach I'd probably add app.json and all assets in .gitignore.
I'm not sure if i understood you correctly but i kinda think of a solution.
I don't know if this is the best way.
You can use release channels to create 3 different version of the same code. Than you can load config for the channel using Expo.Constants.manifest.releaseChannel.
for more information https://docs.expo.io/versions/latest/distribution/release-channels
I am new in react-native and haven't use any starter kit.
my question is how can I use config variables. say for example i have api url which is diffrent for production and development. I don't want to go in each page change url every time.
That's why i want to use something like config variables.
any suggestions ?
pretty simple question.. you can use react-native-config. Follow the steps:
npm install react-native-config --save
react-native link react-native-config
Create a new file .env in the root of your React Native app:
API_URL_LIVE=https://myapilive.com
API_URL_DEV=https://myapidev.com
Then access variables defined there from your app:
import Config from 'react-native-config'
Config.API_URL_LIVE // 'https://myapilive.com'
Note: Don't forget to clean you build after changing the URLs. Use following command.
cd android
gradlew clean build