Base Node - Frontend

Commands

npm start: Start the development server and watch for changes.

npm run test: Run all tests.

npm run watch:test: Run all tests and watch for changes.

npm run cover: Run all tests and measure code coverage.

npm run watch:cover: Run all tests, measure code coverage, and watch for changes.

Project Structure

All application code will be stored in the app directory. Within the app directory, higher level UI concepts can be stored in any directory structure, but related .jsx, .scss, and .test.js should be stored together.

Documentation

Testing

• Test Runner: ava
• TDD/BDD Syntax: ava-spec
• Mocks/Spies: sinon
• React Element Testing: enzyme
• Code Coverage: istanbul

Development

• View Generation: react
• Frontend Framework: foundation
• Compiled CSS: SASS

Process

• Code Linting: eslint
• Code Style: standard
• Bundler/Build Tool: webpack
• Javascript 'Compiler': babel
• Javascript Static Analysis/Type Checking: flow

Server

• Web Framework: express
• Configuration: convict

Developer Setup

I would strongly recommend using Atom as your editor for this project. It has wonderful plugins to work with eslint and flow to reduce developer pain from poor styling and runtime errors.

1. Install atom
2. Install the following plugins:
   • highlight-selected
   • pigments
   • minimap
   • minimap-highlight-selected
   • minimap-pigments
   • minimap-cursorline
   • language-javascript-jsx
   • nice-index
   • vertical-tabs
   • autocomplete-modules
   • linter
   • linter-eslint
   • linter-flow
3. Install nuclide and disable the following plugins:
   • nuclide-diagnostics-store
   • nuclide-file-tree
   • nuclide-source-control-side-bar
4. Install a better theme and syntax coloring:
   • SETI UI
   • SETI Syntax