dcg-direct-purchase v6.5.0
dcg-direct-purchase
Install dependencies
npm ci
ornpm clean-install
to download and install the npm packages. This will usepackage-lock.json
to install any packages, will removenode_modules
for a fresh install.
Note: Avoid using
npm install
unless new package is added/removed or updated. Since, we does generate newpackage-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 Appnpm 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 Appnpm 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 & stylelintnpm 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
ornpm 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.