Phoenix Participate

The frontend system for customer access to the phoenix web system

Getting it up

Private NPM Registry

For yarn install to work, you will need to supply the .env file with a gitlab api token into the variable GITLAB_NPM_AUTH_TOKEN. See the .env-sample file

On mac, use the command export $(grep -v '^#' .env | xargs -0) to export all the variables in the .env file.

Local Development

Local development requires Node.js.

notice: copy the file .env-sample and rename it to .env. It provides the environment variables required, such as the base url for API-calls. See "Building and environment variables" below.

• To start the development server simply execute yarn start.

Build and Deployment

TODO

Building and Environment Variables

The building process uses a set of environment variables (f.ex. the API base-url). Webpack uses the dotenv-webpack plugin, and the process works as follows:

1. Variables defined in an optional .env file in root is loaded into the global process.env object. .env files are intended for running and building locally.
2. Environment variables from the executing system/CLI session is loaded into the same global object. Names from the executing system/CLI session are prioritzed over the .env file.
3. References to process.env.{NAME} in the source code is substituted with the environment variable values at build time.

Tech

General

• React / react-dom – only using functional components and hooks
• Typescript
• styled-components

Routing

• react-router-dom
• history

Forms

• React Hook Form
• yup

QA

Linting and Code Formatting

• Eslint, with plugins for the following (see .eslintrc.json for details):
  • TypeScript
  • React and React Hooks
  • JSX a11y
• Prettier
• lint-staged

Git Hooks

• Husky
  • pre-commit: lint-staged
  • pre-push: linting and testing