New Project

gistfile1.txt

Front-end app guidelines

* Use create-react-app
* Use bootstrap with a custom theme
* Use prettier
  * Avoid semicolons
  * 2 space indentation
  * Use trailing commas
  * Single quotes over double quotes
* Use eslint to enforce prettier styling
* Avoid eslint non-prettier related styling rules
* Use yarn for dependencies
* Use ES6 imports
* Use jest for testing from create-react-app
* async/await, fetch, object.assign, rest/spread come from create-react-app
* Add .travis.yml for testing
* Assume the backend will use CORS
* Use enzyme for testing components
* Use sass if a css preprocessor is wanted
* Use `react-router@v4.x.x` or better
* Use `lodash` if necessary
* Use `moment` if necessary
* Use css/sass over css-in-js
  * Use classes only
  * Prefix classnames with component name
  * .Button-color { color: red; }
* Get team approval before adding dependencies
* Use a modern version of node, v6 or v8 if possible
* Eject create-react-app config if necessary
* Use dynamic `import()`'s for code splitting
* `create-react-app` uses webpack 2
* Require 90% test coverage per file
* Name files based on the thing they export
  * Uppercase classes, singletons, and constants exports
  * Lowercase single function exports
  * export class Button { ... } (Button.js)
  * export function doesSomething() { ... } (doesSomething.js)
* Test files are siblings to the files they test
* Name test files based on the file they are testing
  * Thing.js / Thing.test.js

Directory Structure Recommendation
* src/
  * api (http backend interaction logic)
  * components (shared components)
  * lib (all other logic files)
  * pages
    * page1
      * ... (page1 specific components and tests)
    * page2
      * ... (page2 specific components and tests)
  * static (static assets with self explanatory folder names)
    * fonts
    * images
    * styles
* ... (project config files)

jest

I still haven't found a unit testing system that I like outside of phantom-js and its respective chrome driver. Jest is still rife with problems trying to debug your unit tests.
jestjs/jest#1652
Using console.log everywhere in your tests, rather than using chrome's excellent debugging capabilities, makes writting unit tests harder. If they're harder to write, no one will use them.

Also, I think node-inspector is no longer maintained.

If we can find a system that can be run directly in chrome's inspector without having to copy and paste a strange url into the browser for each test run, I'd say we're looking pretty good.

I recommend using redux and react-redux.

I like embedding styles along with the code that runs them. For this reason, I actually have taken a real shine to css modules.

CSS Modules work great for your own stuff. That being said, it's important to use :global if you're using css to update bootstrap/external library css.

I like naming tests as siblings to the respective code that they test. I like that a whole bunch.

Require that each file non-test file is no longer than 350 lines.
Each method is no longer than 30 lines.

If redux is used, use reselect.
Heavily unit test the redux/reselect architecture.
react should only be used to display values, rather than compute logic.

Server must use HTTPS.

@andest01 reconnecting with chrome devtools should be fixed in newer versions of chrome https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

Paul Irish is one of the only web bloggers i trust.