React Redux Universal Boilerplate

An Universal ReactJS/Redux Boilerplate.

Installation

$ git clone [email protected]:kiki-le-singe/react-redux-universal-boilerplate-boilerplate.git
$ cd react-redux-universal-boilerplate-boilerplate
$ npm install

Scripts

Development

$ npm run dev

Serves your app at localip:3000. HMR will be enabled in development. A proxy is used for when you request http://localip:3000/, it will fetch http://localip:3001/ and return.

$ npm start

Runs npm run dev script.

$ npm run start:server

Starts the dev server to serve your app at localip:3000.

$ npm run start:client:server

Starts the webpack dev server to serve your webpack bundle at localip:3001 and enable HMR in development.

$ npm run dev:debug

Same as npm run dev except that the debug mode is enabled. So redux-devtools will appear on the ui and you will can see webpack-isomorphic-tools's debugging messages in the console.

Are there any other alternatives? Sure! You can also use a chrome extension Redux DevTools Extension. And there is also a small logger middleware (~/src/common/redux/middleware/logger) to log all actions and states after they are dispatched.

Production

$ npm run build

It does some optimizations and Compiles the application, for the production, to disk (~/static/dist).

$ npm run deploy

Cleans the ~/static/dist folder previously created, then compiles your application to disk and starts the prod server.

$ npm run prod

Starts the prod server to serve your app at localip:3000.

Test

$ npm run test

Runs unit tests with Karma. It will generate a coverage report to ~/coverage.

$ npm run test:dev

Same as npm run test except it watches for changes to re-run tests.

Linter

$ npm run lint

Lint all files in ~/src and ~/__tests__.

Features

Styles

You can use .css file extensions using the latest CSS syntax with postcss-cssnext.

CSS are automatically autoprefixed. You don't need to add prefixes like -webkit. See automatic vendor prefixes from postcss-cssnext features

See the ~/src/common/styles/global directory to implement global styles (site's theme for example) and see an example of use case css module ~/src/common/components/views/About. There is also a ~/src/common/styles/local directory for common local styles (this could allow to use css modules' composition between components).

Are there any other solutions ? Fortunately yes!

I could try one of these following options if what I implemented doesn't work very well...

It's possible to use css-modules for Theming
Obviously you can use the traditional method (it works very well) to do your own css:

.foo-namespace {
  .baz {
    ...
  }
  .bar {
    ...
  }
}

<div className="foo-namespace">
  <div className="baz">baz</div>
  <div className="bar">bar</div>
</div>

Globals

These are global variables available to you anywhere in your source code. They can be found in ~/config/index.js.

new webpack.DefinePlugin({
  __CLIENT__: projectConfig.__CLIENT__,
  __SERVER__: projectConfig.__SERVER__,
  __DEV__: projectConfig.__DEV__,
  __PROD__: projectConfig.__PROD__,
  __DEBUG__: projectConfig.__DEBUG__
})

Webpack is made for client side code development only. So we also have to define them on the server side

/**
 * Define isomorphic constants.
 */
global.__CLIENT__ = false
global.__SERVER__ = true
global.__DEV__ = projectConfig.__DEV__
global.__PROD__ = projectConfig.__PROD__
global.__DEBUG__ = projectConfig.__DEBUG__

Unit Tests

Tests are in ~/__tests__. Mocha will be used for structuring tests, karma as the test runner, Chai for assertions, Sinon.JS for spies... And Enzyme to simplify testing react components.

weisk / react-redux-universal-boilerplate Goto Github PK