This repository is no longer maintained.
This repository contains the files of the National Voter Registration Form (NVRF) filler app embedded on vote.gov website. This app is built using Vite and React integrating data from API endpoints found on vote.gov.
Node: https://nodejs.org/en/
NVM: https://github.com/nvm-sh/nvm
Use NVM to load the designated node version for running the app and install all dependencies.
nvm use
npm install
Initiate the app on localhost to access via your browser.
npm start
There are two scenarios to generate build assets:
This ensures that the assets get built in the appropriate location for delivery on pages.cloud.gov
npm run pages
This ensures that the assets get build appropriately for delivery on vote.gov
npm run build
The NVRF app is built on Vite and React using USWDS React components from the Trussworks USWDS React component library.
| Directory/file | Description |
|---|---|
index.html |
Main entrypoint for the app in English |
/es/index.html |
Main entrypoint for the app in Spanish |
/public/files/*.pdf |
Validated copies of the latest translated versions of the NVRF PDF |
/src/Components |
App components |
/src/Components/Buttons |
Buttons are used to render buttons or links styled as buttons |
/src/Components/FieldComponents |
Field Components are used to apply consist properties across each field |
/src/Components/Fields |
Fields load specific data/configuration for each field in the app |
/src/Utils |
Utility functions for fetch, processing, parsing or validation |
/src/Views |
App pages/steps |
/src/Views/FormPages |
Multistep form pages/steps associated with progress bar |
See testing README.
Currently CORS rules prevents the app from being hosted anywhere but vote.gov. But generally speaking to deploy the app you must:
- Run the build process to create the
/distfiles. - Host the
/assetsfiles on your server and copy the pdfs into root/files/*.pdflocation. - Embed the app in a web page
<!-- Ensure that your html tag has valid 'lang' and `dir` attributes -->
<html lang="en" dir="ltr">
<!-- Load dependencies in the head -->
<script type="module" crossorigin src="/assets/main.js"></script>
<link rel="stylesheet" crossorigin href="/assets/main.css">
<!-- Embedded REACT app -->
<div class="nvrf-app-container" data-returnPath='https://vote.gov/register/alabama' data-stateId="al" id="root"></div>
data-returnPath: valid url path back to the state page
data-stateId: valid state abbreviation
See Drupal module for more specific implementation instructions vote_nvrf.
We log all changes in the release notes.