Frontend

The frontend is built in React, wired up with React Router and Redux, compiled using Webpack and Babel. Styles are written in SASS, leveraging USWDS.

File Structure

Here are some of the major directories:

/: Things like the package.json and config files for other tools live at the root directory of the repository
specs/: Integration tests
src/: All the frontend source files live here
- actions/: Redux action creators
- components/: Underlying React components used by the views or other components. Each should have corresponding styles (where applicable), tests, etc. in the same subdirectory.
- config/formSections/: Contains the section definitions for eApp supported forms
- config/formSections/formTypes.js: Config file that defines the different form types
- config/locales/: Where any user-visible text is stored
- constants/: Contains all the enums/constants used throughout the application
- helpers/branches.js: Contains functions that define whether a subsection/question is required by a specific form type. These are primarily used by the selectors, which extract the data from Redux.
- models/: Contains all the model definitions for sections and subsections that are used for validations
- reducers/: Redux reducers
- sass/: Handful of shared SASS files
- validators/: The validation logic
- views/: Higher-level React components that correspond to different pages/routes

Use of the React Developer Tools and Redux DevTools Extension are recommended for frontend work.
With the React extension, the Redux store can be inspected by selecting the <Provider> component and running $r.store.getState() in your browser's JavaScript console.
In the development environment, you may opt in to Logger for Redux by appending ?reduxLogger=true to the url on initial load.

Whenever the dependencies list in package.json is changed, make sure the yarn.lock gets updated as well:

docker-compose run --rm js yarn

then restart the server.