Skip to content

README.md

Latest commit

 

History

History
150 lines (109 loc) · 4.69 KB

README.md

File metadata and controls

150 lines (109 loc) · 4.69 KB
Raw

Getting started as developer

Digu uses the framework Svelte and SvelteKit for developing the web application.

Do the following steps/commands depending on what you want to do:

Installation

Digu is developed with Node.js 24, the version of the app service in compose.yaml. Run the following command to install the dependencies in package-lock.json:

npm ci

Using Docker

If Node.js is not installed on your machine, you can run the npm scripts in a Docker container with compose.yaml.

  • To install the dependencies:

    docker compose run --rm app npm ci

  • To start the development server at http://127.0.0.1:5173/:

    docker compose up

  • To run any other script, pass it to docker compose run:

    docker compose run --rm app npm run vitest

  • The unit tests run in the app service as above. The test service, whose image includes Chrome, is for scripts/visual-compare, scripts/screen-check and scripts/a11y-scan.

Note: The test service uses the Puppeteer image. The scripts launch Chrome with --no-sandbox, so the service has no added capability; compose.yaml says why. Keep its image tag the same as the puppeteer version in package-lock.json.

Starting a development server

Start the development server using the following script.

npm run dev

This launches the development server and compiles the web application.

Building the application

Build the web application for deployment using the following script.

npm run build

The deploy directory is ./_build.

Testing

Execute tests using the following scripts.

  • To run all unit tests:

    npm run vitest

  • To run all unit tests with coverage:

    npm run vitest:coverage

  • To run all unit tests and display their results on the UI with coverage:

    npm run vitest:ui

Quality Checks

Perform quality checks and maintenance tasks:

  • To check the types and the Svelte components (it does not format the code): 
    npm run check
  • To watch for changes and perform checks: 
    npm run check:watch
  • To check the formatting with Prettier, then lint with ESLint. It rewrites the files where ESLint can fix a problem (eslint --fix), and it does not run ESLint when the Prettier check fails: 
    npm run lint
  • To format the code with Prettier: 
    npm run format
  • To check the code without changing it, as CI does: 
    npx prettier --check --plugin prettier-plugin-svelte .
npx eslint .
npm run lint:types
npm run check -- --fail-on-warnings

Accessing the database

If you are curious about how your settings and event logs are stored in the database, use developer tools to access and view them.

⚠ CAUTION ⚠
NEVER EDIT THE VALUES ON THE DATABASE with developer tools. It could cause Digu to stop working.

The Steps:

  1. Open the app
    Open Digu.

  2. Open developer tools
    Press following keys to open developer tools:

    OS Pressing Keys
    Windows/Linux Ctrl + Shift + i
    macOS Cmd + Option + i

  3. Select the tab that displays IndexedDB

    Browser Tab Name
    Chrome/Edge Application
    Firefox Storage

  4. Access IndexedDB
    Look for Storage in the left panel, and click it to expand. Then you can see the database for Digu.
    All database names for Digu begin with Digu_.