Altinn 3 app frontend
This is the default frontend for Altinn 3 apps developed in Altinn Studio
(visit altinn.studio or see the code repository).
This frontend is tasked with fetching layout files, components and other configuration created in Altinn Studio and
presents the UI for different steps in the workflow of an Altinn application. It is made to talk with the application
backend developed using our nuget packages, usually extended from
our application template. If you want to try out creating your own
apps in Altinn Studio, check out our documentation.
Getting started
Apps created in Altinn Studio uses the latest stable release of this frontend by default.
When testing locally, you can also
try out any of
our previous versions or pre-releases.
Alternatively, you can set up this project locally to test code not yet released,
or contribute code yourself.
There are a few ways to set up this project locally:
Docker (recommended for beginners)
You can start a local app-frontend in Docker using these commands:
```bash
git clone https://github.com/Altinn/app-frontend-react
cd app-frontend-react
# git checkout pr-branch
docker compose up
```
This solution works, but will be slow to start and does not rebuild when files change. If you just want to run the solution locally, contribute
by testing a bug fix or new feature before the official release, the Docker method will work fine. We recommend
installing `node` locally if you are considering contributing code.
Local node and Corepack
- Install the latest [Node LTS release](https://nodejs.org/en/)
- Enable [corepack](https://github.com/nodejs/corepack#default-installs) (execute `corepack enable` from a terminal after installing Node 16.9.0 or later)
- Clone the [Altinn app-frontend-react repo](https://github.com/Altinn/app-frontend-react) and navigate to the folder.
```bash
git clone https://github.com/Altinn/app-frontend-react
cd app-frontend-react
```
The development server can be started by following these steps:
1. `yarn --immutable` (only needed when `package.json` has changed)
2. `yarn start` (to start the development server)
This project is using [`yarn`](https://yarnpkg.com/) 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`.
Running your app
You need an Altinn app for testing when making changes to this codebase. You can either use your own app, or clone our
frontend-test app.
To start the app locally:
- Clone the App-LocalTest repository
- Follow the steps in the README.md documentation
- Follow our documentation on how to use the local app-frontend when running locally
Automated tests
End to end tests
End to end tests are using Cypress, see test readme for how to run these.
Unit tests
Unit tests are written using Jest and React testing library
- Execute
yarn --immutable. This step is only nescessary if you have not already done it, or when package.json changes.
- 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.
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 extensions recommended by the workspace, at least [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
WebStorm/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](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_default_formatter).
Authors
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.