Bundles and Code Organization

Application Bundling with Webpack

Webpack is a modular asset bundler used to build the VA.gov client application. Its responsibilities include:

• dependency resolution in JavaScript and CSS files,
• splitting the project into application specific and shared resources during the build process,
• enabling support for legacy browsers,
• performance optimization, and
• providing the application launch behavior that ties all of this together.

Most applications leverage the CommonsChunkPlugin to code split their source into

- entries files that are application specific e.g. facilities-locator.entry.js, and
- a vendor.js file containing common modules shared between entry points

• Webpage loads application specific files on demand. More information on this can be found in Webpack code splitting

Common bundles

• settings.js
  • adds window.settings- a globally available object containing build and application settings
  • generated by metasmith plugin src/site/stages/build/plugins/create-build-settings.js
  • consumed by webpack loader config/manifest-loader primarily for application routes
• common entry files included on every page
  • vendor.entry.js
    • generated by Webpack's SplitChunksPlugin
    • includes shared dependencies including react, redux, and node_modules
  • formation.js
    • Formation Design System's npm module: https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/tree/master/packages/formation
    • generated by Webpack code splitting with an dynamic import in src/platform/site-wide/index.js
• examples of application entry files
  • static-pages.entry.js
    • included on all non-react pages
    • e.g. https://www.va.gov
  • gi.entry.js
    • stand alone react app
    • https://www.va.gov/gi-bill-comparison-tool
  • pre-need.entry.js
    • react app that uses the forms system
    • https://www.va.gov/burials-and-memorials/pre-need/form-10007-apply-for-eligibility/introduction

Files Overview

• /config
  • jest configs - proof of concepts- not used in CI
    • jest-integration.config.js
    • jest-vrt.config.js
  • Nightwatch e2e test runner and configurations
    • nightwatch-globals-sauce.js
    • nightwatch-sauce.js
    • nightwatch.docker-compose.js
    • nightwatch.js
  • sass config: sass-lint.yml
  • webpack production and dev configs
    • webpack.config.js
    • webpack.dev.config.js
  • build setup script
    • manifest-loader.js - passes front matter of content files to app entry files
    • parse-app-settings.js - reads settings.js - a file containing app information generated during Metalsmith build
• /docs - best practices and troubleshooting docs
• /jenkins - jenkins setup, build, deploy script for vets-websites repo
• /script
  • /custom-eslint - project specific linting plugin
  • /hooks - -git -precommit hook
  • app-list.sh - bash script that outputs a list of the applications in vets-website
  • build.js - imports and runs build script in src/site/stages/build
  • csv-path-builder.js - TODO
  • heroku-postbuild.sh - static content builder used by Heroku when a new branch is pushed
  • mocha.js - unit test runner and watch task
  • prearchive.js - updates paths to js, css, and image assets to point to S3 asset bucket
  • prebuild.js - npm prebuild script that checks node version and install precommit hooks
  • preview.js - metalsmith build script for drupal preview
  • reset-environment.js - installs yarn and cleans up node_modules- used by build process
  • run-coverage.sh - runs mocha unit test coverage report
  • run-docker-nightwatch.sh - runs mock vets-api with docker
  • run-mockapi.sh - runs js mock vets-app
  • run-nightwatch.sh - test harness for running end to end tests
  • run-puppeteer-tests.sh - test harness for puppeteer tests (proof of concept)
  • run-unit-test.sh - runs unit tests
  • security-check.js - checks for security advisories in dependencies
  • update-json-schema.js - helper for updating dependency version of vets-jason-schema
  • watch.js - watch task for unit tests (proof of concept)
• /src - source files for vets-website web applications
  • /applications - application specific code that's into -entry.js files
  • /platform - shared code that's includes polyfilles, code thats injected directly into the site, or used for testing
  • /site - Metalsmith pipeline code and templates used to generate static content pages from Drupal api or Markdown files
• runtime configs used locally and in CI for builders, dependency managers, linters, transcoders, and source control
  • babel: .bablerc
  • docker: .dockerignore, Dockerfile, docker-compose.yml
  • eslint: .eslintrc, .eslintignore
  • git: .gitignore
  • nvm: .nvmrc
  • prettier (linting runtime used with eslint): .prettierrc
  • yarn: .yarnrc, yarn.lock, package.json
• Procfile, app.json - TODO some heroku thing
• json-config-example.json - intellisense config for supporting babel module-resolver plugin