A SPA boilerplate with React, built with love.
- React 15.4.2
- react-router 3.0.2 will be updated to v4 whenever the version is stable.
- JSX
- ES6
- webpack 2.2
- Express the dev-server.
- Hot-Reload
- Proxy
- Global-Variable
- ESlint with
standard
andstandard-react
# install sao first
npm install -g sao
# download the template
sao SidKwok/react-webpack-boilerplate new-project --install
# install all this dependencies.
npm install
# development, default port: 8080
npm run dev
# production
npm run build
# lint the files (if use eslint)
npm run lint
It is pretty much the same config as vue-cli/webpack. If you are familiar with vue-cli
, you may have a great joy with this boilerplate.
You can take less
, sass
, or stylus
as your CSS pre-processors, after installing the dependencies. For example, to use less
:
npm install less less-loader --save-dev
Then, you can import
your less
files in your components.
The boilerplate uses http-proxy-middleware for proxying.
For example, you want to proxy /api/get-post
and /api/get-id
, you can edit the option in config/index.js
:
...
dev: {
proxyTable: {
'api': {
target: 'http://example.org',
changeOrigin: true
}
}
}
...
Then, you can proxy /api
in your dev server.
This doc can illustrate the usage well.
The boilerplate uses react-hot-loader v3 to tweak React components.
standard and standard-react are the default style guides for this boilerplate, feel free to edit your own config in .eslintrc.js
.
The production files are built for server, so you are not supposed to visit index.html
directly. To make it works, you should use a static server:
npm install -g anywhere # or others
# in `./dist`
anywhere
- eslint
- unit test
- e2e test
- Redux comming soon!