Skip to main content
Skip table of contents

Frontend developer documentation

The VA.gov frontend is made up of 4 major components.

  • Metalsmith

  • React/Redux

  • Drupal CMS

  • TeamSite

Metalsmith

Metalsmith is a static site generator made from Node.js. It is based off a plugin architecture which makes it very flexible when needing to customize the build process or integrating other systems into it.

React/Redux

React is a front-end single page application library that helps you create painless interactive UIs. We use React in our platform to create web components and also individual applications within the website. The React applications are injected into specific pages. All applications can be found in the vets-website repository in src/applications. We use Redux to manage our data and the state of that data.

Drupal CMS

Drupal content is retrieved via GraphQL and pushed into the Metalsmith pipeline with a custom plugin, where it is then transformed into static HTML pages using Liquid templates.

TeamSite

TeamSite is a content management system built with PERL. This is the original system VA.gov was built on. Vets.gov and VA.gov were merged and needed to be integrated to use both systems without feeling like different systems. Some webpages still live under TeamSite and will eventually get ported over into the new Platform. Some components are shared such as the the MegaMenu and the Footer. These components are injected using a script to render on TeamSite pages.

Client application documentation

Run and build VA.gov locally — These instructions cover building and running VA.gov locally, including configuring any required dependencies.
Frontend workflow — Details about the workflow process for the VA.gov frontend.
Frontend architecture — Overview of the overall architecture of the VA.gov site
Best practices — Frontend development best practices.
Standards — Details about the policies and standards in place for frontend development on VA.gov.
Adding applications and features — A guide to adding new applications and features on Va.gov.
Isolated application builds — Information on what single/grouped application builds are, how they work, and how to get an application added to the allow-list.
Frontend testing — Front end apps on vets-website should have unit tests and end-to-end tests. It is the application team's responsibility to create and maintain adequate automated test coverage for their applications.
Automated code quality — Provide automated tooling to automate to improve code quality with explicit and enforced standards to help reduce the burden of code reviews felt by both VFS and VSP Teams.
Tools — Information about the various tools used for frontend development on VA.gov.
GitHub Actions usage for VA.gov frontend engineers
VA Forms Library Overview
How to opt-in to Drupal as the source of truth for Oracle Health-related apps and widgets — How to opt-in to Drupal as the source of truth for Oracle Health-related apps and widgets. (Cerner was acquired by Oracle and is now called Oracle Health.)

VA.gov Design System

The VA.gov Design System provides guidelines and code to help you quickly create trustworthy, accessible, and consistent digital services on the VA.gov platform.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close