I started this project to learn tools like React, Redux, Webpack, babeljs.io, ES6/ES2015... I did it mainly for fun. But it will be maintained and then I used it as Boilerplate for my React|Redux projects. So don't worry it works :p. It's not perfect but it works :).
Enjoy it! :)
An Universal ReactJS/Redux Boilerplate.
$ git clone https://github.com/kiki-le-singe/react-redux-universal-boilerplate.git <name>$ cd <name>$ npm install or yarn$ on postinstall you should choose between SASS or CSSNEXT
$ npm run storybook
Starts Storybook on `http://localhost:6006/``
$ npm run setup
Allows to choose between sass or cssnext and clean up unnecessary files. This question you will be asked:
You will use SASS as CSS extension language 😉 . Do you wish to use CSSNEXT 😀 ? This choice is irreversible. Obviously you can install the project again or just use your version control system to discard changes in working directory.
This script runs on postinstall script (see package.json).
$ npm run dev
$ npm start
npm run dev script.
$ npm run start:server
dev server with nodemon to serve your app at
$ npm run start:client:server
webpack dev server to serve your
webpack bundle at
localip:3001 and enable HMR in development.
$ npm run build:client
It does some optimizations and compiles the client app, for the production, to disk (
$ npm run build:server
It does some optimizations and compiles the server app, for the production, to disk (
$ npm run deploy
npm run build:client and
npm run build:server scripts.
$ cd readyToDeploy$ npm install or yarn$ npm start
prod server to serve your app at
$ npm run test
Runs unit tests with Karma. It will generate a coverage report to
$ npm run test:dev
npm run test except it watches for changes to re-run tests.
$ npm run lint
Lint all files in
npm run deploy and everything is in the
You can read the README.
CSSNEXT You can use
.css file extensions using the latest CSS syntax with
SASS You can use
scss.|css file extensions using the sass syntax with
CSS are automatically autoprefixed. You don't need to add prefixes like
~/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/views/AboutView. 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...
These are global variables available to you anywhere in your source code. They can be found in
__CLIENT__: projectConfig__CLIENT____SERVER__: projectConfig__SERVER____DEV__: projectConfig__DEV____PROD__: projectConfig__PROD__
Webpack is made for client side code development only. So we also have to define them on the server side
/*** Define isomorphic constants.*/// src/server/index.jsglobal__CLIENT__ = falseglobal__SERVER__ = trueglobal__DEV__ = projectConfig__DEV__global__PROD__ = projectConfig__PROD__
Message received from Webpack via terminal: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB)