https://github.com/leecade/fe
:dog: Provide Font-End 2017 Tech Stack and standalone build environment
https://github.com/leecade/fe
Last synced: about 1 year ago
JSON representation
:dog: Provide Font-End 2017 Tech Stack and standalone build environment
- Host: GitHub
- URL: https://github.com/leecade/fe
- Owner: leecade
- License: mit
- Created: 2012-09-17T11:24:10.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2020-06-01T01:17:09.000Z (about 6 years ago)
- Last Synced: 2025-06-09T19:49:29.711Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 8.59 MB
- Stars: 15
- Watchers: 4
- Forks: 4
- Open Issues: 106
-
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
> LOGO meaning: The [golden retriever](https://en.wikipedia.org/wiki/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](https://github.com/leecade/fe/tree/master)
> You can review the old project [here](https://github.com/leecade/fe/tree/master) and `npm i fe -g` still works.
`1.0` [WIP](https://github.com/leecade/fe/milestone/1)
> 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
```sh
$ git clone
$ yarn # or npm i
$ yarn dev
$ npm link # you got the global `fe`
```
release
```sh
$ 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)
```sh
$ touch fe.config.json
```
That's all that matters, now let's get started:
```sh
$ 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:
```sh
$ npm init -y
$ npm i react react-dom -S
```
Following the [react tutorial](https://facebook.github.io/react/), we put some code in `src/index.js`
```jsx
import React, { Component } from 'react'
import { render } from 'react-dom'
class HelloMessage extends Component {
state = {
name: 'FE Stack'
}
render() {
return
Hello {this.state.name}
}
}
render(, document.getElementById('root'))
```
Great! It works. Next Step: we fetch some mock data:
```sh
$ mkdir -p mock/TaskList
$ touch mock/TaskList/index.js
```
Put the following code in `mock/TaskList/index.js`:
```js
module.exports = [{
method: 'GET',
route: '/task-list',
handler: {
"data": [{
"name": "task1"
}, {
"name": "task2"
}]
}
}]
```
Then restart `fe d` and update `src/index.js`:
```jsx
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
Hello {this.state.name}, {JSON.stringify(this.state.mockData)}
}
}
render(, document.getElementById('root'))
```
> See [src/config/default.js](src/config/default.js) for more information about `fe.config.json`
```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
```sh
$ fe init mydemo
```
## Ecosystem 
```sh
$ fe list
```
### Available official [components](https://github.com/fe-components)
| component name | description |
| ------------- |:-------------|
| [fe-reset](https://github.com/fe-components/fe-reset) | CSS reset implementation in FE stack |
| [fe-datepicker](https://github.com/fe-components/fe-datepicker) | |
| [fe-upload](https://github.com/fe-components/fe-upload) | |
| [fe-table](https://github.com/fe-components/fe-table) | |
| [fe-pagination](https://github.com/fe-components/fe-pagination) | |
| [fe-input](https://github.com/fe-components/fe-input) | |
| [fe-select](https://github.com/fe-components/fe-select) | |
| [fe-form](https://github.com/fe-components/fe-form) | |
| [fe-modal](https://github.com/fe-components/fe-modal) | |
| [fe-button](https://github.com/fe-components/fe-button) | |
### Available official [boilerplates](https://github.com/fe-boilerplate)
| boilerplat name | description |
| ------------- |:-------------|
| [basic](https://github.com/fe-boilerplate/basic) | A basic boilerplate |
| [redux](https://github.com/fe-boilerplate/redux) | redux+route4+immutable |
| [mobx](https://github.com/fe-boilerplate/mobx) | TODO |
| [dva](https://github.com/fe-boilerplate/dva) | TODO |
| [ant](https://github.com/fe-boilerplate/ant) | TODO |
| [ant](https://github.com/fe-boilerplate/ant) | TODO |