- Babel for ES6 and ES7 transpiling
- Koa Webpack Dev Middleware
- Koa Webpack Hot Middleware
- ESLint uses airbnb linting preferences
- StyleLint includes style linter for our css/stylus code
- Redux's futuristic Flux implementation
- React Router Redux Redux/React Router bindings.
To Do List
ReactJS, Redux, Webpack, PostCSS, Stylus, ESLint, StyleLint, ES6, Modern Front End Starter Boilerplate
Things planned for this boilerplate:
- Add ES6 Support with .babelrc
- Webpack Configuartions in ES6
- StyleLint for linting css/stylus
- Add Plugins for PostCSS (CSSNext which includes autoprefixer, RucksackCSS, Sorting, Mixins, and Short)
- Added support for CSS Modules
- React Router
- Add Redux Example Counter
Suggestions are welcome!
Download this by entering this command in your terminal:
$ git clone https://github.com/tonytainguyen/Modern-ReactJS-Starter-Boilerplate.git
Navigate in the project and run the good ol' npm install and start to boot up the localhost. Feel free to change the port anytime in /webpack/config.js
npm install npm start
There are more commands to which I have included in the package.json file which include the following:
npm startstarts up localhost with browserSync and hot reloading
npm run compilecompiles project and puts them in the /dist folder.
npm run deployremoves the dist folder and compiles afterwards.
npm run cleanremoves the dist folder and clears npm cache.
- Stylus with React CSS modules
- PostCSS Plugins included: RucksackCSS, Sorting.
- CSS extraction and Uglify on Production build.
- Supports Component Styling ie:
- Fork this!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request!
- It will be reviewed and appreciated!
Just put this all together for myself and what I believe are best practices and saves me time and maybe you can benefit off it too! I love using tools that would increase my productivity. I had also structured my webpack to what I believe is pretty organized and not repeating a lot of code like those other boilerplates. My goal was to make webpack easy to understand as much as possible and hopefully I have done that. I will be constantly updating this project! All ideas/suggestions/pull requests are welcome!
Copyright (c) 2015-2016 Tony Tai Nguyen