Compal iCare - Web

Front structure

Resource

• webpack v4 building tool for react-router, redux
• linting tool eslint
• react-storybook for module development
• Syntax ES6、stage-3.

How to begin

• install node.js v6 or further
• install node module: npm i or yarn install

Start server

start demo server

yarn start

You canc see the project demo server running on http://localhost:3000

start storybook server

yarn storybook

You can see the storybook server running on http://localhost:6006

You also can see the storybook on github page https://redesigned-engine-831ba07b.pages.github.io/

npm script

• npm start: start server at port 3000
• npm run build:dev: build react project by webpack.dev.config
• npm run build: build react project by webpack.prod.config
• npm run lint: run eslint to check coding style
• npm run storybook: run storybook

Project Structure

Following is the file structure of this project

• .storybook: storybook config
• src
  • images: pictures for react frontend
  • react
    • actions: define action function
    • components: react components
    • constants: redux action type constants.
    • reducers: redux states
    • request: request api function and endpoint
    • routes: define the routing rule
  • styles: universal usage styles, css files.
• .storybook: storybook storise
• storise: storybook storise

參數設定

Environment

以下是 yarn build:dev, yarn build:sit, yarn build:uat, yarn build 各自對應的環境變數

script | NODE_ENV | process.env.NODE_ENV | process.env.PROXY | process.env.API --------- | ---------- | ---------------------- | ------------------- | ----------------- build:dev | dev | dev | dev | dev build:sit | production | production | sit | sit build:uat | production | production | uat | uat build | production | production | NULL | production

CSS

CSS variables is setting at src/styles/variables, you have to import it in your target file to use it.

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