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.jsonThat'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 -SFollowing 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.jsPut 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 listAvailable 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 |
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent