Template for creating React + Redux universal applications.
This is a starter boilerplate to create react applications which uses the following technologies:
-
Core:
- Universal Rendering
- Express - Web Framework for Node.js
- React - Javascript library for building user interfaces
- React-DOM - React sub-library
- React Router - Router library for React
- React Helmet - A document head manager for React
- Redux - Application state management system
- Classnames - A simple javascript utility for conditionally joining classNames together
- Webpack Isomorphic Tools - Server-side rendering for your Webpack-built applications
-
JS Compilers:
- Babel ES6 and ES7 Javascript compiler
-
CSS Compilers:
- CSSNext Compiler to use the next css (CSS4) generation
-
Bundlers:
- Webpack - Javascript module bundler
-
Linting:
- ESLint - Javascript linting utility
- Config Airbnb - Airbnb ESLint configuration
-
Testing:
-
Other tools:
- Better NPM Run - Cross Platform smart and easy way to handle environment variables
- Webpack Dev Server - Server for development purposes
- Styleguidist - Generates Component documentation easily
- React Hot Loader - Enables the awesome React Hot Loader feature for a better development experience
- Redux DevTools - DevTools for Redux with hot reloading, action replay, and customizable UI
Important: be care if the project has its own .npmrc
. If the project has an own registry
configure it properly.
npm install
Runs a server for development purposes [ONLY]
npm run dev
or in separated processes
npm run start-dev
npm run watch-client
Important: Before start the production server you have to build the bundles
npm run start-prod
or
npm start
To create the bundles for the component run
npm run build
Anyway the prepublish
trigger will do it for you before you publish the package
To singleRun
the tests
(this command also fires after the tests the linting
thanks to posttest
trigger):
npm test
To a TDD
or watch
run mode:
npm run test:watch
Anyway the preversion
trigger will do it for you before change the package version
To check the Javascript linting run:
npm run lint
Anyway the posttest
trigger will do it for you after all the tests are passed
Major
npm run version-major
Minor
npm run version-minor
Patch
npm run version-patch
Run Documentation server
npm run styleguide-server
Build Documentation
npm run styleguide-build
Redux Devtools are enabled by default in development.
- CTRL+H Toggle DevTools Dock
- CTRL+Q Move DevTools Dock Position
- see redux-devtools-dock-monitor for more detailed information.
If you have the Redux DevTools chrome extension installed it will automatically be used on the client-side instead.
If you want to disable the dev tools during development, set __DEVTOOLS__
to false
in /webpack/dev.config.js
.
DevTools are not enabled during production.
- Update to react-router v4
Update to Webpack 2- Enable Tree Shaking
- Remove webpack-isomorphic-tools for SSR
- Implements PWA
- Improve Documentation
- Clean unnecessary dependencies
- Improve testing
- Centralize config
- Change public env variables to use a .env file instead better-npm-run