nvm install 21.7.1
In project folder (/frontend):
npm installnpm run dev
Installation/Configuration
- For VSCode use i18n Ally extension
- /frontend folder has to be opened folder to apply pre-configured settings for i18n Ally
Using translation
- Import translation via
import { useTranslation } from 'react-i18next'; - Inside component declaration define translation function:
const { t } = useTranslation({NAMESPACE/S});- replace
{NAMESPACE/S}with e.g.'main'for single namespace use - replace
{NAMESPACE/S}with e.g.['main', 'admin']for multiple namespace use
- replace
- Replace hard-coded string with
t({KEY})(using only one namespace) |t('{KEY}', { ns: '{NAMESPACE}'})(using more than one namespaces)- replace
{KEY}with corresponding key defined in namespace files. - if you are using more than one namespaces in one component:
- For the first namespace inside of the array (see Point 2.2.) you don't have to add the namespace. E.g.
t('buttonOK')is enough. - If you want to use other namespace than the first, you have to add the namespace. E.g.
t('buttonOK', { ns: 'admin' })
- For the first namespace inside of the array (see Point 2.2.) you don't have to add the namespace. E.g.
- replace
- For using parametric translations, add the parameter as option (beside
ns, if used). E.g.t('userMessage', { ns: 'admin', id: userID })
Manage translations
If namespace already existing
- Go to i18n ally extension inside VS Code --> On "Tree" submenu click on + for creating a new key.
- Insert a key name.
- Insert a translation for english language.
- For parametric translations: Replace parameter with following pattern:
{{PARAMETER}}. E.g.User with ID {{id}}.- See Using translation --> Point 4 how to use parametric translations.
- Select the file you want to store the key-value.
If you want to add a new namespace
- Create one new file per language folder. Name the files like you want to name the namespace.
- Inside file
i18n.ts, import the created files and add the imports toresources.- After that continue with If namespace already existing.
npm testto run all frontend tests
- single document: in VSCode CTRL + SHIFT + P -> Format Document -> choose prettier if prompted
- whole project: while in frontend folder:
npx prettier . --write
- all TypeScript Interfaces should be commented with JSDoc
- CSS should not be directly edited but compiled from SCSS instead
- general styling that should apply to all pages and components should always be in theme.scss
Frameworks
- AG Grid: AG Grid React Docs
- react-toastify: react-toastify Docs and Playground
- i18next: react-i18next | i18next
- TinyMCE: TinyMCE self hosted | tinymce-react
Act allows you to run the pipeline locally for debugging. However due to the pipeline committing changes into the project in the current version, the local run will inevitably fail. The details for setting up and running act in this section might be of use again if this changes.
Windows
Download and Install chocolatey
- In Admin Powershell:
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))- After the install is finished log out
Download and Install act
- In Admin Powershell navigate to your project folder (/frontend):
choco install act-cli
Linux
Download and Install act
curl https://raw.githubusercontent.com/nektos/act/master/install.sh | sudo bash
Mac
Download and Install act
brew install act
In project folder (/frontend):
- Make sure Docker is running
act- Select medium
act --job 'test'to trigger the test workflow locallyact pull_requestto simulate all workflows triggered by pull request locally