Get started with React, Redux, and React-Router.


Deprecation Warning

This project was started at the advent of the Redux ecosystem, and was intended to help users get up and running quickly. Since then, tooling and best practices have evolved tremendously. In order to get the most modern experience possible, I recommend checking out something like create-react-app which is supported by many core React and Redux developers.

You are welcome to use this project if it is a better fit for your needs, but if you are brand new to the ecosystem I highly recommend checking out something that has received more recent updates.

Thank you to everyone who made this project possible over the past year(s).

React Redux Starter Kit

Build Status dependencies devDependency Status js-standard-style

This starter kit is designed to get you up and running with a bunch of awesome front-end technologies.

The primary goal of this project is to provide a stable foundation upon which to build modern web appliications. Its purpose is not to dictate your project structure or to demonstrate a complete real-world application, but to provide a set of tools intended to make front-end development robust, easy, and, most importantly, fun. Check out the full feature list below!

Finally, This project wouldn't be possible without the help of our many contributors. What you see today is the product of hundreds changes made to keep up with an ever-evolving ecosystem. Thank you for all of your help.

Table of Contents

  1. Requirements
  2. Installation
  3. Running the Project
  4. Project Structure
  5. Live Development
  6. Routing
  7. Testing
  8. Building for Production
  9. Deployment
  10. Thank You


  • node ^5.0.0
  • yarn ^0.23.0 or npm ^3.0.0


After confirming that your environment meets the above requirements, you can create a new project based on react-redux-starter-kit by doing the following:

$ git clone <my-project-name>
$ cd <my-project-name>

When that's done, install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install will suffice.

$ yarn  # Install project dependencies (or `npm install`)

Running the Project

After completing the installation step, you're ready to start the project!

$ yarn start  # Start the development server (or `npm start`)

While developing, you will probably rely mostly on yarn start; however, there are additional scripts at your disposal:

yarn <script> Description
start Serves your app at localhost:3000
build Builds the application to ./dist
test Runs unit tests with Karma. See testing
test:watch Runs test in watch mode to re-run tests when changed
lint Lints the project for potential errors
lint:fix Lints the project and fixes all correctable errors

Project Structure

The project structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type. This structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this awesome writeup by Justin Greenberg.

├── build                    # All build-related code
├── public                   # Static public assets (not imported anywhere in source code)
├── server                   # Express application that provides webpack middleware
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── index.html           # Main HTML page container for app
│   ├── main.js              # Application bootstrap and rendering
│   ├── normalize.js         # Browser normalization and polyfills
│   ├── components           # Global Reusable Components
│   ├── containers           # Global Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   │   └── PageLayout       # Global application layout in which to render routes
│   ├── routes               # Main route definitions and async split points
│   │   ├── index.js         # Bootstrap main application routes with store
│   │   ├── Home             # Fractal route
│   │   │   ├── index.js     # Route definitions and async split points
│   │   │   ├── assets       # Assets required to render components
│   │   │   ├── components   # Presentational React Components
│   │   │   └── routes **    # Fractal sub-routes (** optional)
│   │   └── Counter          # Fractal route
│   │       ├── index.js     # Counter route definition
│   │       ├── container    # Connect components to actions and store
│   │       ├── modules      # Collections of reducers/constants/actions
│   │       └── routes **    # Fractal sub-routes (** optional)
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── styles               # Application-wide styles (generally settings)
└── tests                    # Unit tests

Live Development

Hot Reloading

