6.5.0 • Published 5 years ago

dcg-direct-purchase v6.5.0

Weekly downloads
-
License
ISC
Repository
github
Last release
5 years ago

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/ConfigSourceMapsUglify
devYY
qaYY
stageYY
prodNY

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.