An Universal ReactJS/Redux Boilerplate.
$ git clone [email protected]:kiki-le-singe/react-redux-universal-boilerplate-boilerplate.git
$ cd react-redux-universal-boilerplate-boilerplate
$ npm install or yarn
$ 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.
$ 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
.
$ 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.
$ npm run lint
Lint all files in ~/src
and ~/__tests__
.
- react
- redux
- react-router
- react-router-redux
- webpack
- webpack-isomorphic-tools
- babel
- koa
- eslint
- Universal (Isomorphic)
- postcss-cssnext
- css-modules
- karma
- Mocha
- Chai
- Sinon.JS
- Enzyme
- why-did-you-update
- babel-preset-latest
- yarn
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 frompostcss-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
forTheming
- 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>
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__
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.
- React Redux Universal Hot Example
- webapp (React, Redux, React-router, i18n, isomorphic, etc)
- Universal React Boilerplate
- React Universal example
- React Simple Universal
- React Isomorphic Starterkit
- React Redux Starter Kit
- react-boilerplate - Boilerplate for "SurviveJS - React"
- react-testing-starter-kit
- karma-webpack
- Babel Handbook
- css-modules
- css-modules' webpack-demo
- css-loader's local-scope
- Run multiple commands in parallel:
- Concurrently
- npm-run-all
- html5-boilerplate
- yarn
- Getting Started
- Documentation
- Migrating from npm