Hot reloading is enabled by default when the application is running in development mode (yarn start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required. Here's how it works:

  • For JavaScript modules, a code change will trigger the application to re-render from the top of the tree. Global state is preserved (i.e. redux), but any local component state is reset. This differs from React Hot Loader, but we've found that performing a full re-render helps avoid subtle bugs caused by RHL patching.

  • For Sass, any change will update the styles in realtime, no additional configuration or reload needed.

Redux DevTools

We recommend using the Redux DevTools Chrome Extension. Using the chrome extension allows your monitors to run on a separate thread and affords better performance and functionality. It comes with several of the most popular monitors, is easy to configure, filters actions, and doesn't require installing any packages in your project.

However, it's easy to bundle these developer tools locally should you choose to do so. First, grab the packages from npm:

yarn add --dev redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor

Then follow the manual integration walkthrough.


We use react-router route definitions (<route>/index.js) to define units of logic within our application. See the project structure section for more information.


To add a unit test, create a .spec.js file anywhere inside of ./tests. Karma and webpack will automatically find these files, and Mocha and Chai will be available within your test without the need to import them. Here are a few important plugins and packages available to you during testing:


Some of the assertions available from chai use magical getters. These are problematic for a few reasons:

  1. If you mistype a property name (e.g. expect(false) then the expression evaluates to undefined, the magical getter on the true is never run, and so your test silently passes.
  2. By default, linters don't understand them and therefore mark them as unused expressions, which can be annoying.

Dirty Chai fixes this by converting these getters into callable functions. This way, if mistype an assertion, our attempt to invoke it will throw due to the property being undefined.

// This silently passes because the getter on `true` is never invoked!
it('should be true', () => {
  expect(false) // evalutes to undefined :(

// Much better! Our assertion is invalid, so it throws rather than implicitly passing.
it('should be true', () => {
  expect(false) // `tru` is not defined!

Building for Production


Out of the box, this starter kit is deployable by serving the ./dist folder generated by yarn build. This project does not concern itself with the details of server-side rendering or API structure, since that demands a more opinionated structure that makes it difficult to extend the starter kit. The simplest deployment strategy is a static deployment.

Static Deployments

Serve the application with a web server such as nginx by pointing it at your ./dist folder. Make sure to direct incoming route requests to the root ./dist/index.html file so that the client application will be loaded; react-router will take care of the rest. If you are unsure of how to do this, you might find this documentation helpful. The Express server that comes with the starter kit is able to be extended to serve as an API and more, but is not required for a static deployment.

Thank You

This project wouldn't be possible without help from the community, so I'd like to highlight some of its biggest contributors. Thank you all for your hard work, you've made my life a lot easier and taught me a lot in the process.

  • Justin Greenberg - For all of your PR's, getting us to Babel 6, and constant work improving our patterns.
  • Roman Pearah - For your bug reports, help in triaging issues, and PR contributions.
  • Spencer Dixon - For your creation of redux-cli.
  • Jonas Matser - For your help in triaging issues and unending support in our Gitter channel.

And to everyone else who has contributed, even if you are not listed here your work is appreciated.

  • Site is Invisible to Google?

    Site is Invisible to Google?

    Hey all,

    I'm trying to understand how to make my site show up in Google search, and when using webmaster tools, it appears that my site appears blank to the Google Bot. For testing purposes, I deployed the existing version of this starter kit to

    In build/webpack.config.js, I found that removing this from the config makes "Fetch as Google" show the site (but, oddly, the "what the public sees" is still blank):

          production: {
            presets: ['react-optimize']

    Has anyone had any luck getting a site made with this starter kit indexed on Google?

    Here's a screenshot of "Fetch as Google" using the latest react-redux-starter-kit build: screen shot 2016-05-20 at 1 21 13 pm

    And, here's a screenshot of "Fetch as Google" with 'react-optimize' disabled: screen shot 2016-05-20 at 1 21 44 pm

    Any thoughts? This fix appeared to make the homepage of my site show up in Google, but any page using Redux to grab content was not rendered by Google.



    opened by sinned 38
  • [ Poll ] CSS Modules vs. Sass

    [ Poll ] CSS Modules vs. Sass

    These two technologies unfortunately do not play very nicely together[1], so I'm proposing that we pick one or the other to provide the best possible user experience. The ugliest part of the starter kit right now is the CSS configuration, where we support CSS, Sass, and a configuration-hell nightmare of dynamic CSS module application.

    Personally, I think if we use CSS modules with PostCSS there is no need to use Sass, and this direction is a bit more inline with component-focused styling currently popular in the FE world. On the other hand, Sass is awesome and most people are familiar with it. Perhaps we could enable Sass support only if CSS modules are disabled, and document the fact that there are known issues/difficulties with merging the two.


    • [1]
    help wanted question 
    opened by davezuko 33
  • Fractal Project Structure

    Fractal Project Structure

    RFC: Fractal Project Structure

    Please provide feedback! Structure excerpt from README (Updated 4/11/16):

    ├── bin                      # Build/Start scripts
    ├── blueprints               # Blueprint files for redux-cli
    ├── build                    # All build-related configuration
    │   └── webpack              # Environment-specific configuration files for webpack
    ├── config                   # Project configuration settings
    ├── interfaces               # Type declarations for Flow
    ├── server                   # Koa application (uses webpack middleware)
    │   └── main.js              # Server application entry point
    ├── src                      # Application source code
    │   ├── main.js              # Application bootstrap and rendering
    │   ├── components           # Reusable Presentational Components
    │   ├── containers           # Reusable Container Components
    │   ├── layouts              # Components that dictate major page structure
    │   ├── static               # Static assets (not imported anywhere in source code)
    │   ├── styles               # Application-wide styles (generally settings)
    │   ├── store                # Redux-specific pieces
    │   │   ├── createStore.js   # Create and instrument redux store
    │   │   └── reducers.js      # Reducer registry and injection
    │   └── routes               # Main route definitions and async split points
    │       ├── index.js         # Bootstrap main application routes with store
    │       ├── Root.js          # Wrapper component for context-aware providers
    │       ├── Home             # Fractal route
    │       │   ├── index.js     # Route definitions and async split points
    │       │   ├── assets       # Assets required to render components
    │       │   ├── components   # Presentational React Components
    │       │   ├── container    # Connect components to actions and store
    │       │   ├── modules      # Collections of reducers/constants/actions
    │       │   └── routes **    # Fractal sub-routes (** optional)
    │       └── NotFound         # Capture unknown routes in component
    └── tests                    # Unit tests

    Fractal App Structure

    Also known as: Self-Contained Apps, Recursive Route Hierarchy, Providers, etc

    Small applications can be built using a flat directory structure, with folders for components, containers, etc. However, this structure does not scale and can seriously affect development velocity as your project grows. Starting with a fractal structure allows your application to organically drive it's own architecture from day one.

    We use react-router route definitions (<route>/index.js) to define units of logic within our application. Additional child routes can be nested in a fractal hierarchy.

    This provides many benefits that may not be immediately obvious:

    • Routes can be be bundled into "chunks" using webpack's code splitting and merging algorithm. This means that the entire dependency tree for each route can be omitted from the initial bundle and then loaded on demand.
    • Since logic is self-contained, routes can easily be broken into separate repositories and referenced with webpack's DLL plugin for flexible, high-performance development and scalability.

    Large, mature apps tend to naturally organize themselves in this way—analogous to large, mature trees (as in actual trees :evergreen_tree:). The trunk is the router, branches are route bundles, and leaves are views composed of common/shared components/containers. Global application and UI state should be placed on or close to the trunk (or perhaps at the base of a huge branch, eg. /app route).

    • Stateless components that dictate major page structure
    • Useful for composing react-router named components into views
    • Prefer stateless function components
      • eg: const HelloMessage = ({ name }) => <div>Hello {name}</div>
    • Top-level components and containers directories contain reusable components
    • Containers only connect presentational components to actions/state

      • Rule of thumb: no JSX in containers!
    • One or many container components can be composed in a stateless function component

    • Tip: props injected by react-router can be accessed using connect:

        // CounterMusicQueryContainer.js
        import { connect } from 'react-redux'
        import Counter from 'components/Counter'
        export default connect((state, ownProps) => ({
          counter: state.counter,
          music: // why not?
        // Location -> 'localhost:3000/counter?music=reggae'
        // Counter.props = { counter: 0, music: 'reggae' }
    • A route directory...
      • Must contain an index.js that returns route definition
      • Optional: assets, components, containers, redux modules, nested child routes
      • Additional child routes can be nested within routes directory in a fractal hierarchy.

    Note: This structure is designed to provide a flexible foundation for module bundling and dynamic loading. Using a fractal structure is optional—smaller apps might benefit from a flat routes directory, which is totally cool! Webpack creates split points based on static analysis of require during compilation; the recursive hierarchy folder structure is simply for organizational purposes.


    • [x] Migrate to a Fractal Project Structure
      • [x] Code-splitting and async reducers, demo:
        • Watch network tab and redux extension
        • Navigate to /counter route
        • Async chunks load over network and reducers are injected into store
      • [x] Add some tests for new components
        • [x] Update current tests to use enzyme APIs correctly (all except CoreLayout, I think)
      • [x] Update project structure
      • [x] Update README with some explanation
    • [x] Use pure Webpack HMR
      • [x] Apply necessary instrumentation
      • [x] Remove react-transform babel plugin from development builds
      • [x] Use redbox-react to display render errors
      • [x] Update to React-v15.0.0
    • [x] Remove Redux DevTools Components
    • [x] Improve idiomatic use of react and redux

    Please leave questions/comments

    opened by justingreenberg 33
  • node-sass compile time missing folder.

    node-sass compile time missing folder.

    I'm not sure if there's somewhere you'd rather I put an error report, but I just did a fresh install and tried npm start. This is my console log for the start, I haven't touched any code, all dependencies seem to have installed fine (except FSevents), and localhost:3000/ just shows Not Found. I checked the node-sass folder, and there's no vendor folder, so it's no surprise it wasn't found...

    colemanl@ubuntu:~/dev/cps$ npm start
    > [email protected] start /home/colemanl/dev/cps
    > better-npm-run start
    running better-npm-run in /home/colemanl/dev/cps
    Executing script: start
    to be executed: babel-node bin/server 
      app:config Creating default configuration. +0ms
      app:config Looking for environment overrides for NODE_ENV "development". +42ms
      app:config Found overrides, applying to default configuration. +22ms
      app:webpack:config Create configuration. +3s
      app:webpack:config Enable plugins for live development (HMR, NoErrors). +23ms
      app:server:webpack-dev Enable webpack dev middleware. +742ms
      app:server:webpack-hmr Enable Webpack Hot Module Replacement (HMR). +146ms
      app:bin:server Server is now running at http://localhost:3000. +21ms
    webpack built 2abd9dd14c8a3294cff9 in 10027ms
    Hash: 2abd9dd14c8a3294cff9
    Version: webpack 1.13.0
    Time: 10027ms
                                    Asset     Size  Chunks       Chunk Names
              app.2abd9dd14c8a3294cff9.js   718 kB       0       app
        1.counter.2abd9dd14c8a3294cff9.js  43.7 kB       1       counter
           vendor.2abd9dd14c8a3294cff9.js   382 kB       2       vendor
   850 kB       0       app  54.4 kB       1       counter   456 kB       2       vendor
    ERROR in ENOENT: no such file or directory, scandir '/home/colemanl/dev/cps/node_modules/node-sass/vendor'
     @ ./src/layouts/CoreLayout/CoreLayout.scss 4:14-284 13:2-17:4 14:20-290
    ERROR in ENOENT: no such file or directory, scandir '/home/colemanl/dev/cps/node_modules/node-sass/vendor'
     @ ./src/styles/core.scss 4:14-269 13:2-17:4 14:20-275
    ERROR in ENOENT: no such file or directory, scandir '/home/colemanl/dev/cps/node_modules/node-sass/vendor'
     @ ./src/routes/Home/components/HomeView.scss 4:14-291 13:2-17:4 14:20-297
    ERROR in ENOENT: no such file or directory, scandir '/home/colemanl/dev/cps/node_modules/node-sass/vendor'
     @ ./src/components/Header/Header.scss 4:14-280 13:2-17:4 14:20-286
    ERROR in ENOENT: no such file or directory, scandir '/home/colemanl/dev/cps/node_modules/node-sass/vendor'
     @ ./src/components/Counter/Counter.scss 4:14-281 13:2-17:4 14:20-287
    Child html-webpack-plugin for "index.html":
             Asset    Size  Chunks       Chunk Names
        index.html  546 kB       0       
    webpack: bundle is now VALID.
    opened by liamcoau 30
  • Use bootstrap-sass instead of css

    Use bootstrap-sass instead of css


    I'm trying to use bootstrap-sass instead of the CDN bootstrap css but I'm having some problems. Here are the steps that I did.

    This is probably something easy but it's the first time that I use webpack and I'm probably missing something.

    On _base.scss added the following lines

    @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
    @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

    On core.scss remove the following line since bootstrap-sass already provides normalize and keep the rest as it was.

    @import 'vendor/normalize';

    When I run this I get the following error

    Module build failed: CssSyntaxError: postcss-modules-local-by-default:
    (....)/project_name/core.scss:1768:30: Missing whitespace before :global
      background-color: #e6e6e6;
      border-color: #8c8c8c; }

    If I remove the :global {} and keep just the code inside the style doesn't get applyed.

    Best Regards, Fábio Correia

    opened by fabiodcorreia 30
  • Hot reload not working.

    Hot reload not working.

    I cloned the repository and installed dependencies. I started the dev server with npm start. Tried to edit HomeView.js. Nothing happens. Edited counter.js in reducers. Not updated in front end.

    However in my browser console, I get the following. image The webpack dev server is not restarting though.

    opened by risonsimon 26
  • Production Deployment not work on android browser

    Production Deployment not work on android browser

    I just folk the code and use npm run deploy:prod and then run NODE_ENV='production' npm run start, when i try to test it with android browser,it just show me blank page and i got this error in console: Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. Chrome Mobile did not has this error . Any idea of how to solve this ? I test it with default browser with Galaxy Note3. The older version (2.0.0-alpha.4) did not have this problem.

    opened by creatorkuang 23
  • Issues with CSS animations

    Issues with CSS animations

    Have no idea if this has to do with the project setup (I attempted to rule out everything), but I noticed that keyframe animations don't appear to run when rendered inside components. Has anyone else had this issue or have any thoughts on what might be the cause?

    Needs Investigation 
    opened by zsherman 23
  • Error when calling super()

    Error when calling super()

    After updating my starter kit to match, I am getting this error in production when running npm run start. It seems to be caused by my React class calling the super constructor. The base starter kit doesn't seem to call super yet, but you will definitely run into this error after adding a few React components on top of the base.

    return obj && typeof _symbol2.default !== "undefined" && obj.constructor === _symbol2.default ? "symbol" : typeof obj === "undefined" ? "undefined" : (0, _typeof3.default)(obj);

    Seemed to have tracked it here: and here: The cause seems to be updating the babel-runtime.

    opened by patrickheeney 23
  • 2.0.0 Roadmap

    2.0.0 Roadmap

    • [x] Replace Express with Koa
    • [ ] Refactor configuration overrides
    • [ ] Refactor webpack configuration
    • [ ] Compile webpack manifest separately from vendor bundle
    • [ ] Drop add-module-exports plugin
    • [ ] Replace cheap-module-eval-source-map in development
      • needs investigation
    • [ ] Re-implement better-npm-run
      • rationale: this will allow us to safely/always run tests w/ NODE_ENV=test, which opens up the door for improved configuration.
      • Also, I'm considering dropping support for the application to be compiled with NODE_ENV development since it would simplify babel configuration.
    • [ ] Enable automatic server restarts during local development (nodemon/piping/something else)
    • [ ] Upgrade react-router to ^2.0.0
    • [x] Document compatible node engines in package.json
    • [ ] Document recommended npm version (^3.5.0) in README
    • [ ] Document example projects
    • [ ] Document useful utilities (reselect, redux-state-history).
    • [ ] Revisit
    • [ ] Enzyme

    More to come.

    Also, do we cave and finally implement isomorphic rendering? I just fear the bloat.

    enhancement help wanted 
    opened by davezuko 22
  • How to use react-toolbox?

    How to use react-toolbox?

    Thank you for this starter-kit. The webpack config is pretty huge so I don't really know how to integrate react-toolbox.

    Could anyone help me out here?

    question 3rd-party integration 
    opened by ms88privat 20
  • v3.0.1(May 17, 2017)


    • Added Node ^5.0.0 to CI build


    • Removed usage of the spread operator for function arguments
    • Added missing fs-extra dependency
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(May 17, 2017)


    • Upgraded webpack to ^2.0.0 (along with all associated dependencies)
    • Upgraded react to ^15.5.4
    • Upgraded react-dom to ^15.5.4
    • Upgraded react-redux to ^5.0.4
    • Upgraded redbox-react to ^5.0.4
    • Upgraded bootstrap to ^4.0.0-alpha
    • Replaced 3rd-party bootstrap import with local dependency
    • Replaced babel-preset-stage-1 and friends with babel-preset-env
    • Added normalizer bundler for JavaScript (Promise, fetch, and Object.assign)
    • Added dirty-chai


    • Replaced PropTypes usage with prop-types package
    • Simplified project structure and configuration
    • Replaced postcss-loader usage with css-loader builtins
    • Webpack manifest is now bundled separately from vendor bundle (improves caching)
    • Replaced file-loader with url-loader
    • Moved all build-related dependencies back to devDependencies
    • Replaced better-npm-run with cross-env
    • Cleaned up some sloppy tests


    • console.log now works correctly inside of Karma


    • Code coverage reporting has been temporarily removed
    • Support for .css files has been temporarily removed (use .scss or .sass)
    • Removed normalize.css since this is now provided by bootstrap
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0-alpha.1(Jul 11, 2016)

  • v3.0.0-alpha.0(Apr 21, 2016)

  • v2.0.0(Apr 18, 2016)


    • Upgraded eslint-plugin-react to ^5.0.0
    • Upgraded fs-extra to ^0.28.0


    • Updated syntax used for createStore to match redux@^3.1.0
    • Cleaned up connect decorator in HomeView
    • Cleaned up flow types in HomeView
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.5(Apr 17, 2016)


    • Upgraded flow-bin to 0.23.0
    • Upgraded fs-extra to ^0.27.0


    • Minor cleanup in Karma configuration
    • Added missing node-style index files in blueprints


    • Modified webpack manifest initialization to prevent syntax errors in some environments (
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.4(Apr 10, 2016)


    • Upgraded react to ^15.0.0
    • Upgraded react-dom to ^15.0.0
    • Upgraded react-addons-test-utils to ^15.0.0
    • Upgraded eslint-plugin-flow-vars to ^0.3.0


    • Updated npm run deploy to be environment agnostic (no longer forces production)
    • Added npm run deploy:prod (forces production, acts as old npm run deploy)
    • Added npm run deploy:dev (forces development)


    • Removed strip_root option in Flow to support Nuclide
    • Updated webpack development configuration to use correct public_path
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.3(Mar 31, 2016)


    • Upgraded flow-interfaces to ^0.6.0


    • Moved dependencies needed for production builds from devDependencies to regular dependencies


    • Production configuration now generates assets with absolute rather than relative paths


    • Removed eslint-loader for performance reasons
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.2(Mar 17, 2016)


    • Upgraded eslint to ^2.4.0
    • Upgraded babel-eslint to ^6.0.0-beta.6
    • Upgraded better-npm-run to 0.0.8
    • Upgraded phantomjs-polyfill to 0.0.2
    • Upgraded karma-mocha-reporter to ^2.0.0
    • Upgraded webpack to ^1.12.14
    • Upgraded redux-thunk to ^2.0.0


    • Added index.js files for blueprints for convenient imports


    • Removed some cssnano options that caused potential conflicts with css modules
    • Updated flow to understand global webpack definitions
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.1(Mar 4, 2016)

  • v2.0.0-alpha.0(Mar 4, 2016)


    • Integrated with redux-cli
    • Added support for Flowtype
    • Added npm run flow:check script
    • Added chai-enzyme
    • Added babel-plugin-transform-react-constant-elements in production
    • Added babel-plugin-transform-react-remove-prop-types in production
    • Added eslint-plugin-flowvars
    • Added better-npm-run
    • Added loader for .otf files
    • Added nodemon for local server development
    • Added placeholder favicon, humans.txt, and robots.txt
    • Replaced express with koa@^2.0.0-alpha
    • Added koa-proxy with config support
    • Added koa-conntect-history-api-fallback
    • Upgraded eslint to ^2.0.0
    • Upgraded babel-eslint to ^5.0.0
    • Upgraded eslint-plugin-react to ^4.0.0
    • Upgraded yargs to ^4.0.0
    • Upgraded html-webpack-plugin from ^1.6.1 to ^2.7.1
    • Upgraded react-router to ^2.0.0
    • Replaced redux-simple-router with react-router-redux
    • Replaced phantomjs with phantomjs-prebuilt
    • Replaced Karma spec reporter with mocha reporter


    • Webpack optimization plugins are now correctly used only in production
    • Added ability to simultaneously use CSS modules and regular CSS
    • Added karma-webpack-with-fast-source-maps for selective and faster test rebuilds
    • Simplified environment-based webpack configuration
    • Fixed CSS being minified twice with both cssnano and css-loader
    • Updated cssnano to not use unsafe options by default
    • Redux devtools now looks for the browser extension if available
    • Added webpack entry point for tests to replace file globs in Karma
    • Made Webpack compiler script generic so it can accept any webpack configuration file
    • Added sample tests for counter redux module
    • Replaced react-hmre with redbox-react and react-transform-hmr
    • Disabled verbose uglify warnings during compilation
    • Updated route definition file to have access to the redux store
    • Updated server start message so link is clickable
    • ExtractTextPlugin is now correctly used whenever HMR is disabled
    • npm run deploy now cleans out ~/dist directory
    • Miscellaneous folder structure improvements
    • Removed unnecessary bin file for Karma
    • Removed unnecessary NotFoundView
    • Re-enabled support for .jsx files
    • Specified compatible Node and NPM engines


    • Fixed some development-only code not being stripped from production bundles
    • Added rimraf for ~/dist clearing to support Windows users
    • Fixed miscellaneous path issues for Windows users
    • Fixed source maps for Sass files
    • Updated server start debug message to display correct host


    • Removed redux-actions
    • Removed dotenv
    • Removed add-module-exports babel plugin

    and a bunch of other things I probably missed. Thanks again for everyone's hard work.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Dec 20, 2015)


    Huge thanks to @justingreenberg, @neverfox, @patrickheeney, @mtsr, and anybody else who has contributed to this project, you've all taught me a lot and have made this a pleasure to maintain. More changes are coming, and I'll be focusing on general project cleanup for the next week or so.


    • Upgraded from Babel 5 to Babel 6 :tada:
    • Added script to copy static assets from ~src/assets to ~/dist during compilation
    • Added CSS Modules (can be toggled on/off in config file)
    • Enabled source maps for CSS
    • Added postcss-loader
    • Added debug module to replace console.log
    • Added json-loader
    • Added url-loader for (png|jpg) files
    • Added redux-actions with demo
    • Upgraded redux-devtools from ^3.0.0-beta to ^3.0.0
    • Upgraded redux-simple-router from ^0.0.10 to ^1.0.0
    • Upgraded isparta from ^2.0.0 to ^3.0.0
    • Replaced karma-sinon-chai with karma-chai-sinon for peerDependencies fix
    • Added sample asynchronous action
    • Added example composes style to demo CSS modules in HomeView
    • Added lint:fix npm script
    • Added CONTRIBUTING document
    • Added placeholder favicon


    • Refactored application to follow ducks-like architecture
    • Improved how configuration determines when to apply HMR-specific Babel transforms
    • Replaced explicit aliases with resolve.root
    • Renamed karma configuration file to more widely-known karma.conf
    • Made CoreLayout a pure (stateless) component
    • Renamed debug namespace from kit:* to app:*
    • Standardized coding conventions
    • Added ability to easily specify environment-specific configuration overrides
    • Extended available configuration options
    • Improved miscellaneous documentation
    • Refactored webpack middleware in express server into separate files


    • Fixed DevTools imports so they are longer included in production builds
    • Added CSS best practices to root tag, node, and core.scss file
    • Disabled manifest extraction due to broken production builds
    • Updated Webpack dev server uses explicit publicPath during live development
    • Fixed Karma running tests twice after file change during watch mode


    • Removed eslint-config-airbnb
    • Deprecated support for Node ^4.0.0
    Source code(tar.gz)
    Source code(zip)
  • v0.18.0(Dec 1, 2015)



    • Replaces webpack-dev-server with Express and webpack middleware
    • Replaces redux-router with redux-simple-router
    • Use postcss-loader for autoprefixing rather than autoprefixer-loader
    • Configuration will now warn you of missing dependencies for vendor bundle
    • Upgrade react-router from 1.0.0-rc1 -> ^1.0.0
    • Upgrade css-loader from 0.21.0 -> 0.23.0
    • Upgrade eslint-config-airbnb from 0.1.0 to ^1.0.0
    • Upgrade karma-spec-reporter from 0.0.21 to 0.0.22
    • Upgrade extract-text-webpack-plugin from ^0.8.0 to ^0.9.0


    • Compiled index.html is now minified
    • Content hashes are now injected directly into the filename rather than appended as query strings
    • Better reporting of webpack build status
    • Use object-style configuration for sass-loader rather than inline query string
    • Rename test:lint task to lint:tests
    • Various documentation improvements


    • Content hash is now longer duplicated in CSS bundle
    • Karma plugins are autoloaded now, rather than explicitly defined
    • Removes extraneous wrapping div in Root container
    • Fixes awkwardly named arguments to createReducer utility
    • Add missing alias to ~/src/store
    Source code(tar.gz)
    Source code(zip)
  • v0.17.0(Nov 4, 2015)


    • Karma coverage now generates proper coverage reports
    • Added chai-as-promised
    • Added npm run lint script to lint all ~/src code
    • Added npm run test:lint script to lint all *.spec.js files in ~/tests
    • Updated npm run deploy to explicitly run linter on source code
    • Added dotenv (thanks dougvk)


    • Renamed application entry point from index.js -> app.js (clarifies intent and helps with coverage reports)
    • Refactored sample counter constants and actions to their appropriate locations (thanks kyleect)
    • Devtools in npm run dev:nw now take up the full window (thanks jhgg)
    • Webpack no longer runs an eslint pre-loader (cleans up console messages while developing)
    • Moved tests into their own directory (alleviates lint/organization issues)
    • Renamed stores to store to be more intuitive
    • Webpack-dev-server now uses a configurable host (thanks waynelkh)
    • Sass-loader is now configured independently of its loader definition
    • Upgraded redux-devtools from ^2.0.0 -> ^3.0.0
    • Upgraded react-transform-catch-errors from ^0.1.0 -> ^1.0.0


    • Fix .editorconfig missing a setting that caused it to not be picked up in all IDE's
    • Cleans up miscellaneous lint errors.
    Source code(tar.gz)
    Source code(zip)
  • v0.16.0(Oct 21, 2015)


    • Adds redux-router (thanks to dougvk)
    • Adds redux-thunk middleware
    • Adds loaders for font files (thanks to nodkz)
    • Adds url loader
    • Upgrades React dependencies to stable ^0.14.0
    • Upgrades react-redux to ^4.0.0


    • Cleans up unused configuration settings
    • configureStore no longer relies on a global variable to determine whether or not to enable devtool middleware
    • Removes unused invariant and ImmutableJS vendor dependencies
    • Removes unused webpack-clean plugin
    • Tweaks .js loader configuration to make it easier to add json-loader
    • Updates counter example to demonstrate mapDispatchToProps
    • Force components directory inclusion
    • Documentation improvements
    Source code(tar.gz)
    Source code(zip)
  • v0.15.2(Oct 9, 2015)

  • v0.15.1(Sep 30, 2015)


    • Dev server now loads the correct Webpack configuration with HMR enabled.
    • Redbox-React error catcher is now loaded correctly in development.
    Source code(tar.gz)
    Source code(zip)
  • v0.15.0(Sep 30, 2015)


    • HMR is now longer enabled for simple compilations. You can now compile development builds that won't constantly ping a non-existent dev server.
    • react-transform-hmr now only runs when HMR is enabled.


    • Unit tests now only run in watch mode when explicitly requested. This makes it much more convenient to run tests on any environment without having to struggle with the singleRun flag in Karma.
    • There is now only a single webpack configuration (rather than one for the client and one for the server). As a result, configuration has once again been split into a base configuration which is then extended based on the current NODE_ENV.


    • Removed Koa server (sad days).
    Source code(tar.gz)
    Source code(zip)
  • v0.14.0(Sep 21, 2015)


    • Replaces react-transform-webpack-hmr with its replacement react-transform-hmr. Thanks to daviferreira.
    • Replaces delicate-error-reporter with redbox-react. Thanks to bulby97.
    • Created a no-server branch here to make it easier for users who don't care about Koa.


    • Renames client directory to src to be more intuitive.
    • inline-source-map has been replaced by source-map as the default webpack devTool to reduce build sizes.
    • Refactors configuration file to focus on commonly-configured options rather than mixing them with internal configuration.
    • Swaps dev and dev:debug so debug tools are now enabled by default and can be disabled instead with dev:no-debug.
    • Repositions Redux devtools so they no longer block errors displayed by redbox-react.
    • Adds explicit directory references to some import statements to clarify which are from from npm and which are local.


    • Fixes naming in HomeView where mapStateToProps was incorrectly written as mapDispatchToProps.


    • Removes local test utilities (in ~/src/utils/test).
    Source code(tar.gz)
    Source code(zip)
  • v0.13.0(Sep 13, 2015)


    • Adds react-transform-catch-errors along with delicate-error-reporter. Thanks bulby97 for this!


    • ExtractTextPlugin is once again production only. This fixes an issue where styles wouldn't be hot reloaded with Webpack.
    Source code(tar.gz)
    Source code(zip)
  • v0.12.0(Sep 13, 2015)


    • Upgrades react-router to ^3.0.0. This is the only reason for the minor-level version bump.
    • Webpack now uses OccurrenceOrderPlugin to produce consistent bundle hashes.


    • Adds history to vendor dependencies to fix HMR caused by upgrade to react-router 1.0.0-rc


    • Server no longer modifies initial counter state by default.
    • Adds invariant error in route rendering method to enforce router state definition through props.
    Source code(tar.gz)
    Source code(zip)
  • v0.11.0(Sep 12, 2015)


    • Upgrades all React dependencies to 0.14.0-rc1
    • Upgrades react-router to 1.0.0-rc
      • Updates client and server rendering accordingly
    • Adds Sinon-Chai for improved assertions and function spies
    • Adds option to disable eslint when in development


    • Improved example unit tests using react-addons-test-utils and Sinon Chai
    Source code(tar.gz)
    Source code(zip)
  • v0.10.0(Sep 7, 2015)


    • Initial state can now be injected from the server (still WIP).
    • Adds react-addons-test-utils as a devDependency.


    • Eslint no longer prevents webpack from bundling in development mode if an error is emitted.
      • See:
    • Updates all .jsx files to .js. (
    • Updates all React component file names to be ProperCased.
    Source code(tar.gz)
    Source code(zip)
  • v0.9.0(Sep 4, 2015)


    • Koa server now uses gzip middleware.


    • Switches out react-hot-loader in favor of react-transform-webpack-hmr.
    • Eslint configuration now uses Airbnb's configuration (slightly softened).
    • Migrates all actual development dependencies to devDependencies in package.json.
    • Example store and view are now more intuitive (simple counter display).
    • CSS-loader dependency upgraded from 0.16.0 to 0.17.0.


    • Removes unnecessary object-assign dependency.
    Source code(tar.gz)
    Source code(zip)
  • v0.8.0(Sep 2, 2015)


    • All build-, server-, and client-related code is now ES6.
    • Significantly refactors how client and server webpack configs are built.
    • reducers/index.js now exports combined root reducer.
    • Client application code now lives in ~/client instead of ~/src in order to conform to Redux standards.


    • Redux store now explicitly handles HMR.


    • Webpack compiler configurations are no longer merged on top of a base default configuration. This can become unwieldy and even though explicitly writing each configuration file out is more verbose, it ends up being more maintainable.


    • Quiet mode has been removed (npm run dev:quiet).
    Source code(tar.gz)
    Source code(zip)
  • v0.7.0(Sep 1, 2015)

    New Features

    • Support for redux-devtools in separate window with dev:debugnw


    • Upgrades react to 0.14.0-beta3
    • Upgrades react to 0.14.0-beta3
    • Upgrades redux to ^2.0.0
    • Upgrades redux-devtools to ^2.0.0
    • Upgrades react-redux to ^2.0.0


    • Configuration file name trimming on Windows machines
    Source code(tar.gz)
    Source code(zip)
David Zukowski
✈️ 🔭 🏒 ⌨️ 📖 🎾
David Zukowski
Get started with developing emails with React Components

mjml-react-starter Get started with developing emails with React Components. This starter includes dev and build scripts to get you started with 1 com

Daphne 7 Sep 22, 2022
Dapp-core-components - A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

Elrond Network 4 Jan 6, 2023
A starter pack to get started with building dapps on Celo

Celo Progressive Dapp Starter A starter pack to get started with building dapps on Celo. You can view a live version of the template deployed at https

Valentin Foucault 2 Apr 27, 2022
Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project.

react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the

Numanqmr 10 Sep 10, 2022
Cheatsheets for experienced React developers getting started with TypeScript

React+TypeScript Cheatsheets Cheatsheets for experienced React developers getting started with TypeScript Web docs | 中文翻译 | Español | Português | Cont

TypeScript Cheatsheets 38.7k Jan 3, 2023
Cheatsheets for experienced React developers getting started with TypeScript

React+TypeScript Cheatsheets Cheatsheets for experienced React developers getting started with TypeScript Web docs | 中文翻译 | Español | Português | Cont

Uvacoder 15 Feb 20, 2022
A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Colin Meinke 65 Oct 13, 2022
A template repo for creating react-ts apps based on vite. Libs like axios, antd, @apollo/client, eslint, stylelint, react-router-dom and @syy11cn/config-router are pre-installed.

Template Repo for React + Typescript + Vite Introduction This is a template repo for projects built with react and typescript on the basis of vite. Fe

Yiyang Sun 11 May 24, 2022
Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes.

Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes. No configuration is required, Start building your App.

Nilanth 33 Dec 21, 2022
React boilerplate that includes Redux, Redux Toolkit, React Router, React-Bootstrap

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template. Available Scripts In the project directory, you can r

null 2 Dec 13, 2021
Enjoy React, Redux, and React-Router, with zero build configuration.

react-redux-starter-kit This is yet another single page web application template using React. However, this project attempts to balance simplicity wit

cloudmu 352 Nov 29, 2022
A hapi React Starter kit with react-router, redux, react-transform

hapi-react-starter-kit A hapi React Starter kit with react-router, redux, react-transform Light and fast - Don't be sad, be hapi! Inspired by This rep

Roberto Ortis 170 Dec 1, 2022
React + Redux + Firebase + Webpack + React Hot Loader 3 + React Router in one boilerplate

Firebase 3.0 Starter using React Redux This is a Firebase 3.0 start using React and Redux. It uses the latest version of libraries, including the bran

Douglas Correa 377 Nov 29, 2022
demo with react,ant-design,redux,react-router,webpack,babel

star-initReact-example A demo with star-initReact-example ##效果截图 首页 列表页 弹框 表格组件 echart 使用技术和实现功能 webpack + React +React-router + React-redux +ES6 + an

对影三人 76 Apr 15, 2022
React + React Router 1.0 + Redux + Webpack & Hot Module Replacement

React scaffolding An opinionated scaffolding with the following technical stack and configuration: React (15.x.x) React Router (2.x) Flux by using Red

Rafael 29 Feb 26, 2021
This is a template repository to get up and running quickly with: Express, React, Jest, Docker, and Github Actions for CI/CD.

This is a template repository to get up and running quickly with: Express, React, Jest, Docker, and Github Actions for CI/CD.

Harrison (Harry) Cramer 15 Oct 25, 2022
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

yuzhou 102 Nov 21, 2022
A boilerplate of SPA, built with React.js, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design...

Getting start Clone this repo: $ git clone Install dependenices: $ npm i Start the project: $ npm

Jovey Zheng 109 Mar 1, 2022
Palo-mern-boilerplate - A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly. Commands: npm install # install b

Jim 10 Oct 31, 2022