Last modified: May 15, 2023

Application construction components - Designer Front-end

Description of the application construction components for Altinn Studio Designer Front-end

The Designer frontend consists of multiple React + Redux applications. It is split into two top-level applications:

  • dashboard
  • app-development

In additions, different functional areas will have their own applications, which are then imported into the relevant top-level application as a subapp (see https://redux.js.org/recipes/isolatingsubapps). Currently, we have the following subapps, that are used by the app-development top-level application:

  • ux-editor
  • schema-editor (data modeling)

Finally, there is a library of shared components and utils that are used accross all the applications in the Designer frontend.

High-level overview of Designer frontend applications
High-level overview of Designer frontend applications

During build of the Designer application, the top-level applications are transpiled into javascript-files and CSS, which are copied into the Designer backends wwwroot folder and hosted there. The Designer backend is a web application with views, that reference the javascript files and CSS.

NOTE: Parts of the front-end is currently built in .NET Core. This will gradually be ported over to React as we work with the different functional areas. The exception here is the static landing page, which will remain as a custom view in the .NET application.

React architecture

The front-end of Altinn Studio designer is set up using the same React + Redux architecture as the App frontend, take a look here for more details.