Welcome to the VA digital services platform frontend overview. The goal of this article is to provide a high-level overview of our frontend architecture to get you oriented with the vets-website and content-build repositories.
vets-website). There is no server-side rendering or processing of the frontend. The build process compiles everything into static resources that are served to users.
Content build process
src/applications/ directory in
vets-website. For each application, you will find a
manifest.json file that contains application specific information, as well as an entry in the
manifest.json files are used by Webpack in the application build, while
registry.json is used by the content build. See Creating a new application for more information on the difference between
manifest.json files and the
In an application’s
manifest.json file, you'll find the root URL of the application, which you can use to navigate to on the website. These applications usually have client-side routes, so opening the root URL may allow you to click on links to other pages that are fully client-side.
You’ll also find that our visual components and site-wide styles live in an external design system. The VA.gov Design System is based on the US Web Design System, with some additional modifications by our team. As part of that design system, we provide a set of React components covering common patterns that get published to npm. You'll likely use these components to make your applications accessible and consistent with the rest of VA.gov.
Routing for React apps
The production deployment of
React applications have a single entry page created by the content build, and a special Nginx config entry. Each of the React applications listed in that config are standalone single-page apps. For each of the URLs listed in the config entry, the Nginx server routes anything that starts with that URL to the static page at that URL, instead of trying to find a content page for a client-side route with the app. See the example below for a step by step view of that process.
In summary, Nginx routes different URLs to the same static entry page, and React Router renders the correct component based on the route configuration on the client-side.
Here's an example using the claim status application:
/track-claimsis configured as a React application
Since React Router has a base URL of
/track-claims, it runs its routing logic on
/your-claims/2344/detail, and renders the appropriate component for that URL.
One other thing to note is that links that use the
<Link /> component or the
router object in the React app use the history API to change the URL without reloading the page. React Router listens for these URL changes and renders the right component for you. This is why you have to use
<Link /> and not a regular
<a> element, which results in a page refresh for the URL you're trying to link to.
Locally, we've configured the
webpack-dev-server to do the same redirects as Nginx, however they are duplicated in a few places:
vets-website/src/platform/testing/e2e/test-server.js (for End-to-End tests)
You will need to the Nginx config entry when creating a new React application.