React/Redux Project Starter

A project starter for universalmorphic React/Redux apps

Features

• React: THE component-based view library.
• Redux: application state management
• React-Redux Official Bindings: remove the boilerplate code when connecting React to Redux
• React Router: server/client side application router
• Redux Thunk: easier async and sequential actions.
• React Helmet: title and meta tags FTW
• ExpressJS: server-side app framework.
• WebPack: module bundler.
• PostCSS: CSS transformations via JS
• CSS Modules: private name spaces for css classes.
• CSSNext: future CSS today.
• React StoryBook: a component authoring sandbox. also component functional testing .
• Jest: unit testing and coverage reporting
• Eslint: JS linting.

Development

1. first, run npm i to install dependencies
2. to start the component dev environment, run npm run components
3. to start the application dev environment, run npm run dev
4. to lint the JS, run npm run lint
5. build the production app via npm run build
6. start the app via npm start

Files

1. The React / Redux app is found in src/app
2. The production Express.js server is found in src/server
3. Component stories (for the component dev environment) are found in .storybook/config.js

FAQ

1. Do I need a particular version of npm?
   • Please use npm version 3 or higher.
2. Why do you have package.json files in your Component directories?
   • Placing a package.json file with a proper main property allows you to import that code by referencing only the parent folder. Example: import LandingView from '../views/LandingView';. This gives you the flexibility of refactoring the Component without changing the consuming imports.
3. My editor/linter claims the package.json files in the Component directories are missing the name and version properties.
   • According to the specification, name and version are both required properties of a package.json file. However, they are not necessary in this context because we are not publishing the Components separate from the project. We chose to have minimal package.json files. Please feel free to add the missing values if this bothers you or your linter enough that you or your linter can't get past it.
4. How do I allow node modules to be processed by webpack (for example, be processed by babel)?
   • There is a whitelist array in the file webpack.server.babel.js which allows packages to be processed by webpack if they are included. To add a package called my-foo-bar, the array would be whitelist: ['normalize.css', 'my-foo-bar]. To include all packages under a certain namespace, you can use a regular expression test. For example, to add all packages under @foo, your array would be whitelist: ['normalize.css', /^[@]foo/]