Définition de la variable d'environnement dans React-native?

J'utilise react-native pour créer une application multiplateforme, mais je ne sais pas comment définir la variable d'environnement pour pouvoir avoir différentes constantes pour différents environnements.

Exemple:

development: 
  BASE_URL: '',
  API_KEY: '',
staging: 
  BASE_URL: '',
  API_KEY: '',
production:
  BASE_URL: '',
  API_KEY: '',

Au lieu de coder en dur les constantes de votre application et d'activer l'environnement (j'expliquerai comment le faire dans un instant), je suggère d'utiliser la suggestion à douze facteurs de définir votre processus de construction BASE_URLet le vôtre API_KEY.

Pour savoir comment exposer votre environnement react-native, je suggère d'utiliser babel-plugin-transform-inline-environment-variables de Babel .

Pour que cela fonctionne, vous devez télécharger le plugin, puis vous devrez configurer un .babelrcet cela devrait ressembler à ceci:

{
  "presets": ["react-native"],
  "plugins": [
    "transform-inline-environment-variables"
  ]
}

Et donc, si vous transpilez votre code natif de réaction en exécutant API_KEY=my-app-id react-native bundle(ou start, run-ios ou run-android), tout ce que vous avez à faire est de faire ressembler votre code à ceci:

const apiKey = process.env['API_KEY'];

Et puis Babel remplacera cela par:

const apiKey = 'my-app-id';

J'espère que cela t'aides!

La solution la plus simple (ni la meilleure ni l' idéale ) que j'ai trouvée était d'utiliser react-native-dotenv . Vous ajoutez simplement le préréglage "react-native-dotenv" à votre .babelrcfichier à la racine du projet comme ceci:

{
  "presets": ["react-native", "react-native-dotenv"]
}

Créez un .envfichier et ajoutez des propriétés:

echo "SOMETHING=anything" > .env

Puis dans votre projet (JS):

import { SOMETHING } from 'react-native-dotenv'
console.log(SOMETHING) // "anything"

À mon avis, la meilleure option est d'utiliser react-native-config . Il prend en charge 12 facteurs .

J'ai trouvé ce package extrêmement utile. Vous pouvez définir plusieurs environnements, par exemple le développement, la mise en scène, la production.

Dans le cas d'Android, les variables sont également disponibles dans les classes Java, gradle, AndroidManifest.xml etc. Dans le cas d'iOS, les variables sont également disponibles dans les classes Obj-C, Info.plist.

Vous créez simplement des fichiers comme

• .env.development
• .env.staging
• .env.production

Vous remplissez ces fichiers avec des clés, des valeurs telles que

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh

puis utilisez-le simplement:

import Config from 'react-native-config'

Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

Si vous souhaitez utiliser différents environnements, vous définissez essentiellement la variable ENVFILE comme ceci:

ENVFILE=.env.staging react-native run-android

ou pour assembler l'application pour la production (android dans mon cas):

cd android && ENVFILE=.env.production ./gradlew assembleRelease

React native n'a pas le concept de variables globales. Il applique strictement la portée modulaire , afin de promouvoir la modularité et la réutilisabilité des composants.

Parfois, cependant, vous avez besoin que les composants soient conscients de leur environnement. Dans ce cas, il est très simple de définir un Environmentmodule que les composants peuvent ensuite appeler pour obtenir des variables d'environnement, par exemple:

environment.js

var _Environments = {
    production:  {BASE_URL: '', API_KEY: ''},
    staging:     {BASE_URL: '', API_KEY: ''},
    development: {BASE_URL: '', API_KEY: ''},
}

function getEnvironment() {
    // Insert logic here to get the current platform (e.g. staging, production, etc)
    var platform = getPlatform()

    // ...now return the correct environment
    return _Environments[platform]
}

var Environment = getEnvironment()
module.exports = Environment

mon-composant.js

var Environment = require('./environment.js')

...somewhere in your code...
var url = Environment.BASE_URL

Cela crée un environnement singleton auquel vous pouvez accéder de n'importe où dans la portée de votre application. Vous devez explicitement require(...)le module de tous les composants qui utilisent des variables d'environnement, mais c'est une bonne chose.

J'ai utilisé le __DEV__polyfill intégré à react-native pour résoudre ce problème. Il est automatiquement défini sur truetant que vous ne créez pas de réaction native pour la production.

Par exemple:

//vars.js

let url, publicKey;
if (__DEV__) {
  url = ...
  publicKey = ...
} else {
  url = ...
  publicKey = ...
}

export {url, publicKey}

Alors juste import {url} from '../vars'et vous obtiendrez toujours le bon. Malheureusement, cela ne fonctionnera pas si vous voulez plus de deux environnements, mais c'est facile et n'implique pas l'ajout de dépendances supplémentaires à votre projet.

La méthode spécifique utilisée pour définir les variables d'environnement varie selon le service CI, l'approche de construction, la plate-forme et les outils que vous utilisez.

Si vous utilisez Buddybuild for CI pour créer une application et gérer des variables d'environnement , et que vous avez besoin d'accéder à la configuration à partir de JS, créez un env.js.exampleavec des clés (avec des valeurs de chaîne vides) pour l'enregistrement dans le contrôle de code source, et utilisez Buddybuild pour produire un env.jsfichier au moment de la construction dans l' post-cloneétape, en masquant le contenu du fichier dans les journaux de construction, comme ceci:

#!/usr/bin/env bash

ENVJS_FILE="$BUDDYBUILD_WORKSPACE/env.js"

# Echo what's happening to the build logs
echo Creating environment config file

# Create `env.js` file in project root
touch $ENVJS_FILE

# Write environment config to file, hiding from build logs
tee $ENVJS_FILE > /dev/null <<EOF
module.exports = {
  AUTH0_CLIENT_ID: '$AUTH0_CLIENT_ID',
  AUTH0_DOMAIN: '$AUTH0_DOMAIN'
}
EOF

Astuce: Ne pas oublier d'ajouter env.jsà .gitignoresi config et les secrets ne sont pas vérifiées dans le contrôle source accidentellement au cours du développement.

Vous pouvez ensuite gérer la façon dont le fichier est écrit en utilisant les variables Buddybuild comme BUDDYBUILD_VARIANTS, par exemple, pour obtenir un meilleur contrôle sur la façon dont votre configuration est produite au moment de la construction.

Je pense que quelque chose comme la bibliothèque suivante pourrait vous aider à résoudre le morceau manquant du puzzle, la fonction getPlatform ().

https://github.com/joeferraro/react-native-env

const EnvironmentManager = require('react-native-env');

// read an environment variable from React Native
EnvironmentManager.get('SOME_VARIABLE')
  .then(val => {
    console.log('value of SOME_VARIABLE is: ', val);

  })
  .catch(err => {
    console.error('womp womp: ', err.message);
  });

Le seul problème que je vois avec cela, c'est que c'est du code asynchrone. Il existe une demande d'extraction pour prendre en charge getSync. Vérifiez-le aussi.

https://github.com/joeferraro/react-native-env/pull/9

J'ai créé un script de pré-construction pour le même problème car j'ai besoin de différents points de terminaison API pour les différents environnements

const fs = require('fs')

let endPoint

if (process.env.MY_ENV === 'dev') {
  endPoint = 'http://my-api-dev/api/v1'
} else if (process.env.MY_ENV === 'test') {
  endPoint = 'http://127.0.0.1:7001'
} else {
  endPoint = 'http://my-api-pro/api/v1'
}

let template = `
export default {
  API_URL: '${endPoint}',
  DEVICE_FINGERPRINT: Math.random().toString(36).slice(2)
}
`

fs.writeFile('./src/constants/config.js', template, function (err) {
  if (err) {
    return console.log(err)
  }

  console.log('Configuration file has generated')
})

Et j'ai créé une personnalisation npm run scriptspour exécuter une exécution native de réaction.

Mon package-json

"scripts": {
    "start-ios": "node config-generator.js && react-native run-ios",
    "build-ios": "node config-generator.js && react-native run-ios --configuration Release",
    "start-android": "node config-generator.js && react-native run-android",
    "build-android": "node config-generator.js && cd android/ && ./gradlew assembleRelease",
    ...
}

Ensuite, dans mes composants de services, importez simplement le fichier généré automatiquement:

import config from '../constants/config'

fetch(`${config.API_URL}/login`, params)

Étape 1: Créez un composant séparé comme celui-ci Nom du composant: pagebase.js
Étape 2: À l'intérieur de ce code d'utilisation

    export const BASE_URL = "http://192.168.10.10:4848/";
    export const API_KEY = 'key_token';

Étape 3: Utilisez-le dans n'importe quel composant, pour l'utiliser, importez d'abord ce composant puis utilisez-le. Importez-le et utilisez-le:

        import * as base from "./pagebase";

        base.BASE_URL
        base.API_KEY

J'utilise babel-plugin-transform-inline-environment-variables.

Ce que j'ai fait, c'est mettre un fichier de configuration dans S3 avec mes différents environnements.

s3://example-bucket/dev-env.sh
s3://example-bucket/prod-env.sh
s3://example-bucket/stage-env.sh

CHAQUE fichier env:

FIRSTENV=FIRSTVALUE
SECONDENV=SECONDVALUE

Ensuite, j'ai ajouté un nouveau script dans mon package.jsonqui exécute un script pour le regroupement

if [ "$ENV" == "production" ]
then
  eval $(aws s3 cp s3://example-bucket/prod-env.sh - | sed 's/^/export /')
elif [ "$ENV" == "staging" ]
then
  eval $(aws s3 cp s3://example-bucket/stage-env.sh - | sed 's/^/export /')
else
  eval $(aws s3 cp s3://example-bucket/development-env.sh - | sed 's/^/export /')
fi

react-native start

Dans votre application, vous aurez probablement un fichier de configuration contenant:

const FIRSTENV = process.env['FIRSTENV']
const SECONDENV = process.env['SECONDENV']

qui sera remplacé par babel pour:

const FIRSTENV = 'FIRSTVALUE'
const SECONDENV = 'SECONDVALUE'

RAPPELEZ-VOUS que vous devez utiliser process.env['STRING']NOT process.env.STRINGou il ne convertira pas correctement.

[Source] D'après ce que j'ai trouvé, il semble que par défaut, il est uniquement possible de faire des configurations de production et de développement (pas de staging ou d'autres environnements) - est-ce exact?

À l'heure actuelle, j'utilise un fichier environment.js qui peut être utilisé pour détecter les canaux de publication de l'expo et modifier les variables renvoyées en fonction de cela, mais pour la construction, je dois mettre à jour la variable non- DEV retournée pour être soit de mise en scène, soit prod:

import { Constants } from 'expo';
import { Platform } from 'react-native';
const localhost = Platform.OS === 'ios' ? 'http://localhost:4000/' : 'http://10.0.2.2:4000/';
const ENV = {
  dev: {
    apiUrl: localhost,
  },
  staging: {
    apiUrl: 'https://your-staging-api-url-here.com/'
  },
  prod: {
    apiUrl: 'https://your-prod-api-url-here.com/'
  },
}
const getEnvVars = (env = Constants.manifest.releaseChannel) => {
  // What is __DEV__ ?
  // This variable is set to true when react-native is running in Dev mode.
  // __DEV__ is true when run locally, but false when published.
  if (__DEV__) {
    return ENV.dev;
  } else {
    // When publishing to production, change this to `ENV.prod` before running an `expo build`
    return ENV.staging;
  }
}
export default getEnvVars;

Alternatives

Quelqu'un a-t-il de l'expérience avec react-native-dotenv pour des projets construits avec expo? J'aimerais entendre vos pensées

https://github.com/zetachang/react-native-dotenv

vous pouvez également avoir différents scripts d'environnement: production.env.sh development.env.sh production.env.sh

Et puis source-les au début du travail [qui est juste lié à un alias] afin que tout le fichier sh ait est exporté pour chaque variable env:

export SOME_VAR=1234
export SOME_OTHER=abc

Et puis l'ajout de babel-plugin-transform-inline-environment-variables permettra d'y accéder dans le code:

export const SOME_VAR: ?string = process.env.SOME_VAR;
export const SOME_OTHER: ?string = process.env.SOME_OTHER;

La réponse de @ chapinkapa est bonne. Une approche que j'ai adoptée depuis que Mobile Center ne prend pas en charge les variables d'environnement, consiste à exposer la configuration de construction via un module natif:

Sur Android:

   @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        String buildConfig = BuildConfig.BUILD_TYPE.toLowerCase();
        constants.put("ENVIRONMENT", buildConfig);
        return constants;
    } 

ou sur ios:

  override func constantsToExport() -> [String: Any]! {
    // debug/ staging / release
    // on android, I can tell the build config used, but here I use bundle name
    let STAGING = "staging"
    let DEBUG = "debug"

    var environment = "release"
    if let bundleIdentifier: String = Bundle.main.bundleIdentifier {
      if (bundleIdentifier.lowercased().hasSuffix(STAGING)) {
        environment = STAGING
      } else if (bundleIdentifier.lowercased().hasSuffix(DEBUG)){
        environment = DEBUG
      }
    }

    return ["ENVIRONMENT": environment]
  }

Vous pouvez lire la configuration de construction de manière synchrone et décider en Javascript comment vous allez vous comporter.

Il est possible d'accéder aux variables avec process.env.blablaau lieu de process.env['blabla']. Je l'ai récemment fait fonctionner et commenté comment je l'ai fait sur un problème sur GitHub car j'avais des problèmes avec le cache en fonction de la réponse acceptée. Voici le problème.

Pour les dernières versions RN, vous pouvez utiliser ce module natif: https://github.com/luggit/react-native-config