Facebook photo viewer test application

Structure

• src - main development code subdirectories:

  • actions - all redux action creators are here (both sync and async) and action types
  • components - react/redux Presentational Components
  • containers - react/redux Container(generated by react-redux's connect hoc factory) Components
  • reducers - all redux store reducers are here
  • config - application configuration files
  • constants - constant definitions
  • helpers - helper modules dictionary
    • fbApi.js - facebook graph api wrapper
  • index.js - application entry point scripts
  • selectors.js - Usage redux-reselect selectors library

• dist - generated sources ready for deployment

Build process

Use Webpack to bundle code. There are 3 webpack configurations:

• webpack.config.js - webpack config for creating the development bundle
• webpack.config.prod.js - webpack config for creating the production bundle
• webpack.vendor.config.js webpack config for creating the "vendor" bundle (bundle containing all 3rd party libs)

Running tasks

npm can be used to run tasks from package.json the following tasks are available:

• start - runs webpack dev server in hot mode
• build:prod - builds app production bundles
• build:dev - builds development bundles
• build-vendor:prod - builds production vendor bundles
• build-all:prod - builds production all bundle files