Skip to main content

    Run and build VA.gov

    We're moving our docs!

    Find the latest version of this page on the Platform website.

    Still can't find what you're looking for? Reach out to #vfs-platform-support on Slack.

    Prerequisite

    • Complete the first step in Start up guide.

    Locally run VA.gov

    Start the watch task:

    yarn watch

    Build

    vets-website

    • Webpack manages this build pipeline. At a high level, this process:
      1. Starts Webpack's devevelopment server which
        • Builds the JavaScript and CSS bundles
        • Serves the JavaScript and CSS bundles built by Webpack as well as any scaffolded application pages http://localhost:3001

    content-build

    • Metalsmith manages this build pipeline. At a high level, this process:
      1. Retrieves and builds all of the static pages sourced from vagov-content or Drupal
      2. Serves the static content built by Metalsmith at http://localhost:3002

    Output

    • Metalsmith in the content-build repository outputs static pages tobuild/localhost
    • Webpack in the vets-website repository development server has no output. JavaScript and CSS are kept on disk.

    Watch and rebuild

    • Metalsmith in the content-build repository will rebuild static pages when changes are saved to templates or content in vagov-content
    • Webpack in the vets-website repository will rebuild when changes are saved to JavaScript or SCSS
    • Both updates require a browser refresh to see changes.
    • Changes to build process or configuration files are typically not picked up, and require a restart of the watch task to become active.

    Locally build and run for specific environment

    Note: most of the time, it's better to use the watch task to build the site locally since it is the most developer-friendly experience.

    EnvironmentBuild CommandOutput directoryRun Command
    localhostyarn buildbuild/localhostnpx http-server -p 3001 build/localhost
    dev.va.govyarn build --buildtype=vagovdevbuild/vagovdevnpx http-server -p 3001 build/vagovdev
    staging.va.govNODE_ENV=production yarn build --buildtype=vagovstagingbuild/vagovstagingnpx http-server -p 3001 build/vagovstaging
    www.va.govNODE_ENV=production yarn build --buildtype=vagovprodbuild/vagovprodnpx http-server -p 3001 build/vagovprod

    Build commands

    • create the static pages from the markdown content in the vagov-content repository and data queried from the Drupal API into their output directory
    • create the JavaScript and CSS files with Webpack into /generated folder in their output directory with Webpack

    Production like builds are required for staging and production environments. NODE_ENV=production environment variable is required to be set when running these build commands

    Run commands

    Typically, the reason for building the site locally like this is to build it in production mode and check that it is behaving as you'd expect.

    Deep-linking to urls that are rendered by React apps on VA.gov will not work when you run the site this way, as that relies on some server-side routing that is handled in nginx (or the Webpack dev server when running the watch task)