React App Starter

Base configuration for a React/Redux application

---

Contents

1. Build Commands
2. Tests
3. Linting
4. Generators
5. Storybook
6. Notes

---

Build Commands:

To run a local development server on port 8000 with mock data and hot reloading enabled (changes made to code automatically refresh that single component in the browser):

$ npm run local

To run the local environment but fetch data from the development server and run storybook alongside the app:

$ npm run dev

To build the development environment and compile code into ./build:

$ npm run build

To minimize and compile the appliction into the ./build folder for production:

$ npm run prod

---

Tests

To run all tests, and output results to html files that open in browser automatically (runs npm run test:mocha and npm run test:jest):

$ npm run test

To run just Mocha test (test modules functionality), test will run in terminal and output to an html file (/testReports/mochawesome-report/mochawesome.html) that will open in browser:

$ npm run test:mocha

To run just Jest test (test components for rendering & changes), test will run in terminal and output to an html file (/testReports/jestStare-report/index.html) that will open in browser:

$ npm run test:jest

To open the most recent Mocha tests in browser:

$ npm run mochaReport

To open the most recent Jest test in browser:

$ npm run jestReport

---

Linting

To lint src folder (using eslint):

npm run eslint

To lint src and automatically fix errors without notification:

npm run eslint:fix

---

Generators

Install and Generators:

Generators will automatically create modules and components (depending on generator used) for you, that you may then be able to edit accordingly. To use Generators, make sure yeoman is installed globally:

$ npm install -g yo

For each generator, navigate to their respective directories (usually ...'app'/scripts/generators/), and in their root direcory run:

$ npm install

and then run:

$ sudo npm link

Now the generator is ready to be used.

Use Generators

To create a Module, run this script with a camelCased module name supplied. Note: Yeoman will look for the .yo-rc.json file to identify the src directory.

$ yo cbra-module <modname>

This will begin the generator for creating a standard module, and ask a few questions before generating the module in the modules folder along with tests for the module.

To create a Component, run this script with a camelCased component name supplied:

$ yo cbra-component <cmpName>

or (moust be ran from the project directory):

This will begin the generator for creating a standard component, along with tests.

---

Storybook

To run just Storybook (component viewer) on port 5040:

$ npm run storybook

---

Notes

• Some of the application's api calls and functions change slightly based on the enviornment the application is running in. The env gets set automagically based on build script key (i.e. 'dev' or 'prod') that is used. If the enviorment is set manually then, for example, a develoment build may try to make live api calls.

• When possible, try to update application information such as html title, analytics Id, etc... using the buildConfig.js file.