Timelines ·

Timeline application to handle

Philosophy of the starter

I've created this starter very simple: only few lines of codes, just enough to illustrate the usage of react, redux, jest and storybook. All the tools around are configured and working. The goal here is simple: start immediately to code. No questions asked. Just coding.

Content of the starter

Tools, framework and helpers

• Babel
• EditorConfig
• Enzyme
• ESLint
• Jest
• JSDoc
• json-lint
• Grunt
• Plato
• stylelint
• Storybook
• Webpack 2

Directory structure

Folder	Description
build/	The build result of your application. See npm run build bellow
doc/	All generated documentations
doc/jsdoc	Documentation generated by JSDoc. See npm run doc.
doc/storybook	Documentation generated by storybook. See npm run doc.
reports/	Contain all generated reports
reports/analysis	Reports generated by plato
reports/coverage	Coverage reports generated by Jest
src/	Source of your application
src/components	React components and containers. See Usage with React - redux.js.org.
src/containers	React components and containers. See Usage with React - redux.js.org.
src/redux	Redux actions, action creators and reducers. See Ducs pattern.

Todo

• Add Selenium for integration tests.
• Add a styleguide generator

Usage

git clone https://github.com/AbrahamTewa/starter.reactjs.git
cd starter.reactjs
npm install

During development:

npm run watch

To build for production mode:

npm run build

To serve the application (after build)

npm start

or you can launch the build/index.html file in your browser.

Available commands

npm run analysis

Run a code analysis using Plato. The output result is stored in the reports/analysis directory.

npm run build

Run the build of the application in production configuration. The builder will create a new build/ folder in which the build will be added, along with source maps (js and css).

Build steps

1. Lint the repository a. eslint b. stylelint c. json-lint
2. Clean the build folder
3. Copy src/index.html into the build folder
4. Make the build : a. Generate CSS files from *.sass b. Minify CSS files (using clean-css) c. Generate js files using webpack and minify using uglify-es.

npm run doc

Build the documentation of the project :

• JSDoc
• Storybook

To build individually each project, use on of the following:

• npm run doc:jsdoc
• npm run doc:storybook

npm run lint

Running all linters on the source files and the tooling files (e.g .babelrc).

The linters are :

• eslint
• stylelint
• json-lint

npm start

Start a simple express server to serve the HTML file.

npm test

Alias: npm run test

Execute all unit tests. Tests use jest and enzyme.

npm run test-u

Like npm test, but will also update jest snapshots.

npm run test-cov

The test-cov will run tests and coverage.

npm run watch

Will run a webpack in watch mode to rebuild the app each time a file in the src folder is updated. The Hot Module Replacement (HMR) is enabled on javascript and sass files. Before each reloads, eslint and stylelint are runned.

npm watch:storybook

Enable storybook development server. The server will watch file modifications and update in real time your storybook using the Hot Module Replacement mechanism. Storybook will be served on http://localhost:9001.