LOGO meaning: The golden retriever is a professional guard dog with a gentle temperament, strong, very smart and friendly to their caregivers.

---

NEW PLAN

0.1.xDEPRECATED

You can review the old project here and npm i fe -g still works.

1.0WIP

Refactor for better engineering and new techs such as SSR.

BETA VERSION CHANGELOG

• [0.1.21]

  • [Improve] Add auto publish hook

• [0.1.20]

  • [default config] Change default public path to / to fix bundle url error in child-routing + browser router
  • [Bug] Fixes default behavior of touch to avoid undefined content
  • [Install script] Improve double refresh environment variable

Developer Guide

$ git clone
$ yarn # or npm i
$ yarn dev
$ npm link # you got the global `fe`

release

$ npm run build
$ npm version patch -m "bump version"
$ npm publish # auto bump version# build the release pkg
$ yarn release # change the tar download url if you have another one

---

FE Stack

Motivation

TODO

Install

Depends on

• node 4+
• npm 3+

*nix(OSX / Debian / Centos ...)

curl https://raw.githubusercontent.com/leecade/fe/master/scripts/install.sh -L -o - | sh

Recommend Chinese users

General install through node

npm install fe -g

OSX

TODO

$ brew install fe

use curl https://raw.githubusercontent.com/leecade/fe/master/scripts/install.sh -L -o - | sh fallback first

Windows

TODO

use npm i -g fe fallback first

Get started

The quickly and manual way

Just create a json file named fe.config.json(labeling the root location of your project)

$ touch fe.config.json

That's all that matters, now let's get started:

$ fe d # alias `fe dev`

Type Enter if requested to generate entry file

Now that we are in dev mode, you may edit the src/index.js with liveload supports.

Next, we initialize React environment:

$ npm init -y
$ npm i react react-dom -S

Following the react tutorial, we put some code in src/index.js

importReact,{Component}from'react'import{render}from'react-dom'classHelloMessageextendsComponent{state={name: 'FE Stack'}render(){return<div>Hello {this.state.name}</div>}}render(<HelloMessagename="Jane"/>,document.getElementById('root'))

Great! It works. Next Step: we fetch some mock data:

$ mkdir -p mock/TaskList
$ touch mock/TaskList/index.js

Put the following code in mock/TaskList/index.js:

module.exports=[{method: 'GET',route: '/task-list',handler: {"data": [{"name": "task1"},{"name": "task2"}]}}]

Then restart fe d and update src/index.js:

importReact,{Component}from'react'import{render}from'react-dom'classHelloMessageextendsComponent{state={name: 'FE Stack',mockData: ''}componentDidMount(){fetch('/api/task-list').then(res=>res.json()).then(mockData=>this.setState(Object.assign({},this.state,{ mockData })))}render(){return<div>Hello {this.state.name}, {JSON.stringify(this.state.mockData)}</div>}}render(<HelloMessagename="Jane"/>,document.getElementById('root'))

See src/config/default.js for more information about fe.config.json

{
"TITLE": "PAGE_TITLE",
"HOST": "localhost",
"HTTPS": false,
"DEV_SERVER_PORT": 3000,
"MOCK_PREFIX": "/_mock",
"PROXY": {
"/api": {
"target": "http://localhost:3000/",
"pathRewrite": {"^/api": "/_mock"}
}
},
"inChina": true,
"FE_CONFIG_FILE": "fe.config.json",
"BUILD_DIR": "build",
"CONFIG_DIR": "config",
"MOCK_DIR": "mock",
"PUBLIC_DIR": "public",
"SRC_DIR": "src",
"EMPTY_FILE": "config/empty.js",
"TEMPLATE_FILE": "config/template.ejs",
"ENTRY_FILE": "src/index.js",
"POLYFILLS_FILE": "config/polyfills.js",
"HTML_FILE": "public/index.html",
"TEST_SETUP_FILE": "config/setupTests.js",
"publicPath": ""
}

The right and concise way

$ fe init mydemo

Ecosystem

$ fe list

Available official components

component name	description
fe-reset	CSS reset implementation in FE stack
fe-datepicker
fe-upload
fe-table
fe-pagination
fe-input
fe-select
fe-form
fe-modal
fe-button

Available official boilerplates

boilerplat name	description
basic	A basic boilerplate
redux	redux+route4+immutable
mobx	TODO
dva	TODO
ant	TODO
ant	TODO