Varakh
51eaa38a8f
All checks were successful
/ build (push) Successful in 5m28s
Reviewed-on: #51 Co-authored-by: Varakh <varakh@varakh.de> Co-committed-by: Varakh <varakh@varakh.de> |
||
---|---|---|
.. | ||
ci | ||
public | ||
src | ||
.env | ||
.env.development | ||
.gitattributes | ||
.gitignore | ||
.npmrc | ||
.nvmrc | ||
.prettierignore | ||
.prettierrc | ||
.stylelintrc | ||
eslint.config.js | ||
index.html | ||
package.json | ||
pnpm-lock.yaml | ||
README.md | ||
tsconfig.json | ||
vite-env.d.ts | ||
vite.config.ts |
README
Frontend for upda.
Configuration
- During development:
.env.development
- Production derives the values from their main GoLang application, some environment variables are coupled with their
backend one, some are exposed via
WEB_*
, but internally mapped toVITE_
in theapp.go
file
Development & contribution
Contributions are very welcome!
Prerequisites
It's probably worth checking out a node environment manager like nvm manager.
Required node and npm versions are outlined in the package.json
in the "engines"
section.
The application uses pnpm
. Make sure to install it. For this you can use your global npm installation and invoke
npm install --global pnpm@^9
or have it as system package.
Setup instructions
Run pnpm install
which should install all dependencies.
Start
Use the pnpm start
command to start the development setup. Backend should be running.
Translation files
Pipeline checks for existing i18n keys, if you need to manually sync any language file, run pnpm i18n-sync
.
New translation languages
Adapt package.json
and add the respective key to i18n-sync
and checkstyle:i18n
for the --languages
argument,
e.g. --languages en,new
.
Run pnpm i18n-sync
to create and sync new language
Adapt languages.ts
enum Languages {
// ...
NEW = 'new'
}
Adapt locales.ts
enum Locales {
// ...
NEW = 'new-NEW'
}
Adapt LocaleProvider.tsx
to detect the new language, assign proper momentjs locale.
// add import for Ant Design
import new_NEW from 'antd/lib/locale/new_NEW';
// add import for moment
// @ts-ignore
import new_localization from 'moment/dist/locale/new.js';
// getLocaleFromLanguage
if (LANGUAGES.NEW === language) {
// ...
}
// getLanguageFromLocale
if (LANGUAGES.NEW === language) {
// ...
}
// setLocales (uses import of moment)
// ...
else if (Languages.NEW === language) {
// use import for Ant Design
setAntLocale(new_NEW);
// use import for moment
moment.updateLocale(language, de_localization);
}
Adapt i18n/index.ts
and import new language and make i18n detect it (locales are derived from it)
import newTranslation from './translations/new.json';
const resources = {
//...
new: {
...newTranslation
}
};
Dependencies
To track unused dependencies
# install (if not yet present)
npm install --global depcheck typescript
# run
depcheck
To manage (outdated) dependencies, pnpm
helps:
# shows outdated dependencies
pnpm outdated
# upgrades to latest in range definition of package.json
pnpm up
# upgrades to latest available, this includes major upgrades
pnpm up --latest