React Native Multipe Environment

07/03/2021

427

Ada beberapa hal yang menurut saya sepele dan agak sulit dilakukan di React Native. salah satunya adalah menangani environment yang berbeda.

Wajar jika hanya memiliki satu environment saat Anda masih mengembangkan aplikasi, tetapi ketika beberapa pengguna lain mulai mengujinya atau ketika kalian akan merilisnya, kalianmungkin ingin menggunakan URL yang berbeda untuk API, seperti versi develop dari API yang juga memiliki akses ke titik akhir baru atau logger penampung-semua, dan versi siap produksi, telah diuji dengan baik dan dengan database produksi untuk versi rilis.

Terkadang Anda membutuhkan lebih dari 2 lingkungan, seperti:

Develop: Di sinilah Anda akan mengembangkan semua fitur baru aplikasi Anda. environment siap membantu Anda dengan log yang lebih baik dan database palsu yang dapat Anda hapus dan buat ulang kapan pun Anda mau jika Anda sering melakukan kesalahan.
Staging: Versi aplikasi dalam staging diuji oleh klien, teman, atau beberapa kolega dari Quality Assurance (QA) dan environment hampir meniru Versi Production atau rilis.
Production: Ini adalah versi yang akan Anda rilis ke publik (App Store, Google Play).

Jadi Bagaimana Cara Membuat banyak Environment pada keadaan yang berbeda?

kali ini saya menjelaskan pada kalian bagaimana menambahkan banyak environment, untuk tutorial membuat banyak invironment tidak harus dari awal project namun kali ini saya menjelaskan dari awal pembuatan project react-native dan didalamnya terdapat beberapa environment antara lain Development, Staging dan Production. dan didalam environment tersebut ada endpoint url server.

1. Buat project baru dengan perintah:
  
  npx react-native init multienvtutorial && cd multienvtutorial && code .
2. Tambahkan package react-native-dotenv dengan perintah :
  
  yarn add react-native-dotenv atau npm install react-native-dotenv
3. jika sudah terinstall package react-native-dotenv maka buat folder env pada root project tersebut dan di dalam folder tersebut terdapat 3 file json:
  1. 1. development.json yang berguna saat kita menambahkan fitur baru atau sedang memperbaiki bug yang tiba tiba ada. contoh file development.json seperti berikut:
```
{
    "API_URL": "https://development.api.com"
}
```
    2. staging.json yang berguna saat kita menyerahkan aplikasi ke kolega atau teman maupun QA. contoh file staging.json seperti berikut:
```
{
    "API_URL": "https://staging.api.com"
}
```
    3. production.json yang berguna saat mau merelease aplikasi ke public seperti playstore atau apps store. contoh file production.json seperti berikut:
```
{
    "API_URL": "https://staging.api.com"
}
```
4. nah pada langkah kali ini kita membuat node script bernama
  set-environment.js yang berguna sebagai merubah environment otomatis saat kita ingin merubahnya. buat folder scripts untuk menampung script node tersebut. berikut isi file tersebut:
```
#!/bin/node
const fs = require("fs");
//Obtain the environment string passed to the node script
const environment = process.argv[2]
//read the content of the json file
const envFileContent = require(`../envs/${environment}.json`);
//copy the json inside the env.json file
fs.writeFileSync("env.json", JSON.stringify(envFileContent, undefined, 2));
```
  nah script tersebut hanya empat baris saja simpel bukan. 🙂
5. Cara merubah environment secara cli atau lewat terminal dengan perintah:
```
node scripts/set-environment.js development
```
  nah perintah diatas itu akan membuat file env.json secara otomatis pada root directori project. tambahkan kode berikut pada package.json jika tidak ingin mengetik manual pada terminal
```
{
  "name": "your-app-name",
  "scripts": {
    "start": "react-native start",
    "env:staging": "node scripts/set-environment.js staging",
    "env:dev": "node scripts/set-environment.js development",
    "env:prod": "node scripts/set-environment.js production",
    ...
  },
  "dependencies": {...},
  ...
}
```