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

Last update: Dec 23, 2022

Related tags

Overview

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

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.

Requirements
Installation
Running the Project
Project Structure
Live Development
- Hot Reloading
- Redux DevTools
Routing
Testing
- dirty-chai
Building for Production
Deployment
Thank You

Requirements

node ^5.0.0
yarn ^0.23.0 or npm ^3.0.0

Installation

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 https://github.com/davezuko/react-redux-starter-kit.git <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.

Routing

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.

Testing

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:

dirty-chai

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

If you mistype a property name (e.g. expect(false).to.be.tru) then the expression evaluates to undefined, the magical getter on the true is never run, and so your test silently passes.
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).to.be.tru // evalutes to undefined :(
})

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

Building for Production

Deployment

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.

Comments

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 http://react.dennisyang.com/

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:

And, here's a screenshot of "Fetch as Google" with 'react-optimize' disabled:

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.

Thanks!

dennis.
opened by sinned 38
[ 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.

Thoughts?

[1] https://github.com/css-modules/css-modules/pull/65#issuecomment-214221200

help wanted question
opened by davezuko 33
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).

Layouts

Stateless components that dictate major page structure

Useful for composing react-router named components into views

Components

Prefer stateless function components

eg: const HelloMessage = ({ name }) => <div>Hello {name}</div>

Top-level components and containers directories contain reusable components

Containers

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: ownProps.location.query.music // why not? }))(Counter) // Location -> 'localhost:3000/counter?music=reggae' // Counter.props = { counter: 0, music: 'reggae' }

Routes

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.

Summary:

[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 module.hot 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] Update README to recommend chrome extension, provide recipe

[x] Remove packages, components, integrations

[x] Improve idiomatic use of react and redux

[x] Update README with recommendations and rationale

[x] Update components and containers to follow recommended patterns

Please leave questions/comments
opened by justingreenberg 33

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
      app.2abd9dd14c8a3294cff9.js.map   850 kB       0       app
1.counter.2abd9dd14c8a3294cff9.js.map  54.4 kB       1       counter
   vendor.2abd9dd14c8a3294cff9.js.map   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
Hi,

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.

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. The webpack dev server is not restarting though.
bug

opened by risonsimon 26
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

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()
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: https://phabricator.babeljs.io/T6670 and here: https://phabricator.babeljs.io/T6644. The cause seems to be updating the babel-runtime.
notice
opened by patrickheeney 23
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 https://github.com/davezuko/react-redux-starter-kit/issues/430

[ ] 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?

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

Releases(v3.0.1)

v3.0.1(May 17, 2017)
Improvements

Added Node ^5.0.0 to CI build

Fixes

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)
Features

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

Improvements

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

Fixes

console.log now works correctly inside of Karma

Deprecations

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)

Notes TBD.

Miscellaneous package upgrades and bug fixes, cutting a release for safety.
Source code(tar.gz)
Source code(zip)
v3.0.0-alpha.0(Apr 21, 2016)
Improvements

Migrated to Fractal Project Structure, huge thanks to justingreenberg. See https://github.com/davezuko/react-redux-starter-kit/pull/684 for details and discussion.

Source code(tar.gz)
Source code(zip)
v2.0.0(Apr 18, 2016)
Features

Upgraded eslint-plugin-react to ^5.0.0

Upgraded fs-extra to ^0.28.0

Improvements

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)
Features

Upgraded flow-bin to 0.23.0

Upgraded fs-extra to ^0.27.0

Improvements

Minor cleanup in Karma configuration

Added missing node-style index files in blueprints

Fixes

Modified webpack manifest initialization to prevent syntax errors in some environments (https://github.com/davezuko/react-redux-starter-kit/issues/572)

Source code(tar.gz)
Source code(zip)
v2.0.0-alpha.4(Apr 10, 2016)
Features

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

Improvements

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)

Fixes

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)
Features

Upgraded flow-interfaces to ^0.6.0

Improvements

Moved dependencies needed for production builds from devDependencies to regular dependencies

Fixes

Production configuration now generates assets with absolute rather than relative paths

Deprecations

Removed eslint-loader for performance reasons

Source code(tar.gz)
Source code(zip)
v2.0.0-alpha.2(Mar 17, 2016)
Features

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

Improvements

Added index.js files for blueprints for convenient imports

Fixes

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)
Features

Upgraded react-router-redux from ^4.0.0-beta to ^4.0.0

Source code(tar.gz)
Source code(zip)
v2.0.0-alpha.0(Mar 4, 2016)
Features

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

Improvements

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

Fixes

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

Deprecations

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)
1.0.0

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.

Features

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

Improvements

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

Fixes

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

Deprecations

Removed eslint-config-airbnb

Deprecated support for Node ^4.0.0

Source code(tar.gz)
Source code(zip)
v0.18.0(Dec 1, 2015)
0.18.0

Features

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

Improvements

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

Fixes

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)
Features

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)

Improvements

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

Fixes

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)
Features

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

Improvements

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)
Fixes

Remove unused/broken "minify" property provided to HtmlWebpackPlugin configuration.

Source code(tar.gz)
Source code(zip)
v0.15.1(Sep 30, 2015)
Fixes

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)
Fixes

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.

Improvements

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.

Deprecations

Removed Koa server (sad days).

Source code(tar.gz)
Source code(zip)
v0.14.0(Sep 21, 2015)
Features

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.

Improvements

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

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

Deprecations

Removes local test utilities (in ~/src/utils/test).

Source code(tar.gz)
Source code(zip)
v0.13.0(Sep 13, 2015)
Features

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

Fixes

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)
Features

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.

Fixes

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

Improvements

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)
Features

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

Improvements

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)
Features

Initial state can now be injected from the server (still WIP).

Adds react-addons-test-utils as a devDependency.

Improvements

Eslint no longer prevents webpack from bundling in development mode if an error is emitted.

See: https://github.com/MoOx/eslint-loader/issues/23

Updates all .jsx files to .js. (https://github.com/davezuko/react-redux-starter-kit/issues/37)

Updates all React component file names to be ProperCased.

Source code(tar.gz)
Source code(zip)
v0.9.0(Sep 4, 2015)
Features

Koa server now uses gzip middleware.

Improvements

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.

Deprecations

Removes unnecessary object-assign dependency.

Source code(tar.gz)
Source code(zip)
v0.8.0(Sep 2, 2015)
Improvements

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.

Fixes

Redux store now explicitly handles HMR.

Changes

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.

Deprecations

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

Thanks to mlusetti

Improvements

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

Fixes

Configuration file name trimming on Windows machines

Thanks to nuragic

Source code(tar.gz)
Source code(zip)