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

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.