netvs-core

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

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

pnpm test:unit

Run End-to-End Tests with Nightwatch

# When using CI, the project must be built first.
pnpm build

# Runs the end-to-end tests
pnpm test:e2e
# Runs the tests only on Chrome
pnpm test:e2e --env chrome
# Runs the tests of a specific file
pnpm test:e2e tests/e2e/example.ts
# Runs the tests in debug mode
pnpm test:e2e --debug

Environment setup with Jetbrains gateway

To set up a remote development environment using Jetbrains webstorm and gateway, perform the following steps:

gateway and connection setup

• clone the repository to a folder of your choice on the remote, and checkout the nextvs branch
• install Jetbrains gateway on the client machine
• start gateway. In the SSH tab, click on the dropdown next to "New Project", and select "connect to Host".
• enter your username and the address of the remote. These should be "root" and "dev-(your-name)-1.net.scc.kit.edu".
• in the next window, select the directory you cloned Netvs into as the project directory and webstorm as the IDE, and confirm.

You should now see the connection in the list of available SSH connections. Clicking it will open webstorm on the remote.

dev container and run config setup

• after launching webstorm, right-click netvs-core/.devcontainer/devcontainer.json in the file browser, and select Dev Containers -> Create Dev Container and Clone Sources.
• To use the newly built dev container, open the IDE settings, and navigate to Languages & Frameworks -> Node.js. Change the Node Interpreter setting to docker://netvs-dev:latest/node.
• click on the dropdown of the current run config, and select "Edit Configurations".
• Add a new configuration using the npm template. Switch the command to "install"
• Add a second npm configuration. Switch the command to "run" and the script to "dev-host".
• Open the docker container settings of the dev-host run configuration by clicking the folder icon. In the popup, add a new port binding that maps container port 8080 to host port 8080 on host IP 0.0.0.0

These changes will let you run the project in the provided dev container, while letting you display the website on the client through the forwarded port.

running and testing

• To install the required npm dependencies, run the install configuration once.
• Afterwards, you can run and host the project by running the dev-host config.
• Open http://localhost:8080 in a browser of your choice to access the netvs website, including realtime updates after code changes.

If you are unable to open the website because the host is unreachable or the connection resets, this is likely due to incorrect port forwarding settings. In that case:

• Click on the name of the remote in the top left corner of the IDE to open the Backend Status panel. Under "Ports", you should see port 8080 being forwarded from the remote to the host. If that is not the case, double check the docker settings in the dev-host configuration. Do NOT manually add the port forwarding rule in the Backend Status panel, as this will make gateway attempt to forward the same port several times.
• Restart the IDE and its service on the remote.

If you are unable to launch the dev-host configuration with a "port already in use" or similar error:

• Ensure that in the dev-host configuration, under "Browser / Live Edit", the "Open Browser after Launch" option is NOT enabled.
• Manually check for any old instances of the dev container running on the remote, and terminate them as necessary.

addons

Most of the QoL features that require addons in Visual Studio Code, such as automatic closing of tags, are already enabled by default in WebStorm. However, there are still a few additional setup steps that should be taken for a smooth experience:

• install the Unocss plugin on the host machine for proper syntax highlighting, color previews etc. when using Unocss
• install the Easy I18n plugin on the client machine for easier management of translations from a dedicated window.
• Under Settings > Langages & Frameworks > Code Quality Tools > ESLint, enable "run eslint --fix on save".