# React Static Boilerplate
[](https://www.npmjs.com/package/generator-react-static)
[](https://www.npmjs.com/package/generator-react-static)
[](https://travis-ci.org/koistya/react-static-boilerplate)
[](https://david-dm.org/koistya/react-static-boilerplate)
[](https://github.com/koistya/react-static-boilerplate/issues?q=is:open)
[](https://waffle.io/koistya/react-static-boilerplate)
[](https://waffle.io/koistya/react-static-boilerplate)
> Static website starter kit powered by [React.js](http://facebook.github.io/react/) and [Webpack](http://webpack.github.io/)
### Features
✓ Modern JavaScript syntax ([ES2015](http://babeljs.io/docs/learn-es2015/)+) via [Babel](http://babeljs.io/)
✓ Modern CSS syntax (CSS3+) via [PostCSS](https://github.com/postcss/postcss)
✓ Application state management via [Redux](http://redux.js.org/)
✓ Routing and navigation via [React App](https://github.com/kriasoft/react-app), [Universal Router](https://github.com/kriasoft/universal-router), [History](https://github.com/mjackson/history)
✓ Modular styles via [CSS Modules](https://github.com/css-modules/css-modules)
✓ [Code-splitting](https://github.com/webpack/docs/wiki/code-splitting) and async chunk loading
✓ Hot Module Replacement ([HMR](https://webpack.github.io/docs/hot-module-replacement.html)) /w [React Hot Loader](http://gaearon.github.io/react-hot-loader/)
✓ Bundling and optimization with [Webpack](https://webpack.github.io/)
✓ Cross-device testing with [Browsersync](https://browsersync.io/)
✓ Easy deployment to [GitHub Pages](https://pages.github.com/), [Amazon S3](http://davidwalsh.name/hosting-website-amazon-s3) or [Firebase](https://www.firebase.com/)
✓ [Yeoman](http://yeoman.io/) generator ([generator-react-static](https://www.npmjs.com/package/generator-react-static))
✓ 24/7 community support on [Gitter](https://gitter.im/koistya/react-static-boilerplate) or [StackOverflow](http://stackoverflow.com/questions/tagged/react-starter-kit)
✓ Customization requests on [Codementor](https://www.codementor.io/koistya)
### Sponsors
### Directory Layout
```shell
.
├── /build/ # The folder for compiled output
├── /node_modules/ # 3rd-party libraries and utilities
├── /components/ # Shared/generic UI components
│ ├── /layout/ # Layout component
│ ├── /button/ # Button component
│ └── /... # etc.
├── /core/ # Core framework
│ ├── /app.js # Application entry point (bootstrap)
│ ├── /store.js # Application state manager (Redux)
│ └── /... # etc.
├── /routes/ # View/screen UI components + routing information
│ ├── /about/ # About page
│ ├── /error/ # Error page
│ ├── /home/ # Home page
│ └── /... # etc.
├── /static/ # Static files such as favicon.ico etc.
├── /test/ # Unit and integration tests
├── /tools/ # Build automation scripts and utilities
│── LICENSE.txt # Licensing information
│── package.json # The list of project dependencies and NPM scripts
└── README.md # Project overview / getting started guide
```
### Getting Started
Just clone the repo, install Node.js modules and run `npm start`:
```shell
$ git clone -o react-static-boilerplate -b master --single-branch \
https://github.com/jun0205/react-static-boilerplate.git MyApp
$ cd MyApp
$ npm install # Install project dependencies listed in package.json
$ npm start # Build and launch the app, same as "node tools/start.js"
```
**NODE**: Make sure that you have [Node.js](https://nodejs.org/) v6 installed on your local machine.
### How to Test
The unit tests are powered by [chai](http://chaijs.com/) and [mocha](http://mochajs.org/).
```shell
$ npm test
```
### How to Deploy
```shell
$ npm run deploy # Deploys the project to GitHub Pages
```
Alternatively, you can build a production release to manually deploy to S3, Firebase, Netlify, and other static hosts. Simply run the command below and copy the generated `build` folder to your static host.
```shell
$ npm run build release # Build production release
```
### How to Update
You can always fetch and merge the recent changes from this repo back into your own project:
```shell
$ git checkout master
$ git fetch react-static-boilerplate
$ git merge react-static-boilerplate/master
$ npm install
```
### Backers
Love **React Static Boilerplate** work and community? Help us keep it alive by [donating funds](https://opencollective.com/react-static-boilerplate#support) to cover project expenses!
### Related Projects
* [React Starter Kit](https://github.com/kriasoft/react-starter-kit) — Isomorphic web app boilerplate (Node.js, React, GraphQL, Webpack, CSS Modules)
* [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — JavaScript library boilerplate (ES2015, Babel, Rollup, Mocha, Chai, Sinon, Rewire)
* [React App](https://github.com/kriasoft/react-app) — Bootstrap React app with routing, navigation, context variables and title/meta management
* [Universal Router](https://github.com/kriasoft/universal-router) — Isomorphic router for web and single-page applications (SPA)
* [History](https://github.com/mjackson/history) — HTML5 History API wrapper library
* [Membership Database](https://github.com/membership/membership.db) — SQL schema boilerplate for user accounts, roles and auth tokens
### Learn More
* [Getting Started with React.js](http://facebook.github.io/react/)
* [Getting Started with GraphQL and Relay](https://quip.com/oLxzA1gTsJsE)
* [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
* [React.js Discussion Board](https://discuss.reactjs.org/)
* [Learn ES6](https://babeljs.io/docs/learn-es6/), [ES6 Features](https://github.com/lukehoban/es6features#readme)
### License
Copyright © 2015-2016 Konstantin Tarkus. This source code is licensed under the MIT license found in the
[LICENSE.txt](https://github.com/koistya/react-static-boilerplate/blob/master/LICENSE.txt) file.
---
Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) and [contributors](https://github.com/koistya/react-static-boilerplate/graphs/contributors)