This repo is a boilerplate for React-Babel-Webpack project. You could use it as a base to build your own web app.
- Equip with React, ES6 & Babel 6
- Lint with ESlint and Airbnb's style sheet.
- Build with Webpack(support Webpack 1 & Webpack 2)
- Support hot module replacement
- Auto Open a new browser tab when Webpack loads, and reload the page when you modified the code
- Use Commitizen to produce commit message according to AngularJS convention
- Support git hook
pre-commit
used to lint and test your code - Support git hook
commit-msg
used to lint your commit message - Use conventional-changelog to generate
CHANGELOG.md
First, clone the repo.
$ git clone https://github.com/ruanyf/react-babel-webpack-boilerplate.git <yourAppName>
$ cd <yourAppName>
Important: master
branch only supports Webpack 1. If you want to use Webpack 2, please switch to webpack2
branch which will be the default branch in the near future.
# only run the command when you want to use Webpack 2
$ git checkout webpack2
Second, delete the old .git
history and initialize new history.
$ rm -rf .git
$ git init
Third, install the dependencies.
$ npm install
Then, launch the boilerplate app.
$ npm start
Now you should see a new browser window/tab opening and a title of "Hello World" in http://127.0.0.1:8080.
Last, You need update package.json
and modify fields like name
, version
, description
, keywords
, author
, license
and so on to fit your project.
From there, you start to develop your own code in the app
directory. When you finish coding, use npm run build
or npm run deploy
to build the static files.
Attention, when committing your code, you should use AngularJS's commit message convention. Otherwise, the repo will throw an error. If you use npm run commit
instead of git commit
, the command will help you to produce a formatted commit message.
MIT