🐶 Provide Font-End 2017 Tech Stack and standalone build environment
JavaScript Shell HTML AppleScript Ruby CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
example
res
scripts
src
test
.babelrc
.coveralls.yml
.editorconfig
.gitattributes
.gitignore
.travis.yml
LICENSE-MIT
README.md
TODO.md
appveyor.yml
circle.yml
gulpfile.babel.js
maintaining.md
package.json
readme.md
webpack.config.babel.js
yarn.lock

README.md

FE

FE Stack JavaScript Style Guide npm version npm version Circleci Appveyor Coveralls Slack

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


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

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

screenshot

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 Stack

$ 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