PHPackages va-gov/web - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. va-gov/web AbandonedNode-project va-gov/web ========== Front-end for VA.gov. This repository contains the code that generates the www.va.gov website. It contains a Metalsmith static site builder that uses a Drupal CMS for content. This file is here to publish releases to https://packagist.org/packages/va-gov/web, so that the CMS CI system can install it and update it using standard composer processes, and so that we can run tests across both systems. See https://github.com/department-of-veterans-affairs/va.gov-cms for the CMS repo, and stand by for more documentation. v0.1.1796(5y ago)27914.6k↓80.5%158[17 issues](https://github.com/department-of-veterans-affairs/vets-website/issues)[311 PRs](https://github.com/department-of-veterans-affairs/vets-website/pulls)CC0-1.0JavaScriptCI failing Since Jun 11Pushed 2mo ago201 watchersCompare [ Source](https://github.com/department-of-veterans-affairs/vets-website)[ Packagist](https://packagist.org/packages/va-gov/web)[ RSS](/packages/va-gov-web/feed)WikiDiscussions main Synced 2d ago READMEChangelog (10)DependenciesVersions (790)Used By (0) VA.gov [![Build Status](https://github.com/department-of-veterans-affairs/vets-website/actions/workflows/continuous-integration.yml/badge.svg?branch=main)](https://github.com/department-of-veterans-affairs/vets-website/actions/workflows/continuous-integration.yml/badge.svg?branch=main) ============================================================================================================================================================================================================================================================================================== [](#vagov-) Table of Contents ----------------- [](#table-of-contents) - [VA.gov ](#vagov-) - [Table of Contents](#table-of-contents) - [What is this?](#what-is-this) - [Common commands](#common-commands) - [Building `vets-website`](#building-vets-website) - [Building applications](#building-applications) - [Building static content](#building-static-content) - [Building both together](#building-both-together) - [Working in GitHub Codespaces](#working-in-github-codespaces) - [Running tests](#running-tests) - [Unit tests](#unit-tests) - [End-to-end (E2E) / Browser tests](#end-to-end-e2e--browser-tests) - [Debugging Node 22 CI failures](#debugging-node-22-ci-failures) - [Running a mock API for local development](#running-a-mock-api-for-local-development) - [Option 1: MSW browser mocking (recommended for new work)](#option-1-msw-browser-mocking-recommended-for-new-work) - [Option 2: mocker-api (legacy)](#option-2-mocker-api-legacy) - [More commands](#more-commands) - [Supported Browsers](#supported-browsers) - [API Keys](#api-keys) - [Additional Resources](#additional-resources) - [Not a member of the repository and want to be added?](#not-a-member-of-the-repository-and-want-to-be-added) What is this? ------------- [](#what-is-this) This is the front end repository for VA.gov. It contains application code used across the site. There are several repositories that contain the code and content used to build VA.gov. If you're looking to get started running VA.gov locally, you should read the [Getting Started](https://depo-platform-documentation.scrollhelp.site/developer-docs/Setting-up-your-local-frontend-environment.1844215878.html) documentation. Common commands --------------- [](#common-commands) Once you have the site set up locally, these are some common commands you might find useful: I want to...Then you should...fetch all dependencies`yarn install-safe`; run this any time `package.json` changesbuild applications`yarn build`run the webpack dev server`yarn watch`build in codespaces`yarn build:codespaces`. Build with codespace optionsBuilding `vets-website` ----------------------- [](#building-vets-website) ### Building applications [](#building-applications) `vets-website` uses [Webpack](https://webpack.js.org) to bundle application assets. To **build all applications**, run the following: ``` yarn build ``` To **build one or more applications**, you can use the `--entry` option: ``` yarn build --entry=static-pages,auth ``` To **recompile your application when you make changes**, run: ``` yarn watch ``` Stylelint is disabled by default in watch to improve performance. To enable it, pass: ``` yarn watch --env stylelint=true ``` You can also **limit the applications Webpack builds** with `--env entry`: ``` yarn watch --env entry=static-pages,auth ``` The `entryname` for your application can be found in its `manifest.json` file. If you're developing a feature that requires the API, but can't or don't want to run it locally, you can specify `--env api`: ``` yarn watch --env api=https://dev-api.va.gov ``` You will need to disable CORS in your browser when using a non-local API. Here are some helpful links that explain how to do this: - - **Note:** If you try to log on, ID.me will redirect you to the environment that the API is set up for. So in the above example, you'd be **redirected back to dev.va.gov.** ### Building static content [](#building-static-content) Static pages are created from the [content-build](https://github.com/department-of-veterans-affairs/content-build) repository. See the [building static content](https://github.com/department-of-veterans-affairs/content-build#building-static-content) documentation. ### Building both together [](#building-both-together) After [building the applications](#building-applications), running `yarn build` in the `../content-build` directory will build content using the generated app bundles from `vets-website/build/localhost/generated`. The full build can be seen in `../content-build/build/localhost`. Working in GitHub Codespaces ---------------------------- [](#working-in-github-codespaces) [Read the Codespaces documentation for this repository](https://depo-platform-documentation.scrollhelp.site/developer-docs/Using-GitHub-Codespaces.1909063762.html#UsingGitHubCodespaces-Codespacesinvets-websiteandcontent-buildrepositories). Running tests ------------- [](#running-tests) ### Unit tests [](#unit-tests) To **run all unit tests**, use: ``` yarn test:unit ``` If you want to **run only one test file**, you can provide the path to it: ``` yarn test:unit src/applications/path/to/test-file.unit.spec.js ``` To **run all tests for a folder in src/applications**, you can use app-folder: ``` yarn test:unit --app-folder hca ``` To **run all tests in a directory**, you can use a glob pattern: ``` yarn test:unit src/applications/path/to/tests/**/*.unit.spec.js* ``` To **run tests with stack traces**, pass log-level `trace`: ``` yarn test:unit --log-level trace ``` To **run tests with coverage output**, you can pass the coverage option: ``` yarn test:unit --coverage ``` To **run tests with coverage and open the coverage report in your browser for a specific app** from `src/applications`: ``` yarn test:coverage-app {app-name} ``` For **help with test runner usage**, you can run: ``` yarn test:unit --help ``` ### End-to-end (E2E) / Browser tests [](#end-to-end-e2e--browser-tests) - E2E or browser tests run in Cypress. **Before running Cypress tests**, first make sure that: 1. `vets-website` is served locally on port 3001 - You can do this with `yarn watch` 2. `vets-api` is **NOT** running - Any required APIs will be mocked by the Cypress test that needs them. To **open the Cypress test runner UI and run any tests within it**: ``` yarn cy:open ``` To **open the Cypress test runner UI in Codespaces and run any tests within it**: ``` yarn cy:open-codespaces ``` Then visit and log in with the password `vscode`. To **run Cypress tests from the command line**: ``` yarn cy:run ``` To **run specific Cypress tests from the command line**: ``` # Running one specific test. yarn cy:run --spec "path/to/test-file.cypress.spec.js" # Running multiple specific tests. yarn cy:run --spec "path/to/test-a.cypress.spec.js,path/to/test-b.cypress.spec.js" # Running tests that match a glob pattern. yarn cy:run --spec "src/applications/my-app/tests/*" yarn cy:run --spec "src/applications/my-app/tests/**/*" # Running tests that match multiple glob patterns. yarn cy:run --spec "src/applications/a/tests/**/*,src/applications/b/tests/**/*" ``` To **run Cypress tests from the command line on a specific browser**: ``` yarn cy:run --browser chrome yarn cy:run --browser firefox ``` To **run Cypress tests with reports** ``` yarn cy:run:localreports my-app-folder ``` Examples: - `yarn cy:run:localreports appeals/995` - `yarn cy:run:localreports ask-a-question` Afterward, check `/mochawesome-report` contents. **For other options with `yarn cy:run`,** [the same options for `cypress run` are applicable](https://docs.cypress.io/guides/guides/command-line.html#Commands). ### Debugging Node 22 CI failures [](#debugging-node-22-ci-failures) If your PR passes tests locally but fails the Node 22 compatibility check in CI, you can reproduce the issue locally: ``` # Switch to Node 22 nvm use 22 # OR install if you don't have it nvm install 22 && nvm use 22 # Create a temporary branch from the Node 22 test branch git checkout -b temp-test-node22 origin/node-22-bug-bash-testing # Merge your feature branch into it (this replicates what CI does) git merge your-feature-branch # Install dependencies yarn install-safe # Run the failing test yarn test:unit path/to/failing/test.unit.spec.jsx # Make fixes to the test file(s) until tests pass # Switch back to your feature branch git checkout your-feature-branch # Switch back to Node 14 for normal development nvm use 14 # Apply the fixes (cherry-pick the commit or manually copy changes) git cherry-pick # Push your feature branch with the fixes git push origin your-feature-branch # Clean up temporary branch (optional) git branch -D temp-test-node22 ``` **Note:** The Node 22 branch uses happy-dom instead of jsdom, which can cause different behavior in tests, particularly with sessionStorage, web components, and async operations. Running a mock API for local development ---------------------------------------- [](#running-a-mock-api-for-local-development) ### Option 1: MSW browser mocking (recommended for new work) [](#option-1-msw-browser-mocking-recommended-for-new-work) MSW (Mock Service Worker) intercepts API requests directly in the browser — no separate server process needed. Define your mock handlers in your app, then run: ``` USE_MOCKS=true yarn watch --env entry=your-app --env api=http://mock-vets-api.local ``` See [`src/platform/mocks/README.md`](src/platform/mocks/README.md) for full setup instructions, available mock data, and troubleshooting. ### Option 2: mocker-api (legacy) [](#option-2-mocker-api-legacy) In separate terminal from your local dev server, run ``` yarn mock-api --responses path/to/responses.js ``` See the [mocker-api usage documentation](https://github.com/jaywcjlove/mocker-api#usage) for how to use the `responses.js`. **If you need to log in**, go to your browser dev tools console and enter `localStorage.setItem('hasSession', true)` and refresh the page. This will then trigger a `/v0/user` call, which will then get the mocked response of a logged-in user. (Assuming you've mocked that response, of course.) Responses to common API requests, such as `/v0/user` and `/v0/maintenance_windows`, you can use [`src/platform/testing/local-dev-mock-api/common.js`](src/platform/testing/local-dev-mock-api/common.js) ``` const commonResponses = require('src/platform/testing/local-dev-mock-api/common'); module.exports = { ...commonResponses, 'GET path/to/endpoint': { foo: 'bar' }, }; ``` More commands ------------- [](#more-commands) After a while, you may run into a less common task. We have a lot of commands for doing very specific things. I want to...Then you should...build the production site (dev features disabled).`yarn build:production`deploy the production site (dev features disabled).`node src/platform/testing/e2e/test-server.js --buildtype=vagovprod`reset local environment (clean out node modules, Babel cache, and runs `npm install`)`yarn reset:env`run the app pages on the site for local development`yarn watch --env scaffold`run the site for local development with automatic rebuilding of Javascript and sass **with** css sourcemaps`yarn watch:css-sourcemaps` then visit `http://localhost:3001/`. You may also set `--env buildtype` and `NODE_ENV` though setting `NODE_ENV` to production will make incremental builds slow.run the site for local development with automatic rebuilding of code and styles for specific **apps**`yarn watch --env entry=disability-benefits,static-pages`. Valid application names are in each app's `manifest.json` under `entryName`run the site so that devices on your local network can access it`yarn watch --env host=0.0.0.0 --env public=192.168.x.x:3001` Note that we use CORS to limit what hosts can access different APIs, so accessing with a `192.168.x.x` address may run into problemsrun the site so that it can be accessed from a public codespaces URL`yarn watch --env api=https://${CODESPACE_NAME}-3000.app.github.dev public=https://${CODESPACE_NAME}-3001.app.github.dev` (only works from a codespaces terminal with mocks running and public port visibility)watch file changes without starting the server`yarn watch:no-server`run all unit tests and watch`yarn test:watch`run only E2E tests (headless)Make sure the site is running locally (`yarn watch`) and run the tests with `yarn cy:run`run only E2E tests (headless) in CodespacesMake sure the site is running locally (`yarn watch`) and set up virtual display: `export DISPLAY=:99 && Xvfb :99 -screen 0 1024x768x24 -ac +extension GLX +render -noreset &` then run `export DISPLAY=:99 && yarn cy:run`run E2E tests in the browser`yarn cy:open`count all Cypress E2E specs`yarn cy:count`run all linters`yarn lint`run only javascript linter`yarn lint:js`run only sass linter`yarn lint:sass`run lint on JS and fix anything that changed`yarn lint:js:changed:fix`add new npm modules`yarn add my-module`. Use the `--dev` flag for modules that are build or test related.get the latest json schema`yarn update:schema`. This updates our [`vets-json-schema`](https://github.com/department-of-veterans-affairs/vets-json-schema) to the most recent commit.check test coverage`yarn test:coverage`run [statoscope](https://github.com/statoscope/statoscope) on your app`yarn build-analyze-app static-pages`add a new React app`yarn new:app` (make sure you have [`vagov-content`](https://github.com/department-of-veterans-affairs/vagov-content/) and [`content-build`](https://github.com/department-of-veterans-affairs/content-build/) sibling to `vets-website`)Supported Browsers ------------------ [](#supported-browsers) BrowserMinimum versionNoteInternet Explorer11Microsoft Edge13Safari / iOS Safari9Chrome / Android Web view44*Latest version with >0.5% of traffic*Firefox52*Latest version with >0.5% of traffic*API Keys -------- [](#api-keys) ### Mapbox Tokens [](#mapbox-tokens) Several applications on VA.gov use Mapbox for mapping functionality. For local development, you'll need to set up Mapbox API tokens. **Getting a dev token:** 1. See [this link](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/platform/working-with-vsp/policies-work-norms/sensitive-guidance.md) for details on handling non-public keys and tokens. 2. See [this link](https://github.com/department-of-veterans-affairs/va.gov-team/issues/new?assignees=&labels=external-request%2Coperations%2Cops-access-request&template=aws-access-request.yml&title=AWS+access+for+%5Bindividual%5D) for instructions on requesting AWS access. **Local development setup:** Fetch the dev token from AWS and write it to your `.env` in one step: ``` echo "MAPBOX_TOKEN=$(aws ssm get-parameter --name /dsva-vagov/vets-website/dev/mapbox_token --with-decryption --query Parameter.Value --output text)" >> .env ``` Or manually create a `.env` file in the root of `vets-website` with: ``` MAPBOX_TOKEN= ``` This single token is used as the fallback for all Mapbox-consuming applications. Each app checks for an app-specific override first (e.g., `MAPBOX_TOKEN_FACILITY_LOCATOR`), then falls back to `MAPBOX_TOKEN`. For local development, the base token is all you need. The `.env` file is already configured to work with dotenv for webpack. **Deployed environments:** In CI and deployed environments (dev, staging, production), each application receives its own Mapbox token from AWS Systems Manager. These are injected via the CI workflow files in `.github/workflows/`. Additional Resources -------------------- [](#additional-resources) 1. [Frontend developer documentation home](https://depo-platform-documentation.scrollhelp.site/developer-docs/frontend-developer-documentation) 2. [Manual](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/platform/accessibility/testing/508-manual-testing.md) and [Automated](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/platform/accessibility/testing/508-automated-testing.md) 508 Testing 3. [Using yarn Workspaces](https://depo-platform-documentation.scrollhelp.site/developer-docs/yarn-workspaces) Not a member of the repository and want to be added? ---------------------------------------------------- [](#not-a-member-of-the-repository-and-want-to-be-added) - If you're on a VA.gov Platform team, contact your Program Manager. - If you're on a VFS team, you must complete [Platform Orientation](https://depo-platform-documentation.scrollhelp.site/getting-started/platform-orientation) to be added to this repository. This includes completing your Platform Orientation ticket(s) in GitHub. ### Health Score 53 — FairBetter than 96% of packages Maintenance56 Moderate activity, may be stable Popularity45 Moderate usage in the ecosystem Community39 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor9 9 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 790 Last Release 1877d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4c5b50a217bdddd570c825834b26758861f0ee1a8a3c75daed59d949ea7c102e?d=identicon)[va-cms-bot](/maintainers/va-cms-bot) ![](https://www.gravatar.com/avatar/7ce273352250711942c807634713ad147211946a65653b98a3b53eef883750e5?d=identicon)[ndouglas](/maintainers/ndouglas) ![](https://www.gravatar.com/avatar/011d98f7a76b7946368b0bbe1565df51ba9e46f566be1ddc023fedee63d7b699?d=identicon)[olivereri](/maintainers/olivereri) --- Top Contributors [![jbalboni](https://avatars.githubusercontent.com/u/634932?v=4)](https://github.com/jbalboni "jbalboni (1388 commits)")[![Mottie](https://avatars.githubusercontent.com/u/136959?v=4)](https://github.com/Mottie "Mottie (1360 commits)")[![dannychapman](https://avatars.githubusercontent.com/u/281709?v=4)](https://github.com/dannychapman "dannychapman (1119 commits)")[![longmd](https://avatars.githubusercontent.com/u/6738544?v=4)](https://github.com/longmd "longmd (737 commits)")[![webinista](https://avatars.githubusercontent.com/u/354277?v=4)](https://github.com/webinista "webinista (678 commits)")[![U-DON](https://avatars.githubusercontent.com/u/1067024?v=4)](https://github.com/U-DON "U-DON (653 commits)")[![erikphansen](https://avatars.githubusercontent.com/u/20728956?v=4)](https://github.com/erikphansen "erikphansen (626 commits)")[![bshyong](https://avatars.githubusercontent.com/u/303289?v=4)](https://github.com/bshyong "bshyong (598 commits)")[![michaelclement](https://avatars.githubusercontent.com/u/18408628?v=4)](https://github.com/michaelclement "michaelclement (465 commits)")[![annekainicUSDS](https://avatars.githubusercontent.com/u/25183456?v=4)](https://github.com/annekainicUSDS "annekainicUSDS (410 commits)")[![cvalarida](https://avatars.githubusercontent.com/u/12970166?v=4)](https://github.com/cvalarida "cvalarida (399 commits)")[![CBonade](https://avatars.githubusercontent.com/u/34250637?v=4)](https://github.com/CBonade "CBonade (392 commits)")[![bethpotts](https://avatars.githubusercontent.com/u/14881910?v=4)](https://github.com/bethpotts "bethpotts (372 commits)")[![awong-dev](https://avatars.githubusercontent.com/u/144579?v=4)](https://github.com/awong-dev "awong-dev (358 commits)")[![ncksllvn](https://avatars.githubusercontent.com/u/1915775?v=4)](https://github.com/ncksllvn "ncksllvn (348 commits)")[![kelsonic](https://avatars.githubusercontent.com/u/12773166?v=4)](https://github.com/kelsonic "kelsonic (345 commits)")[![vbahinwillit](https://avatars.githubusercontent.com/u/3587066?v=4)](https://github.com/vbahinwillit "vbahinwillit (343 commits)")[![crwallace](https://avatars.githubusercontent.com/u/3453669?v=4)](https://github.com/crwallace "crwallace (330 commits)")[![mdewey](https://avatars.githubusercontent.com/u/1793923?v=4)](https://github.com/mdewey "mdewey (323 commits)")[![it-harrison](https://avatars.githubusercontent.com/u/8867779?v=4)](https://github.com/it-harrison "it-harrison (323 commits)") --- Tags frontendhacktoberfestplatform ### Embed Badge ![Health badge](/badges/va-gov-web/health.svg) ``` [![Health](https://phpackages.com/badges/va-gov-web/health.svg)](https://phpackages.com/packages/va-gov-web) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)