OZG Frontend

The front end project for the OZG cloud.

Quickstart

Runs all the build scripts in antragsraum-client/client folder

$ npm install
$ npm run build

And start the development server:

$ npm start

Docker build ozg-frontend-client locally

(Ensure, Docker daemon is running)

cd /client/docker
$ docker compose up

Docker build ozg-frontend-docs (Styleguidist) locally

(Ensure, Docker daemon is running)

If you only need to run the docker container without all the build steps:

cd /client/docs
$ docker compose up

Run the CSS regression tests

The CSS tests run with BackstopJS. This framework compares the snapshots from a running URL against some reference images. The references are saved in **client/backstop/backstop_data/bitmaps_reference **.

At the moment we test the desktop and mobile view of the styleguidist component documentation page. So before running the CSS regression tests you need to first run the component docs:

$ npm run styleguidist

And then run the test css script:

$ npm run test:css

This will start a docker container with a headless browser. If it fails you need to check in the directory * client/backstop/backstop_data/bitmaps_test* and find in the last directory the failed diff.

If the change was intentional you can update the references with the following script:

$ npm run backstop:approve

Available NPM Scripts

In the client directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:8082 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build:typescript

Compiles the TypeScript files into JavaScript and stores the result in the build folder.

npm run build:webpack

Runs Webpack to create the deployment artefacts for the application in the /dist folder.

npm run test:unit

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run test:e2e

To open the Cypress to create and run e2e test.

npm run check

Runs all the checks

npm run check:prettier

To run prettier find format problems with your JavaScript code.

npm run check:lint

To run eslint find and fix problems with your JavaScript code.

npm run prettier:write

To run prettier to format the sources.

npm run styleguidist

To run the styleguidist component documentation server.
Open http://localhost:6060 to view the documentation.

npm run styleguidist:build

To build the styleguidist artefacts under the /styleguide folder.

npm run test:css

Runs the CSS regression tests (see bellow for more details).

npm run backstop:approve

Updates the CSS regression test references according to the last test result (see bellow for more details).

Environment configuration

There are two types of env configuration variables:

• ones set via an .env file/manually setting environment variables that are read at compile-time with fixed values afterwards (or alternatively read at startup of the Webpack dev server for development purposes). There is a whitelist in webpack.config.js that makes sure that only the specific environment variables we actually use are passed to the application. Currently defined variables are the following:

• • NODE_ENV: should be either "production", "development" or empty (which then assumes "development") to activate/deactivate features that should only be available in a dev build
• • PROJECT_NAME: set by Webpack and is shown in version info
• • PROJECT_VERSION: set by Webpack and is shown in version info
• • ANTRAGSRAUM_HOST: the base URL of the Antragsraum API if the Webpack dev server is used
• • INFO_MANAGER_HOST: the base URL of the Info Manager if the Webpack dev server is used

• ones set via an env.js file. These are environment variables that should be configurable at run time. These are the following:

• • REDIRECT_URL: The URL where the login entry point is located. For use with BayernId this should be something like '/antragsraum/saml2/authenticate/bayernid'. When using with BayernId this must match the entry in the metadata document send to Akdb. For local dev use this value must be '/antragsraum/login'.
• • LOCALE_BUTTON: if set to "true", show a button on the overview page that toggles the language between German and English (to demonstrate the currently available localisation features)

Running with a local backend

To run the frontend alongside a locally running backend, you need to set the respective env variable so that the backend can be found by the frontend:

ANTRAGSRAUM_HOST=http://localhost:8080

You need to start the backend according to the documentation in antragsraum-server. The most simple way to get a working backend with mocked data is to run the backend in standalone mode.