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.x DEPRECATED

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

1.0 WIP

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

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": ""
}

The right and concise way

$ fe init mydemo

Ecosystem

$ fe list

Available official components

Available official boilerplates