Dcg-direct-purchase NPM

dcg-direct-purchase

Install dependencies

npm ci or npm clean-install to download and install the npm packages. This will use package-lock.json to install any packages, will remove node_modules for a fresh install.

Note: Avoid using npm install unless new package is added/removed or updated. Since, we does generate new package-lock.json and re-resolve dependency graph.

Local Dev Server

To start a development server:

npm start: Nation app. (default)
npm start:pbc PBCFS app.

Local static build

This is a production build on local (default: APP_ENV=development). Also, sets PUBLIC_PATH=/.

Steps that execute in series: clean -> build -> ssr -> static-serve

npm run serve: Nation App
npm run serve:pbc: PBCFS App

Build SSR

To trigger just a SSR build explicitly. Pages to be generated can be configured in config/ssrPages.

Note: App must have been build at least once. dist/

npm run ssr: Nation App
npm run ssr:pbc: PBCFS App

Serve Static build content

To serve local static files using http-server.

npm run static
Note: when serving app locally for PBCFS, make sure foxsports.com domain is available(modify /etc/hosts/ file). e.g: 127.0.0.1 local.foxsports.com

Code formatting

Run npm run prettier: To trigger prettier to show the list of files with errors.
Run npm run prettier:fix: To fix your changes.

Runs for .js,.jsx,.json,.css

Linting

npm run lint: Runs eslint & stylelint
npm run lint:ci: Runs eslint && stylelint & prettier on CI builds.
npm run lint:js: Runs eslint on .js,.jsx files.
npm run lint:css: Runs stylelint on .css files.
npm run lint:fix: Runs eslint & stylelint with --fix flags. Should be used locally only.

Run unit tests

npm t or npm test: Run all the unit tests. Not brand specific.
npm run test:pbcfs: Run Tests for PBC FoxSports.
npm run test:fn: Run Tests for Fox Nation.
npm run test:coverage: To generate code coverage report.
npm t -- -u: To update the snapshots.

Directory Structure for developing components

App
- Creating a new bundle, page or flow will is considered a new app that is found under src directory. The shared app can be used for common components, actions and reducers.
Components
- We follow organization by feature(modular) instead of type for scalability and sharability. This means React components, CSS, Unit tests, and Redux Containers is organized in one component
Redux / Global state
- Because Redux state store is considered global - action creators, reducers and store is centralized in one directory called state.
Tests
- There are 2 types of tests framework included. One for unit tests and one for End to End tests.
- Unit Tests are more component or code specific so they are part of the same component.
- End to End tests is for user perspective so its centralized in one place. Found in e2e directory

App configurations based on the environment

Environment/Config	SourceMaps	Uglify
dev	Y	Y
qa	Y	Y
stage	Y	Y
prod	N	Y

By default, development server(local) takes APP_ENV=development for app config and NODE_ENV is set to development

The build script uses APP_ENV to determine the app config(shared/config/app.json), possible values(development, qa, stage, production), NODE_ENV is always set production to enable optimizations for webpack's loaders/plugins.