node package manager

fe

React ecosystem tool

LOGO means: The golden retriever is a professional guard dog, gentle temperament, strongly, also very smart and friendly to their caregivers.


🍺 Basic available, still work in progress, put my work plan here.

  • [0.1.21]

    • [Improve] Add auto publish hook
  • [0.1.20]

    • [default config] Change default public path to / to fixes 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
$ git clone
$ yarn # or npm i 
$ yarn dev
$ npm link # you got the global `fe` 
$ npm publish # auto bump version 
# build the release pkg 
$ yarn release # change the tar download url if you have another one 

FE Stack

TODO

  • *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
  • Windows

TODO

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, let's get started:

$ fe d # alias `fe dev` 

Type Enter if be requested to generate entry file

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

Next step, we initialize React environment:

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

Follow 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 try to 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