arusantimo/react_typescript_redux_kor_boilerplate

타입스크립트기반 리엑트 서버사이드렌더링 보일러플레이트 (reactjs ssr Sass boilerplate made by typescript)

Typescript-react-redux-ssr-boilerplate-sass

라이브러리 Libraries

Base Core

• TypeScript
• React
• React Router v3
• Redux
• React-Redux
• React-Router-Redux

Utilities

• Isomorphic Fetch with ES6-Promise 클라이언트 서버사이드 양쪽에서 fetch api를 사용하기 위한 툴
• Redux Thunk 비동기 dispatch를 위한 툴
• Redux Connect 리엑트라우터에서 비동기 작업을 하기 위한 툴
• React Helmet html head meta정보를 삽입하는데 사용한다
• classnames classname의 사용 편의성을 높인다

Build System

• Webpack2 build를 위한 툴
  • Awesome TypeScript Loader 타입스크립트 로더.
  • Babel Loader 자바스크립트 바벨 로더.
  • React Hot Loader 개발서버 핫 로딩을 위한 로더
  • Isomorphic Style Loader 서버사이드 스타일 로더
  • Style Loader
  • CSS Loader
  • SCSS Loader
  • PostCSS Loader
    • PostCSS cssnext
    • PostCSS Assets
  • JSON Loader
  • File Loader
  • URL Loader
  • Sourcemap Loader
  • Manifest Plugin
  • Extract Text Plugin css를 파일로 뽑아줌
  • tslint Loader 빌드 프로세스에서 tslint를 미리 로더로 사용.

Dev & Prod Server

• Webpack Dev Server
  • Webpack Dev Middleware
  • Webpack Hot Middleware
• Express 클라이언트 서버사이드의 서버프레임워크
• Compression gzip 압축툴
• Serve Favicon 파비콘 서비스.

Developer Experience

• Typings definition(*.d.ts)파일이 없는 외부 라이브러리를 위한 definition파일을 설치
• tslint
• stylelint
• Redux Logger
• Redux DevTools
• Chalk 터미널 스타일링

Testing

• Fetch Mock for testing async actions.
• Redux Mock Store for creating mock stores.

디렉토리 구조

.
├── build                       #
├── config                      # 구성(설정)을 위한 폴더
│   ├── test                    # 테스트 설정 폴더
│   ├── types                   # 작성한 전역 유형 정의
│   ├── webpack                 # Webpack 설정 폴더.
│   └── main.ts                 # 일반 설정 파일(앱환경).
├── node_modules                # Node Packages 모듈.
├── src                         # 소스폴더
│   ├── app                     #
│   │ ├── components            # React Components (재사용 가능한 Components).
│   │ ├── containers            # React/Redux Containers.
│   │ ├── models                # interface & type 파일
│   │ ├── redux                 # Redux.
│   │ │   ├── modules           # Redux modules(action & reducer).
│   │ │   ├── reducers.ts       # reducers 결합.
│   │ │   └── store.ts          # Redux 스토어, 글로벌 앱 상태 포함.
│   │ └── routes.tsx            # Routes 파일.
│   ├── client.tsx              # 클라이언트 측 렌더링을위한 파일.
│   ├── favicon.ico             # Favicon.
│   └── server.tsx              # 서버 측 렌더링을위한 파일.
├── typings                     # typings 작성한 전역 유형 정의.
├── .gitignore                  # git 무시할 파일을 선언.
├── .gitAttribute               # git 파일에 적용시킬 속성을 기술
├── package.json                # Package 설정파일.
├── README.md                   # This file
├── tsconfig.json               # TypeScript 설정파일.
└── tslint.json                 # Configures tslint 설정 파일.

Usage

모든 명령어는 개발환경이 기본입니다.
NODE_ENV를production으로 설정하거나 아래의 단축키를 사용할 수 있습니다.

# Running

$ npm start # 기본적으로 개발모드로 시작한다.

# production로 시작
$ NODE_ENV=production npm start # or
$ npm run start:prod

# Building

$ npm build # 개발모드로 빌드

# production로 빌드
$ NODE_ENV=production npm build # or
$ npm run build:prod

# 테스트(미완성)
$ npm test

추가할 기능

• 테스트 (e2e, unit..)

이 Repo는 vortigern기반으로 제작되어 있었습니다. (This Repo was based on vortigern.)