Arkindex Frontend

Dev Setup

1. Install Node.js 12 or later and NPM
2. Clone the repository
3. npm install

Common operations

• npm run build: Build for development, no Docker image

• npm start: Start a local development server on localhost:8080

• npm run production: Build for production, no Docker image

• npm run lint: Perform ESLint checks

• npm run lintfix: Perform ESLint checks and try to automatically fix some issues

• npm run test: Run unit tests

• npm run start-test: Run unit tests, then watch for edits and re-run with each change

• make build: Build to a local Docker image using latest GitLab CI artifact

• make clean: Clean build stuff

• make all: Clean and build

Linting rules

See the .eslintrc.yml file for the exact ESLint settings. The linting rules are based on the following sets:

• StandardJS
• ESLint Recommended
• Vue.js Essential + Strongly Recommended
• eslint-plugin-import

Some rules have been customized:

• Using == and != in templates will show warnings — use === and !== instead (vue/eqeqeq);
• Using this in a template causes errors — use text instead of this.text (vue/this-in-template);
• Single-line HTML elements are allowed to hold content (<h1>hello</h1> is allowed);
• To bind JavaScript expressions to attributes, use :property="", not v-bind:property="", but to bind JavaScript expressions to events, use v-on:event="", not @event="" (vue/v-bind-style, vue/v-on-style)
• Single-line HTML elements can have up to three attributes ; you have to switch to multiline elements with one attribute per line above that (vue/max-attributes-per-line)
• Void elements (HTML elements which do not hold content, like br) should be self-closing — <br /> instead of <br> (vue/html-self-closing)
• HTML elements that can hold content like p should never be self-closing — <p></p> instead of <p /> (vue/html-self-closing)
• StandardJS-like linting is now applied on all JS code inside <template> (linting was only done on the HTML, not the JS bits)
• Component names must match their file names (vue/match-component-file-name)
• Component names must use PascalCase (vue/component-definition-name-casing and vue/component-name-in-template-casing)
• Components cannot be named after existing HTML or SVG tags (vue/no-reserved-component-names)
• The slot, scope and slot-scope attributes are deprecated since Vue.js 2.6.0+ and linting rules forbid them (vue/no-deprecated-scope-attribute, vue/no-deprecated-slot-attribute, vue/no-deprecated-slot-scope-attribute)
• Use the long form v-slot:default="..." instead of #default="..." to be more explicit (vue/v-slot-style)
• Static style attributes that can be replaced by CSS classes are forbidden—use CSS classes instead (vue/no-static-inline-styles)
• <template>, <script> and <style> must be separated by an empty line (vue/padding-line-between-blocks)
• Function calls without arguments must not use parentheses: v-on:click="something" instead of v-on:click="something()" (vue/v-on-function-call)