omni/frontend

Omni frontend

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Project Setup

npm install

Run dev server

npm run serve

Customizing the dev server

The dev server can be configured with a .env file in the frontend root.

If you want to enable the Vue dev tools

ENABLE_DEVTOOLS=true

If you want to configure server.allowedHosts to access the dev server from a host that is not localhost or *.localhost

__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS="my.custom.omni"

Run Storybook

The latest storybook from main will always be available at https://main--68d664245076e2bb623d98f3.chromatic.com/. To run storybook locally, you can use the command:

Warning

Vue dev tools are not compatible with storybook, so remember to disable them before trying to run storybook if you use them. See the relevant issue.

npm run storybook

If you want to publish to storybook's chromatic service manually you may use do so with the following command but it requires the CHROMATIC_PROJECT_TOKEN environment variable to be set to our project's token.

npm run chromatic

Type-Check, Compile and Minify for Production

npm run build

Type-Check

npm run tsc

Run Unit Tests with Vitest

npm run test

Run E2E Tests with Playwright

The E2E tests depend on environment variables to function. Create a .env file in the frontend root and add at least these three:

AUTH_USERNAME=test-user@siderolabs.com
AUTH_PASSWORD=123
BASE_URL=https://omni.local/

• AUTH_* should be a username/password that already exists in your auth0 configuration
• BASE_URL should point to the omni instance under test

Note that omnictl related tests may fail if the config downloaded from omni has a different user or URL than the ones configured your environment variables. Make sure these are correctly in sync with in your docker-compose.override.yml.

Tests can then be run with the test:e2e script.

npm run test:e2e

The tests can also be run inside a docker container. Use -v to mount the report and results directories if you want to inspect them, but it is not required for the tests to run.

docker buildx build --load . -t e2etest
docker run --rm \
  --env-file .env \
  -v ./playwright-report:/tmp/test/playwright-report \
  -v ./test-results:/tmp/test/test-results \
  --network=host \
  e2etest

Lint with ESLint and Prettier

npm run lint

Attempt to automatically fix lint issues where possible

npm run lint:fix