home.md

+Fluxio / [Exports](modules.md)
+
+# FluxioFrontend
+
+The repository is mainly written in TypeScript and uses Vue to create a SPA (Single Page Application). If you want more information about the project itself you should have a look inside [Fluxios ducumentation](https://git.h2t.iar.kit.edu/student-projects/pse-ss23/web-based-statecharts/skgui-documentation).
+
+## Instalation
+
+FluxioFrontend provides a Docker file with nginx for easy deployment. If you can't or don't want to use Docker you can provide fluxiofrontends static files with other methodes. You can ether compile them yourself or look inside the CI/CD pipeline and download the newest version of the dist/ folder.
+
+### Use Docker
+
+For this you need to have [Docker installed](https://docs.docker.com/engine/install/) and the Docker.service should be running. You can check this with `docker info` or use `docker ps` to display a list of you running Docker containers.
+
+#### Get Docker image
+
+``` sh
+git ....
+```
+
+#### Build your own Docker image
+
+You should have cloned this repository to your local machine and be inside you repositorys folder.
+
+``` sh
+docker build -t fluxiofrontend .
+```
+
+#### Run Docker image
+
+``` sh
+docker run --name fluxiofrontend --restart=always -p 8080:80 -d fluxiofrontend
+```
+
+## Development
+
+### Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+### 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 [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+ 
+### Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+### Project Setup
+
+```sh
+npm install
+```
+
+#### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+#### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+#### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+#### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```