ReactJS, Redux, Webpack, PostCSS, Stylus, ESLint, StyleLint, ES6 Starter Boilerplate
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
src
webpack
.babelrc
.eslintignore
.eslintrc
.gitignore
.stylelintrc
LICENSE
README.md
package.json

README.md

ReactJS-Starter-Boilerplate

Features

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
  • ReactJS
  • ESLint
  • StyleLint for linting css/stylus
  • PostCSS
  • Add Plugins for PostCSS (CSSNext which includes autoprefixer, RucksackCSS, Sorting, Mixins, and Short)
  • Added support for CSS Modules
  • React Router
  • Redux
  • Add Redux Example Counter

Suggestions are welcome!

Installation

Download this by entering this command in your terminal:

$ git clone https://github.com/tonytainguyen/Modern-ReactJS-Starter-Boilerplate.git

Usage

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 start starts up localhost with browserSync and hot reloading
  • npm run compile compiles project and puts them in the /dist folder.
  • npm run deploy removes the dist folder and compiles afterwards.
  • npm run clean removes the dist folder and clears npm cache.

Styles

  • Stylus with React CSS modules
  • PostCSS Plugins included: RucksackCSS, Sorting.
  • CSS extraction and Uglify on Production build.
  • Supports Component Styling ie: styleName="awesome" using CSSModules.

Contributing

  1. Fork this!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request!
  6. It will be reviewed and appreciated! 😄

History

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!

License

Copyright (c) 2015-2016 Tony Tai Nguyen

MIT (http://opensource.org/licenses/mit-license.php)