Getting started

Get started working with the frontend

The frontend is made up of several React applications. Each application covers a functional area.

Structure

The applications are grouped by the 3 solutions:

Each frontend runs within a .NET web application, where the transpiled javascript & CSS are referenced.

For Altinn Studio Designer and Altinn.Platform.Receipt, these files are deployed as part of the application itself.
For Altinn.Apps frontend, these files are hosted on a CDN, and loaded in at runtime.

All of the frontend apps are set up with the same overall React + Redux architecture:

Component: The react component
Props: Define how the component should render
Store: Contains all global state data used by the components
Action: Triggered when a component updates
Reducer: Listens to actions and updates the store according to which action is triggered
Redux-Saga: Middleware. Intercepts the action before it reaches the reducer, in order to process data before it goes to the store. Useful for handling async operations like calling APIs.

Details of the architecture for app frontend can be found here.

Details of the architecture for Altinn Studio Designer frontend can be found here