User Interfaces

The GDS user interfaces that power our user and administrative web applications are built and deployed using React and webpack. Because webpack compiles the app into a bundle of HTML, JavaScript, and CSS – any configuration must be available at build time (e.g. when containers are compiled). This makes configuring our React apps and user interfaces slightly more complicated.

Right now, we use a continuous integration and deployment service to build our containers (e.g. GitHub Actions). During the container build process, environment variables are injected into the container via build args, which are in turn processed by the node build script. All environment variables and build args must be prefixed by REACT_APP_.

Note that front-end applications should not have any secret configurations. There are, however, sensitive configurations (such as Google Analytics tags, Sentry DSNs, etc.). Any sensitive configurations should be stored securely (e.g. using GitHub Secrets).

GDS User UI

The build arguments for the GDS User Interface (vaspdirectory.net) are as follows:

EnvVarTypeDefaultDescription
REACT_APP_TRISA_BASE_URLstringThe base URL of the BFF API endpoint, e.g. https://bff.vaspdirectory.net/v1/.
REACT_APP_VERSION_NUMBERstringThe semvar build version of the app (usually parsed from the git tag).
REACT_APP_GIT_REVISIONstringThe seven-digit prefix of the git hash of the commit being built.
REACT_APP_ANALYTICS_IDstringThe Google Analytics tag (e.g. G-XXXXXXXXXX).
REACT_APP_SENTRY_DSNstringThe DSN for configuring React to send errors to Sentry.
REACT_APP_SENTRY_ENVIRONMENTstring$NODE_ENVThe environment for Sentry logging (not required except for staging or development).

The GDS User Interface uses Auth0 for authentication. Front-end Auth0 configuration is as follows:

EnvVarTypeDefaultDescription
REACT_APP_AUTH0_DOMAINstringThe domain (or custom domain) to connect to Auth0 on (e.g. auth.vaspdirectory.net).
REACT_APP_AUTH0_CLIENT_IDstringThe ClientID of the Auth0 app as configured in the Auth0 dashboard.
REACT_APP_AUTH0_REDIRECT_URIstringThe callback URI for the application to receive Auth0 redirects after authentication.
REACT_APP_AUTH0_SCOPEstringThe required Auth0 scope (usually ‘openid profile email’)
REACT_APP_AUTH0_AUDIENCEstringThe audience of the tokens, usually the ID of the API (e.g. https://bff.vaspdirectory.net)

GDS Admin UI

The build arguments for the GDS Admin UI (admin.vaspdirectory.net and admin.trisatest.net) are as follows:

EnvVarTypeDefaultDescription
REACT_APP_GDS_API_ENDPOINTstringThe base URL of the Admin API endpoint, e.g. https://api.admin.vaspdirectory.net/v2.
REACT_APP_GDS_IS_TESTNETboolfalseTrue if the Admin UI is managing the TestNet, false if MainNet.
REACT_APP_VERSION_NUMBERstringThe semvar build version of the app (usually parsed from the git tag).
REACT_APP_GOOGLE_CLIENT_IDstringThe Google Client ID for Google OAuth2 authentication.
REACT_APP_GIT_REVISIONstringThe seven-digit prefix of the git hash of the commit being built.
REACT_APP_ANALYTICS_IDstringThe Google Analytics tag (e.g. G-XXXXXXXXXX).
REACT_APP_SENTRY_DSNstringThe DSN for configuring React to send errors to Sentry.
REACT_APP_SENTRY_ENVIRONMENTstring$NODE_ENVThe environment for Sentry logging (not required except for staging or development).