ZltoReduxCore

React+Redux core for Zlto Mobile Wallet App (zlto.co). Refactored for easy integration in Zlto's various frontend implementations: single page dashboard, mobile web, Android, iOS.

Features

• react
• redux
• react-router
• webpack
• babel
• express
• karma
• eslint

Requirements

• node ^4.5.0
• npm ^3.0.0

Getting Started

$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

Steps for Development

When developing a new feature or page, you should follow these general steps:

1. Creating a new Route folder for the page
2. Register the route under src/routes/index.js, passing in the store under ChildRoutes
3. Create your action constants, action creators, and reducers within the modules folder of your route
4. Under /containers, create your Higher Level Component (HOC) that will provide props and actions to your view
5. Under /components, create your Page Level Component, which can either be standalone or composed of smaller, dumb components
6. Create an index.js file for your route folder. This allows webpack to correctly grab your container and reducer when your route is hit. This follows the Fractal folder structure, which is a lower level optimization of webpack that only requires your route's files when the route is hit.

Development Best Practices

• src/store is where the store, reducer, hot module reload are configured
• main.js is where everything comes together and finally rendered to the DOM
• components and containers is intended for reusable modules shared across routes
• All async actions should be defined in your src/{your route}/modules/ folder.
• Use react-router's push function to direct users after an AJAX call finishes.

Scripts

While developing, you will probably rely mostly on npm start; however, there are additional scripts at your disposal:

npm run <script>	Description
start	Serves your app at localhost:3000. HMR will be enabled in development.
compile	Compiles the application to disk (~/dist by default).
dev	Same as npm start, but enables nodemon for the server as well.
test	Runs unit tests with Karma and generates a coverage report.
test:dev	Runs Karma and watches for changes to re-run tests; does not generate coverage reports.
deploy	Runs linter, tests, and then, on success, compiles your application to disk.
deploy:dev	Same as deploy but overrides NODE_ENV to "development".
deploy:prod	Same as deploy but overrides NODE_ENV to "production".
lint	Lint all .js files.
lint:fix	Lint and fix all .js files. Read more on this.

Application Structure

The application structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type.

.
├── bin                      # Build/Start scripts
├── blueprints               # Blueprint files for redux-cli
├── build                    # All build-related configuration
│   └── webpack              # Environment-specific configuration files for webpack
├── config                   # Project configuration settings
├── server                   # Express application that provides webpack middleware
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── index.html           # Main HTML page container for app
│   ├── main.js              # Application bootstrap and rendering
│   ├── components           # Global Reusable Presentational Components
│   ├── containers           # Global Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   ├── redux                # "Ducks" location...
│   │   └── modules          # reducer, action, creators not part of a route
│   ├── routes               # Main route definitions and async split points
│   │   ├── index.js         # Bootstrap main application routes with store
│   │   └── Home             # Fractal route
│   │       ├── index.js     # Route definitions and async split points
│   │       ├── assets       # Assets required to render components
│   │       ├── components   # Presentational React Components
│   │       ├── container    # Connect components to actions and store
│   │       ├── modules      # Collections of reducers/constants/actions
│   │       └── routes **    # Fractal sub-routes (** optional)
│   ├── static               # Static assets (not imported anywhere in source code)
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── styles               # Application-wide styles (generally settings)
└── tests                    # Unit tests