Altinn 3 app frontend

React SPA used by applications developed in altinn-studio. The application consists of several different features, and is responsible for presenting the UI for different steps in the workflow of an Altinn application, and interacting with the altinn app-template.

Prerequisites

Docker

If you can't/won't install node on your computer, you can also run frontend in docker using the command.

git clone https://github.com/Altinn/app-frontend-react
cd app-frontend-react
# git checkout pr-branch
docker compose up

This is really slow to start and rebuild, but sometimes better than getting someone to install node if you just want to test if a new branch fixes an issue.

Node and Corepack

• Latest Node LTS release
• Enable corepack (execute corepack enable from a terminal after installing Node 16.9.0 or later)

This project is using yarn instead of the default npm CLI. This means that you should execute package.json scripts with yarn instead of npm. F.ex instead of npm run test you should execute yarn run test. With yarn, the run keyword is optional, so you can also execute yarn test.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installing

Clone the Altinn app-frontend-react repo and navigate to the folder.

git clone https://github.com/Altinn/app-frontend-react
cd app-frontend-react

The development server can be started by following these steps:

• Navigate to ./src/altinn-app-frontend
• yarn --immutable (only needed when package.json has changed)
• yarn start (to start the development server)

Developing app-frontend

You need an Altinn app to effectively make changes to the app-frontend codebase.

Localtest now includes a way to avoid editing your app to use different frontends see docs

If you want to test in tt02 or other places, you need to make some changes to views/Home/Index.cshtml in the app repo you are using:

<link
  rel="stylesheet"
  type="text/css"
  href="https://altinncdn.no/toolkits/altinn-app-frontend/3/altinn-app-frontend.css"
/>
...
<script src="https://altinncdn.no/toolkits/altinn-app-frontend/3/altinn-app-frontend.js"></script>

to

<link
  rel="stylesheet"
  type="text/css"
  href="http://localhost:8080/altinn-app-frontend.css"
/>
...
<script src="http://localhost:8080/altinn-app-frontend.js"></script>

This will make the browser request the files from the local development server.

In addition, you need to serve the app from somewhere. There are two ways of doing this, either deploy the application via Altinn Studio, or run the app locally on your machine.

Using applications that are deployed via Altinn Studio

After you make the changes to the views/Home/Index.cshtml file as mentioned above, you need to deploy the application. When accessing the application, it should now be using the app-frontend code that is served from http://localhost:8080.

Using apps running locally on your machine

If you prefer to run the application locally (useful if you also want to make rapid changes to the application itself), you also need to clone Altinn Studio repository, and follow the steps in the LOCALAPP.md documentation.

Code style

We use eslint and prettier, and automatically set up git hooks to enforce these on commits. To avoid confusion, it is recommended to set this up your IDE.

Visual Studio Code

Install the eslint extension from the marketplace.

WebStorm and IntelliJ IDEA

Configure your IDE to run eslint --fix on save (prettier will also reformat your code when doing this). It is also recommended to set up Prettier as the default formatter.

Running tests

End to end tests

End to end tests are using Cypress, see test readme for how to run these.

Unit tests and lint rules

Unit tests are written using Jest and React testing library. Lint rules are defined with eslint.

Lint checks

1. Navigate to the folder ./src.
2. Execute yarn --immutable. This step is only nescessary if you have not already done it, or when package.json changes.
3. Execute yarn run lint.

Unit tests

1. Navigate to the folder ./src.
2. Execute yarn --immutable. This step is only nescessary if you have not already done it, or when package.json changes.
3. Execute yarn run test.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

• Altinn Studio development team - If you want to get in touch, just create a new issue.

See also the list of contributors who participated in this project.

License

This project is licensed under the 3-Clause BSD License - see the LICENSE.md file for details.