- To run or build the frontend, you'll need to download Node minimum v21 .
- Enable corepack on your machine and download yarn via corepack (don't download yarn globally, it will give you problems at some later point). Follow this guide to download yarn.
Access management has a lot of dependencies, which can get tedious to work with when developing locally. If all you are working with is frontend-specific code (that is, the code found in this repo) then this hybrid solution will simplify your setup, allowing you to run the React application and the BFF (Backend For Frontend) locally, while using the access management backend and other dependencies that are deployed in an AT-environment.
However, it has an additional prerequisit as it will require you to log into your IDE (ex: Visual Studio) with a user that has access to the Keyvault used by test environment AT22.
To get these accesses on your ai-dev user, you need to be part of the following Azure team:
- Altinn-30-Authorization-Test-Developers
Make sure you have the neccecary accesses before proceeding with this setup alternative.
In order to integrate the local code with AT22 in the most seamless way, using the login method, test data, and sdomain-specific tokens, we need to tell the computer when to divert from the the actual AT environment and instead use the localhoast port where our local BFF will be running from.
You can do this by adding following to the host file on your computer:
# Subdomain for accessmanagement
127.0.0.1 am.ui.at22.altinn.cloud
You can find this file in /private/etc/hosts on mac or in c:\Windows\System32\Drivers\etc\hosts on Windows
Remeber to save the host file before proceeding. You might need to flush the dns and clear all cashe in your browser for this change to be set into effect.
Windows:
ipconfig /flushdns
OBS: Note that overwriting this path in the host file will make you unable to reach the true path from your computer, meaning you will not be able to use AT22 to test the currently deployed version of the frontend code. You will still be able to access the other AT environments.
Open Altinn.AccessManagement.UI.sln in Visual Studio (or another IDE).
- In Visual Studio, log in with your ai-dev email (the user that has the necessary accesses)
- Locate the Launch button
- Switch launch settings to the one named LocalDev (If not already chosen)
- Start the application by pressing the Launch button
A browser window will open on the BFFs swagger documentation, this means the launch was successfull.
OBS: These settings use https which requires a certificate to be uploaded or generated by your IDE (the latter is the easiest solution). This might make your browser flag the site as a possible risk the first time you attempt to navigate to it, but it will not stop you from accessing it.
Now that the BFF is running, you can move on to the react app.
Pull the newest version of this repo and navigate to its root
- Run
yarn
to install all neccecary dependencies - Run
yarn start
to run the application
That's it!
- Open you browser and go to https://info.at22.altinn.cloud/
- Log in using the regular Altinn login (with TestID)
You can now access the regular altinn features enabled in the environment. Once you navigate into a domain that belongs to this repo (am.ui.at22.altinn.cloud), the local code will run instead of the deployed code of this environment.
Happy coding!
The frontend is the simplest, so let's start with that.
Simply run yarn
on root to install dependencies and then yarn start
to start the development environment.
That's it!
PS: To actually see anything on the local environment port you'll need to follow the guide until step 3.
To add test data to the app, do the following:
- Clone following repo and checkout branch feature/accessmanagement-subdomain and pull latest changes. Also remember to follow readme in that branch (Because localtest for podman doesn't work yet). You have completed this step when you can run localtest.
- Sometimes the docker command isn't recognized on computer, if so try to run this command:
export PATH="$PATH:/Applications/Docker.app/Contents/Resources/bin/"
-
Start the loadbalancer container that routes between the local platform services and the app with command below:
docker-compose up -d --build
-
If having problems with docker command try running this: export PATH="$PATH:/Applications/Docker.app/Contents/Resources/bin/"
-
Navigate to the
src
folder in the app-localtest repocd src/
-
Run below command in that folder
docker-compose up -d --build
-
Set path to app folder in local platform services. The simplest way to do this is:
- Edit the appsettings.json file:
- Open
appSettings.json
in an editor. - Change the setting
"AppRepsitoryBasePath"
to the path to the folder where you've cloned your frontend and backend repos. (Be aware that on mac you don't have c:/ in your paths.) - Create folder AltinnPlatformLocal wherever you like, copy and paste path to that folder in LocalTestingStorageBasePath.
- Set LocalTestingStaticTestDataPath to your full path to the file in src/testdata
- Open
- Edit the appsettings.json file:
-
Start the local platform services (make sure you are in the src folder)
dotnet run
-
Add below text to your hosts file (Path to file on mac: /private/etc/hosts. Path to file on Windows: c:\Windows\System32\Drivers\etc\hosts. On mac you need to edit and save hosts-file, we recommend to use vs code for mac to edit the file)
#Subdomain for accessmanagement
127.0.0.1 am.ui.local.altinn.cloud #ipv4
0000:0000:0000:0000:0000:0000:0000:0001 am.ui.local.altinn.cloud #ipv6
#
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost #ipv4
0000:0000:0000:0000:0000:0000:0000:0001 localhost #ipv6
255.255.255.255 broadcasthost
127.0.0.1 kubernetes.docker.internal #ipv4
0000:0000:0000:0000:0000:0000:0000:0001 kubernetes.docker.internal #ipv6
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section
- Open Altinn.AccessManagement.UI.sln in an IDE
- Build solution
- Run solution
- Go to http://local.altinn.cloud/
- Select user and continue
- To see single rights feature, go to url: http://am.ui.local.altinn.cloud/accessmanagement/ui/delegate-single-rights/choose-service
- Paths to other parts of the application can be found on: src/routes/paths
Download PostgreSQL v14. (on Mac, use installer and not homebrew). Run stackbuilder and download all packages when being prompted.
- Open pgAdmin 4
- Create the following users by right clicking PostgreSQL 14 and clicking create user group or by scrolling down and right clickking Login/Group Roles (with privileges for authorizationdb):
- Name: platform_authorization_admin (superuser, canlogin). Set password as Password.
- Name: platform_authorization (canlogin). Set password as Password.
- Create database with name: authorizationdb by right clicking on databases and choosing "Create database" and set owner to platform_authorization_admin in properties.
- Create schema delegation in authorizationdb
- Set platform_authorization_admin as owner
-
Open Altinn-Access-Management repo in an IDE or go to following folder
cd src/Altinn.AccessManagement
-
ON MAC: change WorkspacePath in file: src/Altinn.AccessManagement/appsettings.Development.json to "Altinn.AccessManagement.Persistence/Migration".
-
Start Access Management Backend by pressing run in the IDE (Altinn.AccessManagement) or by running the following in a console
dotnet run
-
Start the BFF (AccessManagement.UI) by pressing run (http) in the IDE or by running the following in a console
dotnet run
-
Start Access Management Frontend (if not started)
- Go to access-management-frontend repo
- Run
yarn
- run
yarn start
You should now see localtest login page with access management as the only application.
Choose an account and click on the button to proceed to react-app
To create a distributable bundle, run yarn build
. Environment variables set at build time will be baked into the bundle (e.g. VITE_DEFAULT_LOCALE=en yarn build
). See the resulting dist/index.html
. If the bundled files are to be served from a path other than the server root, you must pass the --base=/path/to/folder/
argument to yarn build
.
pr-labeler action is triggered for each pull request. Based on the branch name, this action adds a label to the pull request. The configuration for the labels can be found here.
The application has a release every wednesday. scheduled-release action is triggered every wednesday 00.00. This action drafts a release, tags the latest package with the release version, f.ex this package has a release version v2023.1. The action drafts the release on different categories. The changes are categorized based on the pull request label. F.ex, A PR with a label bugfix is categorized under bug. The detailed release draft configuration can be found here The deploy in charge for the week, deploys the application to a specific environment(TT02/Prod) using the action deploy-to-environment. The drafted release is then reviewed manually and published by the deploy in charge.
Run yarn
to setup code.
Run yarn build
to create a build file.
Run yarn test
to run cypress tests in browser.
Run yarn coverage
to see test coverage stats.
Run yarn lint
to run lint checks
Run yarn format
to format most of the codebase to set standard in config file
The main entry point is /src/main.jsx
. You'll find React components under /src/components/
.
The components can be placed 2 ways, either:
If the component's only reusable within a specific feature
features\
featureName\
components\
- ComponentName.test.tsx (unit tests)
- index.ts (public interface for the component)
- style.css (if needed)
Or:
If the components are reusable and being used by other classes
components/
ComponentName/
- ComponentName.tsx
- ComponentName.test.tsx (unit tests)
- style.css (if needed)
Start with these names for your branch depending on what your branch includes.
- bugfix/
- chore/
- dependencies/
- documentation/
- feat/single-rights/issue-number
- feat/api-delegations/issue-number
- feat/general/issue-number (When it's not related to any features of the features above or relates to both)
Use PascalCase for component file names.
We use eslint, prettier, typescript, and automatically set up git hooks to enforce these on commits. To avoid confusion, it is recommended to set this up in your IDE.
Install the eslint extension from the marketplace. Configure your IDE to run eslint --fix
on save (prettier will also reformat your code when doing this).
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.
We use standard camelCase for classnames to enable linking of the stylesheets directly and improving simplicity in the process. We separate each Element and Modifier into separate names and use regular css (eks: .accordion.open
) to access the combination.
- Sometimes it's needed to restart eslint for it to work properly. E.g. When switching branches, eslint hangs sometimes. To fix this problem in vs code: Do the hot key for workbench.action.quickNaviagtePreviousInFilePicker and run command 'restart eslint server' or restart vs code.
- It's a common problem when writing reducers in rtk; invalid typescript-errors, prettier and lint-errors occurs. To fix this you could try to restart vs code or ignore the error.