Datahub UI

This template should help get you started developing plugins with Vue 3 in Vite.

Getting started

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

run npm i in the base directory to install all dependencies.

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

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.

ext install esbenp.prettier-vscode

Vue Language Features (Volar)

The Vue Language Features (Volar) extension brings full vue support to VSCode.

ext install vue.volar

For improved performance it is also recommended to use the "Take Over Mode" for TypeScript+Vue support: Details on how and why to enable it.

Vitest

The Vitest extension allows you to run your tests suites inline and even in watch mode in order to get live feedback for your code.

ext install ZixuanChen.vitest-explorer

ESLint

The ESLint extension highlights all eslint problems right in the editor and also allows you to fix them straight away.

ext install dbaeumer.vscode-eslint