# React + env-cmdrc 指定環境變數
###### tags: `React` `env-cmd` `env-cmdrc` `configure`

在部署到不同環境上時，會需要配置不同的環境變數。

## 配置步驟：
### 1. 安裝

yarn add env-cmd

### 2. 建立 `.env-cmdrc` 定義環境變數

{
  "dev": {
    "REACT_APP_BASEURL": "dev"
  },
  "release": {
    "REACT_APP_BASEURL": "release"
  },
  "prod": {
    "REACT_APP_BASEURL": "production"
  }
}

### 3. 修改 `package.json` 裡的 `script` 指令
([這裡是使用 craco 去啟動](https://hackmd.io/@yellow/S1mlj0yCK))

script 的 key 可以自行命名(start:dev)，執行指令`env-cmd ...`, `-e` 是指定 rc 檔案(就是`.env-cmdrc`)裡面的 key name, `dev`, `release`, `prod`，並使用 craco 啟動

"scripts": {
    "start:dev": "env-cmd -e dev craco start",
    "build:dev": "env-cmd -e dev craco build",
    "start:release": "env-cmd -e release craco start",
    "build:release": "env-cmd -e release craco build",
    "start:prod": "env-cmd -e prod craco start",
    "build:prod": "env-cmd -e prod craco build",
}

----

#### 這裡也可以依照環境分成多個 `.env` 檔案
建立以下三個檔案

# .env.development
REACT_APP_BASEURL=dev

# .env.release
REACT_APP_BASEURL=release

# .env.production
REACT_APP_BASEURL=production

執行指令改成 `-f`, 指定env 檔案

"scripts": {
    "start:dev": "env-cmd -f .env.dev craco start",
    "build:dev": "env-cmd -f .env.dev craco build",
    "start:release": "env-cmd -f .env.release craco start",
    "build:release": "env-cmd -f .env.release craco build",
    "start:prod": "env-cmd -f .env.prod craco start",
    "build:prod": "env-cmd -f .env.prod craco build",
}

<br />

還有很多種用法，像在 shell 中臨時環境變數，或是自定 env path
#### Reference
- [添加自定义环境变量](https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/)
- [更多用法 >> ](https://www.npmjs.com/package/env-cmd)
- [或是直接去看看一堆範例 >> ](https://github.com/toddbluhm/env-cmd-examples)