This template is already configured for:
CODING
✅ i18n => i18next
✅ Data fetching and caching => RTK Query
✅ API mocking => msw
STATIC ANALYSIS
✅ code linting => ESLint
✅ style linting => Stylelint
✅ code and style formatting => Prettier
TESTING
✅ unit testing + code coverage => Vitest
✅ E2E testing + code coverage => Playwright
TOOLING
✅ package handling => pnpm
✅ project building => Vite
✅ Git hooks handling => Husky
# Installs the package manager
npm install -g pnpm
Before installing the dependencies, authentication must be set up in order to install the UI Library.
At the end of the process you will have a file similar to the following in your personal directory.
; begin auth token
//pkgs.dev.azure.com/soluzionetasse/_packaging/xriba-clients/npm/registry/:username=[your-email]
//pkgs.dev.azure.com/soluzionetasse/_packaging/xriba-clients/npm/registry/:_password=[your-base64-password]
//pkgs.dev.azure.com/soluzionetasse/_packaging/xriba-clients/npm/registry/:email=[your-email]
//pkgs.dev.azure.com/soluzionetasse/_packaging/xriba-clients/npm/:username=[your-email]
//pkgs.dev.azure.com/soluzionetasse/_packaging/xriba-clients/npm/:_password=[your-base64-password]
//pkgs.dev.azure.com/soluzionetasse/_packaging/xriba-clients/npm/:email=[your-email]
; end auth token
After doing authentication you can clone the project and install the dependencies.
# Clones the project
git clone git@github.com:Xriba/fe-template.git
# Installs the dependencies, included the UI Library
pnpm i
In the root of the project, create a file named .dev.env
with this content:
# URLS
APP_URL=http://localhost:3000
SERVER_URL=http://localhost:4000
# COVERAGE
SOURCE_ROOT="absolute path of the project root"
COVERAGE_FOLDER=./coverage
# Runs the app in development mode
pnpm run dev
Configuration settings are in the vite.config.ts
and the
vitest.setup.ts
files.
# Runs unit tests
pnpm run test
# Runs unit tests with code coverage
pnpm run coverage
Configuration settings are in the playwright.config.ts
file.
# Runs E2E tests with code coverage
pnpm run e2e
# Builds the project
pnpm run build:ci
In the src
folder we can find the following sub-folders:
components
: components shared in different parts of the appfeatures
: the structure of the pages, it has three sub-folders:layout
: page template filespages
: page files and foldersrouter
: routing files
mapping
: files for mapping API responses to internal objectsmocks
: API mocking filesservices
:i18n
configuration filesAPI client
configuration files
store
: redux store configuration filetypes
: TypeScript type definitions file