Bundles and Code Organization

Application Bundling with Webpack

Webpack is a modular asset bundler used to build VA.gov client applications. 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 web browsers

• Performance optimization

• Providing the application launch behavior that ties all of this together

Our Webpack configuration leverages the CommonsChunkPlugin to code split source code into:

• Entry files that are application specific e.g. facilities-locator.entry.js

• A vendor.js file containing common modules shared between entry points

Webpages load application specific files on demand. More information on this can be found in Webpack’s code splitting documentation.

Common bundles

• Common entry files included on every page:

  • vendor.entry.js

    • Generated by Webpack's SplitChunksPlugin

    • Includes shared dependencies such as react, redux, and node_modules

  • web-components.entry.js

    • VA.gov Design System's npm module: https://github.com/department-of-veterans-affairs/component-library

    • Generated by Webpack code splitting with a dynamic import in src/platform/site-wide/wc-loader.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, e.g. https://www.va.gov/gi-bill-comparison-tool

  • pre-need.entry.js: React app that uses the VA.gov Forms Library, e.g. https://www.va.gov/burials-and-memorials/pre-need/form-10007-apply-for-eligibility/introduction

Directory Structure of vets-website

• /config

  • Cypress End-to-End configurations:

    • cypress-reporters.json

    • cypress-testrail.json

    • cypress.json

  • Nightwatch.js End-to-End test runner and configurations:

    • nightwatch-globals-sauce.js

    • nightwatch-sauce.js

    • nightwatch.docker-compose.js

    • nightwatch.js

  • Sass configuration: sass-lint.yml

  • Webpack production and development configurations:

    • webpack.config.js

    • webpack.dev.config.js

• /docs: Best practices and troubleshooting documents

• /jenkins: Jenkins setup, build, and deploy scripts for the vets-website repository

• /script

  • /component-migration: Scripts for migrating React components to web components

  • /eslint-plugin-va: Project specific linting plugin

  • /github-actions: Scripts used in GitHub Actions workflows

  • app-coverage-report.js: Generates coverage report for all applications in the repository

  • app-list.sh: Outputs a list of the applications in vets-website

  • build-help.js: Used in the watch.js script for outputting CLI options

  • build.sh: Builds vets-website applications

  • can-i-deploy.js: Used for verifying if changes can be deployed in Pact Broker contract tests

  • check-node-version.js: Checks if the necessary node version is installed

  • install-repos.sh: Clones sibling repositories needed for running the entire site locally

  • mocha.js: Unit test runner and watch task

  • pr-check.js: Used in CI to determine if platform-release-tools should be requested in a PR

  • pre-push.sh: Checks if new commits have been added to a git branch based off of main

  • prebuild.js: npm pre-build script that checks the node version and installs pre-commit hooks

  • publish-pacts.js: Publishes and tags pacts generated by Pact Broker tests

  • reset-environment.js: Installs yarn and removes Babel cache and node_modules directory

  • review-entrypoint.sh: Builds and serves the site in review instance setup

  • run-cypress-tests-docker.js: Used for running Cypress tests in a Docker container

  • run-docker-nightwatch.sh: Runs mock vets-api in a Docker container

  • run-mockapi.sh: Runs mock API server

  • run-nightwatch.sh: Test harness for running Nightwatch.js tests

  • run-review-instance-api.js: Runs a local build that points to a review instance API

  • run-unit-test-help.js: Outputs CLI options for run-unit-test.js script

  • run-unit-test.js: Runs unit tests

  • security-check.js: Checks for security advisories in dependencies

  • update-json-schema.sh: Helper for updating dependency version of vets-json-schema

  • utils.js: Utility functions used throughout the repository

  • watch-tests.js: Watch task for unit tests (proof of concept)

  • watch.js: Starts the Webpack dev server

• /src: Source files for vets-website applications

  • /applications: Application specific code that gets bundled in Webpack

  • /platform: Shared code that includes polyfills, code thats injected directly into the site, or used for testing

  • /site: Contains assets used in applications, and constants used throughout the repository

• 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 (used with ESLint): .prettierrc

  • Yarn: .yarnrc, yarn.lock, package.json

• json-config-example.json: IntelliSense configuration for supporting babel-plugin-module-resolver

Help and feedback

• Suggest content changes to this page.

• Submit new Platform Website content.

• Get help from the Platform Support Team in Slack.

• Submit a feature idea to the Platform.