@actindo/setting NPM

Settings plugin UI

Getting started

Have NodeJS and NPM installed on your machine and clone this repository.

Run in the base directory to install all dependencies.

npm i

Install husky (handles pre-commit hooks)

npm run husky:install

dev server

This will create a local webserver with hot module reload support

npm run dev

In case you need a secure browser context for certain tasks, check the readme.me in the containers/ folder.

build

This will build the entire project into the dist folder.

npm run build

preview the build

Even though the build outputs plain html/js/css, you can't simply open the index.html in the browser from the file system to preview the project since it uses absolute paths to reference all assets.

This command will start a local webserver serving the built project (unlike the dev server which is NOT bundled for production)

npm run preview

testing

You can either run all tests once by running

npm run test

or you can run all tests and the continue to perform all tests on further file changes:

npm run test:watch

To generate a coverage report, issue this command

npm run test:coverage

Externally defined components

To make the components available for download and external use, it is necessary:

in the external-lib.vite.config.ts file
- in the build.lib.entry section, add the path to the components
- the path to the build results is determined by the LIB_FOLDER constant (dist-components by default )
build them vite build -c external-lib.vite.config.ts
deploy build artifacts

To use externally defined component

import { getExternalComponent } from "@actindo/core-ui";

const AComponent = getExternalComponent({
  name: "component-name",
  url: "https://.../component.mjs",
});

IDE setup

The recommended IDE for this project is Visual Studio Code.

Plugins

The following VSCode plugins are recommended for a better developer experience - they are also in the list of recommended plugins of this project, so your VSCode should offer you to install them automatically.

Prettier - Code formatter

The Prettier - Code formatter extension teaches the ide the prettier code style and lets you automatically format the code to our configured standards.