LOGO meaning: The golden retriever is a professional guard dog with a gentle temperament, strong, very smart and friendly to their caregivers.
0.1.x DEPRECATED
You can review the old project here and
npm i fe -gstill works.
1.0 WIP
Refactor for better engineering and new techs such as SSR.
-
[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
undefinedcontent - [Install script] Improve double refresh environment variable
- [default config] Change default public path to
$ 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
TODO
Depends on
- node 4+
- npm 3+
curl https://raw.githubusercontent.com/leecade/fe/master/scripts/install.sh -L -o - | sh
Recommend Chinese users
npm install fe -g
TODO
$ brew install fe
use
curl https://raw.githubusercontent.com/leecade/fe/master/scripts/install.sh -L -o - | shfallback first
TODO
use
npm i -g fefallback first
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
import React, { Component } from 'react' import { render } from 'react-dom' class HelloMessage extends Component { state = { name: 'FE Stack' } render() { return <div>Hello {this.state.name}</div> } } render(<HelloMessage name="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:
import React, { Component } from 'react' import { render } from 'react-dom' class HelloMessage extends Component { 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(<HelloMessage name="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": ""
}$ fe init mydemo
$ 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 |