SWISSGEO control

This is the frontend ("business portal") for the SWISSGEO control infrastructure.

Branch	Status
develop
main

• Quickstart
• Deployment
• Render mode
• Tech
  • Base Framework: nuxt
  • UI Framework: nuxt ui
  • Translations
  • Forms and validation
• Format & Linting
• Testing
  • Unit tests
  • Testing Nuxt components
  • End-to-end tests

Quickstart

Install dependencies, create environment and run service in debug mode:

make setup
make env
make serve

Open a browser at http://localhost:3000.

Some environment variables are read from aws ssm parameters. To run make env make sure to login with aws sso first. By default the environment will connect to the dev environment backend.

Deployment

This project is run without nuxt server-side-rendering as most data is not static and retrieved at run-time. There is currently also no need to SEO.

Render mode

The project is set to be prerendered as a static page. The crucial piece for this is setting the preset to static in the nitro config

Tech

Following is a quick overview of the used technology:

Base Framework: nuxt

We use nuxt as the base framework. Nuxt wraps around vue.js and provides a lot more functionality out of the box. The rendering mode is set to client-side-rendering. We don't need the nitro server functionality and instead build the application in a common SPA style.

UI Framework: nuxt ui

For the UI we use nuxt ui because of it's seamless integration with the framework. Check the components list for the available components.

Nuxt UI components are built on CSS Framework Tailwind.

Translations

To translate a string, define in the all the locale JSON's and use it with the $t in the code and/or template. For example:

{
  "messages": {
    "hello": "hello"
  }
}

<script>
const message = $t("message.hello");
</script>

<template>
  <h1 :data-message="$t('message.hello')">{{ $t("message.hello") }}</h1>
</template>

Have a look at Nuxt I18n and Vue I18n to see how to interpolate strings, formatting dates etc.

Forms and validation

We use the Nuxt UI Form component. It supports any validation library supporting Standard Schema. In this project we use valibot. Examples and usage can be found on the NUXT UI Form documentation.

Format & Linting

make format
make lint

Testing

Testing approach follows the Nuxt guide, with e2e tests using playwright and component & unit tests using vitest.

Run all tests:

make test

Unit tests

Unit tests run in a node environment. This is defined in the vitest configuration.

Run the unit tests in watch mode:

make test-unit

Testing Nuxt components

Nuxt tests run in a nuxt environment. This is defined in the vitest configuration.

Run the nuxt tests in watch mode:

make test-nuxt

End-to-end tests

To run the e2e tests, invoke

make test-e2e