Config Variables for React-Native Apps

Transcript

1. Config Variables for React-Native apps
2. The problem var LuggApi = { request: async function(method, path) { let url = 'https://api.lugg.com' + path; let headers = { 'Authorization': 'Bearer 48616d6d65'} let response = await fetch(url, { method, headers }); // ... };
3. The problem(s) • Secret in repo • Hard to change • Can’t reuse outside JS
4. Solving #1 // config.sample.js module.exports = { apiUrl: 'https://api.lugg.com', apiToken: 'CHANGEME' } // api.js var LuggApi = { request: async function(method, path) { let url = Config.apiUrl + path; let headers = { 'Authorization': 'Bearer ' + Config.apiToken } let response = await fetch(url, { method, headers }); // ... };
5. Solving #2 // config.js var dev = { apiUrl: 'http://localhost:5000', apiToken: 'abcdefgh' }; var prod = { apiUrl: 'https://api.lugg.com', apiToken: '48616d6d65' }; module.exports = __DEV__ ? dev : prod;
6. Solving #3 android { productFlavors { dev { resValue "string", "GOOGLE_MAPS_API_KEY", "abcdefg" } production { resValue "string", "GOOGLE_MAPS_API_KEY", "0123456" } } }
7. Solving #3
8. New problems • Inconsistent formats • Need a React Native bridge • Can’t reuse across platforms
9. SOLVE ALL THE THINGS $ rnpm install react-native-config
10. .env API_URL=https://api.lugg.com API_TOKEN=48616d6d65 GOOGLE_MAPS_API_KEY=0123456
11. Consume from JS import Config from 'react-native-config' Config.API_URL // https://api.lugg.com Config.API_TOKEN // 48616d6d65
12. Consume from Gradle android { signingConfigs { release { storeFile file(project.env.get("RELEASE_STORE_FILE")) storePassword project.env.get("RELEASE_STORE_PASSWORD") keyAlias project.env.get("RELEASE_KEY_ALIAS") keyPassword project.env.get("RELEASE_KEY_PASSWORD") } } }
13. Consume from AndroidManifest.xml <meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/GOOGLE_MAPS_API_KEY" />
14. Consume from Xcode
15. Thanks! @ped github.com/luggg/react-native-config