This is a boilerplate project for developing a mid to a large scale client-side application(s) using JavaScript, Babel, React, and Redux. For an example project, visit the example branch.
- Node.js (6.x minimum required)
- npm CLI is usually included with Node.js
- Yarn (recommended)
- Editor with support for JavaScript (see Tern for code analysis if editor does not include it), ESLint, and EditorConfig
- Clone/download this repository.
- Install dependencies using npm or Yarn:
npm installyarn
- Start running tasks as described below in the tasks section.
omrb/
├─ .webpack/ # Webpack build configuration builder
├─ .storybook/ # Storybook configuration
├─ assets/ # Static files to icnlude in builds
├─ coverage/ # Code coverage reports
├─ dist/ # Result build data from build tasks
├─ story/ # Result storybook build
├─ src/
│ ├─ app/ # Application domain
│ │ ├─ components/root/ # Top level application view
│ │ ├─ actions.test.js # Test to ensure all actions are valid
│ │ ├─ reducer.js # Reducer for whole application
│ │ ├─ saga.js # Saga entry for whole application
│ │ └─ styles.js # Styling for application container
│ ├─ common/ # Shared code used throughout project
│ │ ├─ components/container/ # Application wrapper component
│ │ └─ create─store.js # Helper to create a Redux store
│ ├─ domain1/ # See Domains section below
│ ├─ domain2/
│ ├─ domainX/
│ └─ app.jsx # Application entry point
├─ .babelrc # Babel configuration
├─ .eslintrc # ESLint configuration
├─ esdoc.json # ESDoc configuration
├─ hot─server.js # Source code for local development server
├─ package.json # Configuration, tasks, and dependencies
├─ setup-tests.js # Source code to run before execution of tests
├─ webpack.config.js # Webpack build configuration
└─ yarn.lock # Dependency pinning from Yarn
When JavaScript code is built, any files directly inside the src/ directory are used to create the output files. The boilerplate currently generates app.js, as there is a single entry point inside src/. (src/app.jsx) If there are more than one entry points more files generated as well as an additional file common.js, which contains shared code across all entry points. common.js must be loaded before you load an entry point. You can see what gets generated by running the build:dev/build:prod task. (see the tasks section)
domain/
├─ components/
│ ├─ component1/ # See Component sections below
│ ├─ component2/
│ └─ componentX/
├─ actions.js # Redux actions for domain
├─ reducer.js # Domain reducer
└─ saga.ts # Domain sagas
Rather than group items by things like components/reducers/actions/etc., items are grouped by domain which can be a saner option as the project grows. Examples of domains can be things like resources (ex. blog/, users/) or other things. (ex. ui/) Domains may include things like components, actions, reducer, sagas, etc. but they don't have to include all of them. In fact, you can think of app/ and common/ as domains. Other files may be present as well.
component/
├─ index.js
└─ template.jsx
React componenjs are grouped in a directory.
template.jsxdefines the React component without any knowledge of Redux specifics or other things like React DnD. (sometimes referred as dumb component)index.jsis the entry point of the component when used by others.- If template does not require data/action bindings then it can just pass through the template. (see
src/app/componenjs/root/index.js) - If template requires data/action bindings then it is done here. (sometimes refereed as smart component)
- If template does not require data/action bindings then it can just pass through the template. (see
Tests for components/domains/logic/etc. If code needs to be run before tests are executed see setup-tests.js Some guides on tests include:
Defines a story to display in React Storybook. Typically this file is in a component. (ex. index.stories.jsx) This guide provides information on how to write stories.
Generated files/directories when using Jest's snapshot feature. These files should be left to Jest and not touched manually.
Tasks can be executed in the following manner:
npm run [command] # npm
yarn run [command] # Yarn
Examples:
npm run build:dev
yarn run lint
Start a local development server in port 3000 by default. To use another port have the environment variable PORT set to a number or modify hot-server.js. This task is also available as an alias to server. The following is provided in the development server:
- Hot reloading (including React Hot Loader)
- Redux DevTools Extension (if unavailable Logger for Redux is used)
Start a local server for React Storybook on port 9001. For more information visit the documentation for React Storybook.
Build application and include assets into a packaged build in the dist/ directory. This build is not minifed and includes source maps. Ideal for development.
Build application and include assets into a packaged build in the dist/ directory. This build is minified (with dead code elimination) and does not include source maps. Ideal for production. This task is also available as an alias to start. (npm start, yarn start)
Build detailed code documentation in the docs/api/ directory.
Generate a static build of React Storybook in the story/ disrectory.
Run tests once using Jest. For more information visit the documentation for Jest.
Run tests once and rerun on changes using Jest.
Verify that code is valid using ESLint. For customzation modify .eslintrc.
Like lint task, but automatically fixes certain linting violations.
Like test task, but also collects code coverage, which becomes available in the coverage/ directory.
Run converage once and rerun on changes using Jest.
- Language
- Libraries
- Testing
- Development Tools
- Build Tools