testable-reactions

The grass is always greener
=======

Javascript Frontend Greenfield Boilerplate (IE10+)
----

this project includes:

+ React
+ Babel
+ Webpack
+ Docker
+ NYC
+ Mocha
+ Nightmare
+ Torment
+ Enzyme
+ Sinon
+ Coveralls
+ eslint
+ StyleLint
+ Flow
+ Prettier

Everyone loves to start new projects. This repo is a blank, new frontend project just for us! It's an amalgamation of best practises for how to setup and organize a project. You don't have to use it in your projects in this way, but it is recommended - it makes easier for developer onboarding.

Getting Started
----

Prerequisites: Install Docker and git. You might also want to install node.js, but this not stricly needed.
For Mac: Install Docker for Mac (Stable Channel Don't install the older docker-machine.
For Linux: Install Docker Engine Community Edition. You'll also need to separately install docker-compose

To run it:

+ git clone https://github.com/mousemke/testable-reactions.git
+ cd testable-reactions to go into the project folder
+ docker-compose up --build to build and run it

The "app" is then available at http://localhost:4080

To use it as a template for your projects:

+ in package.json change package, name, and author

The entry point on your new app is ./src/index.js, which is called by ./index.html.

Folder Structure Convention
----

src: main source code. Don't use app, even though that is comnon for React apps. src works for backend services and even Java projects!

dist: final generated files for production usage (target folder for Java projects).

test: all tests, with subfolders for unit, visual or any other folders for different types of tests

docker: anything related to docker. We used to have docker-compose.yml also in this folder, but it has moved to the root folder, as this is how docker-compose works more elegantly.

Scripts convention
----

Scripts, standardized across repos

available scripts:

| script | description |
|----------|-------------|
| build | builds the dist files |
| prettier | runs prettier |
| start | starts the dev server on whatever port is defined in ./variables |
| test | runs all tests except the e2e tests|
| test:e2e | runs the end-to-end tests |
| test:e2e:debug | runs the end-to-end tests in debug mode |
| test:lint | checks the js and jsx files for js and code style error |
| test:lint:fix | checks the js and jsx files for js and code style error and fixes them if able |
| test:style | checks the css files for style errors |
| test:style:fix | checks the css files for style errors and fixes them if able |
| test:type | runs flow to test the typing |
| test:unit | runs a quick unit test |
| test:unit:coverage | runs a unit test that determines test coverage and reports in the browser |
| test:unit:coverage:cli | runs a unit test that determines test coverage and reports in the command line |
| test:visual | runs visual regression tests |
| test:visual:debug | runs visual regression tests with visual and console debug output |
| test:visual:baseline | builds the project and copies the files to be served on test time |
| test:visual:clean | removes old visual test images and the baseline. then generates a new baseline|
| test:visual:cli | runs visual regression tests |

#### you can run script from the docker container is already running by doing either of these:
+ login to container with docker-compose exec testable-reations bash and the run scripts from within container with npm run --silent