Bible Redux

📖 Beautiful open bible app built with the latest front-end technology Redux, ReactJS, ES2015. Bible Redux is using Redux Starter Kit. The data is taken from Alkitab API.

Table of Contents

1. Requirements
2. Features
3. Getting Started
4. Usage
5. Structure
6. Testing

Requirements

Node ^5.0.0

Features

• React (^0.14.0)
  • Includes react-addons-test-utils (^0.14.0)
• Redux (^3.0.0)
  • react-redux (^4.0.0)
  • redux-devtools
    • use npm run dev:nw to display them in a separate window.
  • redux-thunk middleware
• react-router (^1.0.0)
• redux-simple-router (^1.0.0)
• Webpack
  • CSS modules!
  • sass-loader
  • postcss-loader with cssnano for style autoprefixing and minification
  • Bundle splitting for app and vendor dependencies
  • CSS extraction during builts that are not using HMR (like npm run compile)
  • Loaders for fonts and images
• Express
  • webpack-dev-middleware
  • webpack-hot-middleware
• Karma
  • Mocha w/ chai, sinon-chai, and chai-as-promised
  • PhantomJS
  • Code coverage reports
• Babel (^6.3.0)
  • babel-plugin-transform-runtime so transforms aren't inlined
  • babel-preset-react-hmre for:
    • react-transform-hmr (HMR for React components)
    • redbox-react (visible error reporting for React components)
• ESLint
  • Uses Standard Style by default, but you're welcome to change this!
  • Includes separate test-specific .eslintrc to work with Mocha and Chai

Getting Started

Just clone the repo and install the necessary node modules:

$ git clone https://github.com/sonnylazuardi/redux-bible.git
$ cd redux-bible
$ npm install                   # Install Node modules listed in ./package.json (may take a while the first time)
$ npm start                     # Compile and launch

Usage

• Doing live development? Use npm start to spin up the dev server.
• Compiling the application to disk? Use npm run compile.
• Deploying to an environment? npm run deploy can help with that.

Great, now that introductions have been made here's everything in full detail:

• npm start - Spins up express server to serve your app at localhost:3000. HMR will be enabled in development.
• npm run compile - Compiles the application to disk (~/dist by default).
• npm run dev:nw - Same as npm start, but opens the redux devtools in a new window.
• npm run dev:no-debug - Same as npm start but disables redux devtools.
• npm run test - Runs unit tests with Karma and generates a coverage report.
• npm run test:dev - Runs Karma and watches for changes to re-run tests; does not generate coverage reports.
• npm run deploy- Runs linter, tests, and then, on success, compiles your application to disk.
• npm run lint- Lint all .js files.
• npm run lint:fix - Lint and fix all .js files. Read more on this.

Structure

.
├── bin                      # Build/Start scripts
├── build                    # All build-related configuration
│   └── webpack              # Environment-specific configuration files for webpack
├── config                   # Project configuration settings
├── server                   # Express application (uses webpack middleware)
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── components           # Generic React Components (generally Dumb components)
│   ├── containers           # Components that provide context (e.g. Redux Provider)
│   ├── layouts              # Components that dictate major page structure
│   ├── redux                # Redux-specific pieces
│   │   ├── data             # All static data declaration
│   │   ├── modules          # Collections of reducers/constants/actions
│   │   └── utils            # Redux-specific helpers
│   ├── routes               # Application route definitions
│   ├── static               # Static assets (not imported anywhere in source code)
│   ├── styles               # Application-wide styles (generally settings)
│   ├── views                # Components that live at a route
│   └── main.js              # Application bootstrap and rendering
└── tests                    # Unit tests

Testing

To add a unit test, simply create a .spec.js file anywhere in ~/tests. Karma will pick up on these files automatically, and Mocha and Chai will be available within your test without the need to import them.

Coverage reports will be compiled to ~/coverage by default. If you wish to change what reporters are used and where reports are compiled, you can do so by modifying coverage_reporters in ~/config/_base.js.

License

MIT Licensed © 2015 @davezuko @sonnylazuardi