@25sprout/react-starter/template-ts/README.md

25sprout web starter with React

# {{name}}

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/) [![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg?style=flat-square)](https://github.com/conventional-changelog/standard-version)

_新芽網路前端開發架構_

## 簡介

經由 `react-starter` 快速產生的專案，內建 `react` 開發用環境。

## 資源介紹

使用 `webpack` 做建置工具，專案架構使用 `universal-router`、`redux`，搭配 `eslint`、`react-storybook` 與 `jest` 開發，支援 `ES6`、`stage-3` 語法。

## 如何開始

- 安裝 nodejs v10 以上的版本
- 安裝套件: `npm i` or `yarn`

#### 踏出第一步

啟動開發 server

```
npm start
```

便可在 <http://localhost:3000> 看到本地伺服器～

啟動 storybook server

```
npm run storybook
```

便可在 <http://localhost:8000> 看到 storybook 開發伺服器～

#### npm script

- **npm start**: 啟動開發 server
- **npm run dev**: 跟 `npm start` 一樣
- **npm run build:develop**: 使用 `develop` 參數打包專案，部署在測試機。
- **npm run build**: 使用 `production` 參數打包專案，部署在正式機。
- **npm run lint**: 跑 eslint 跟 stylelint 檢查 coding style
- **npm run storybook**: 跑 storybook
- **npm test**: 跑 jest 測試

## 專案架構

此架構是參考 [Atom design](http://bradfrost.com/blog/post/atomic-web-design/) 和 [Fractal Project Structure](https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure) 所整理出來

> 註： atom design 裡的 Template 是這裡的 Layout，而 Page 則是在 routes 資料夾下

以下是這個專案的各資料夾定義
- src
	+ components
		- **atom**: 原子 component ，不可再分割的基本 component， ex `button`, `label`, `html tag`
		- **molecules**: 分子 component，由原子組成的基本 component， ex `地址輸入欄位` (包含 `label`, `input`, `button` 等)
		- **organisms**: 組織 component，由原子、分子組成的多功能 component， ex `header`, `footer`
	+ images
	+ **layouts**: 放置版型的地方，提供不同版型給許多頁面
	- **models**: 存放 reducer 和 action 的地方
	- **routes**: 定義每一頁的 routing 規則，底下每一個資料夾就是單獨一頁
	- **store**: 設定 redux middlewares 的地方
- **config**: 設定環境變數、調色盤、media query 範圍、endpoint 位置
- **storybook**: 存放 storybook 的設定檔

> 0.8.0 之後 component 的 stories 和 test case 移至各自的 component 資料夾裡面

## 參數設定

#### 環境

目前根據不同專案規模會有不同數量的環境，目前支援以下環境

- develop
- release
- staging
- production

ref: [Git/Test flow 規範](https://www.notion.so/25sprout/Git-Test-flow-56972d230c7d41fcb1b1e768686b0174)

#### 環境變數

Doc: https://frontend.fox.25sprout.com/react-starter/docs/learn-react-starter/env-variable

現在支援 `.env` 檔案來設定環境變數，可以在專案根目錄下建立 `.env` 檔案

以下是 npm script 各自對應的環境變數與會讀取的 `.env` 檔案

| script         | NODE_ENV   | PROXY      | API        | .env            |
| -------------- | ---------- | ---------- | ---------- | --------------- |
| dev:develop    | devlopment | develop    | dev        | .env            |
| dev:release    | devlopment | release    | dev        | .env.release    |
| dev:staging    | devlopment | staging    | dev        | .env.staging    |
| dev:production | devlopment | production | dev        | .env.production |
| build:develop  | devlopment |            | develop    | .env            |
| build:release  | devlopment |            | release    | .env.release    |
| build:staging  | production |            | staging    | .env.staging    |
| build          | production |            | production | .env.production |

PS. 如果檔案不存在，則會讀取 `.env` 的內容

`.env` 檔案範例可以參考 `.env.example`

#### CSS 標準色

CSS 所用的全域變數，可以於 `config/palette.js` 設定整個網站的標準色等。

```javascript
export default {
	standard: '#999',
	secondary: '#DDD',
	darkBlack: '#404040',
};
```

#### CSS Media Query 設置

CSS 所用的全域變數，可以於 `config/media.js` 設定整個網站的 media query。

```javascript
export default {
	'--phone': '(width < 600px)',
	'--small-tablet': '(900px > width >= 600px)',
	'--tablet': '(1200px > width >= 900px)',
	'--desktop': '(width >= 1200px)',
};
```

## Contribution

此專案 commit message 使用 angular format ，並使用 [commitizen](http://commitizen.github.io/cz-cli/) 輔助產生 commit message

- 加入修改的檔案 `git add .`
- 產生 commit message `npm run commit`

## Release

此專案使用 [standard-version](https://github.com/conventional-changelog/standard-version) 輔助 release 流程，自動產生 `CHANGELOG.md` 和 提升版本號（提升 major version 依據是否有 `feat` 來判斷）

- `npm run release`

可以自己決定 提升 patch, minor or major

- `npm run release -- --release-as minor`

**Warning**: 第一次 release 請下

- `npm run release -- --first-release`

## Trigger

1. 把 `gitlab-ci.yml` 更名為 `.gitlab-ci.yml`

2. 依據專案修改 trigger project

需要更改 CI/CD 裡面 trigger project 的位置，才能正常觸發 deployer

```
  trigger:
    project: example/devops/router
```

ex. `fox.25sprout.com/justsleep/website` 的專案， trigger 在 `fox.25sprout.com/justsleep/devops/deployer`

```
  trigger:
    project: justsleep/devops/router
```