This project started as a POC for React and has now become my own sandbox for testing the latest technologies. You'll find documentation across the code, the commits and the READMEs helping you implement the following I'm using:
- React Router
- Babel v6 to transpile ES6+
- Webpack for bundling
- Redux for state management
- Redux Dev Tools please watch Dan Abramov about Time Travel at React-Europe
- React Router Redux Redux/React Router bindings
- Eslint (with eslint-config-airbnb)
- style-loader, sass-loader
- babel-preset-react-hmre (react-hot-reload for babel v6 - thanks to react-transform-hmr)
- Karma Test runner / PhantomJS Scripted, headless browser
- Mocha / Chai / Sinon Test framework / Assertion Library / Test spies
- Enzyme Testing utilities for React from Airbnb
- babel-plugin-__coverage__ used with karma-coverage, spits out coverage reports directly on es6 source code
- karma-coveralls (coverage reports in CI mode)
- Protractor (e2e tests run with Selenium WebDriver - on SauceLabs in CI mode)
- nock / superagent-mocker to record & mock http requests
The development / build / deploy workflow is based on topheman/webpack-babel-starter, which allows to have online both:
- production version (minified js/css ...)
- development version (with sourcemaps, so that users could see the original es6 source code, even online, just by opening the sources panel in the devtools console)
- builds are tested
- source code is linted
- unit tests are run
- code coverage is sent to coveralls.io
- e2e tests are run through SauceLabs (a cross-browser automation tool built on top of Selenium WebDriver)
Previous versions (checkout the releases sections):
- The version without redux remains on the v1.x branch.
- The version in babel v5 remains on the v2.x branch
- You can see the isomorphic (universal if you will) version (with server-side rendering) at topheman/react-es6-isomorphic (based on v1 - not yet with redux at this time).
To read further about this project and its evolution:
- Read the WIKI
- Blog post about the upgrade to react v0.14
- Blog post about the original version
- Slides of the ReactJsParis meetup about this project (nov 2015)
- Slides of the ParisJS meetup about this project (jan 2016)
- Blog post about ES6+ code coverage with Babel plugin
This project now follows the same development workflow as the one explained in topheman/webpack-babel-starter (with some additions, specific to the project).
git clone https://github.com/topheman/react-es6-redux.git cd react-es6-redux npm install
Note: Installing the topheman-apis-proxy backend is no longer mandatory (I changed the code so that you could do unauthenticated request to the github API - you will be rate limited to 10 requests per minute though).
- Open http://localhost:8080/
You're good to go with hot-reload / redux-devtools / time-travel / sourcemaps ...!
You can also run the app in mock mode (useful for tests):
npm run webpack-mock
- Open http://localhost:8080/
At the root of the project :
npm run build: for debug (like in dev - with sourceMaps and all)
npm run build-prod: for production (minified/optimized ...)
npm run build-prod-all: both at once in the same build (with redux devtools & sourcemaps on dev version)
/build/dist folder will be created with your project built in it.
You can run it with
npm run serve-build
npm test will launch:
- linting of
- the unit-tests files are located in
__tests__folders, named like
- those tests files are run by karma
This task is launched on
pre-commit hook & on Travis CI.
If you wish to generate coverage reports, just
npm run karma-coverage (those reports are generated on Travis CI anyway and available on coveralls.io), you will find them in local at
Note: Unit-tests are run through karma in PhantomJS (the
webpack.config.js being injected), they can also be run directly via mocha (see wiki).
End to end tests
e2e tests are located in
Open two terminal tabs, on each one:
npm run webpack-mock: will launch the project in mock mode
npm run test-e2e: will run the e2e tests in
protractoragainst your local server
Those tests are run on Travis CI, via SauceLabs.
npm run lint: single run linting of
npm run lint-watch: same in watch mode
You may want some granularity, the
LINTER variables are at your disposal:
DEVTOOLS=true npm run build: will build a debug version with the devtools
DEVTOOLS=false npm run webpack: will launch a webpack dev server without the devtools (if you find it annoying)
LINTER=false npm start(if you don't want to be bothered by the linter - at your own risks! the pre-commit hook will run the linter and the tests anyway)
SHOW_DEVTOOLS=false npm start(if you want to hide the redux-devtools - you'll still be able to show them by
DASHBOARD=true npm start: will use webpack-dashboard in dev-server mode
- ... you can mix and match ;-)
Read the "Advanced tasks" wiki section for more infos ...
This part is optional
topheman-apis-proxy is a proxy that lets you do authenticated requests to github / twitter APIs (that way you have a much higher rate limit). For the install, please follow the installation steps README section.
Then your workflow will be:
- Open a terminal in the react-es6-redux folder and
npm run webpack-dev
- Open a terminal in the topheman-apis-proxy folder and
grunt serve(see more in the run in local README section)
- Go to http://localhost:8080/
I'm using github pages for hosting (free https, easy deploy via git - a good deal since I don't need any server-side logic). You'll find a gh-pages orphan branch where the deployed builds are stored.
My deployment routine is described on the topheman/webpack-babel-starter Wiki.
build-prod-all-owner: build task for topheman.github.io/react-es6-redux
This software is distributed under an MIT licence.
Copyright 2015-2016 © Christophe Rosset
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. The Software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the Software.