-[Compile and Hot-Reload for Development](#compile-and-hot-reload-for-development)
-[Type-Check, Compile and Minify for Production](#type-check-compile-and-minify-for-production)
-[Build Documentation with TypeDoc](#build-documentation-with-typedoc)
-[Run Unit Tests with Vitest](#run-unit-tests-with-vitest)
-[Run Integration Tests with Playwright](#run-integration-tests-with-playwright)
-[Project setup](#project-setup)
-[Compile and hot-reload for development](#compile-and-hot-reload-for-development)
-[Type-Check, compile and minify for production](#type-check-compile-and-minify-for-production)
-[Build cocumentation with TypeDoc](#build-documentation-with-typedoc)
-[Run unit tests with Vitest](#run-unit-tests-with-vitest)
-[Run integration tests with Playwright](#run-integration-tests-with-playwright)
-[Lint with ESLint](#lint-with-eslint)
## Introduction
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) or the repositorys [wiki](https://git.h2t.iar.kit.edu/student-projects/pse-ss23/web-based-statecharts/fluxiofrontend/-/wikis/home) page.
The frontend is mainly written in TypeScript and uses Vue3 to create a Single Page Application (SPA). If you want more information about the project itself you should have a look inside [Fluxio's documentation](https://git.h2t.iar.kit.edu/sw/armarx/core/fluxio/documentation) or the repository's [wiki](https://git.h2t.iar.kit.edu/sw/armarx/core/fluxio/frontend/-/wikis/home) page.
@@ -82,8 +82,8 @@ The repository is mainly written in TypeScript and uses Vue to create a SPA (Sin
## As an Axii module
### Installation
1.[Install Axii](https://git.h2t.iar.kit.edu/sw/armarx/meta/axii#installation)(can be skipped if you already have axii installed)
2. Create a workspace (can be skipped if you already have a workspace that you want to install fluxiofrontend in)
1.[Install Axii](https://git.h2t.iar.kit.edu/sw/armarx/meta/axii#installation)(can be skipped if you already have Axii installed)
2. Create a workspace (can be skipped if you already have a workspace that you want to install the frontend in)
```sh
axii workspace create
```
...
...
@@ -91,8 +91,8 @@ axii workspace create
```sh
axii workspace activate <workspace_name>
```
4. Add fluxio/fluxio_frontend as a dependency
5. If needed add fluxio/fluxion_backend_mock aswell (if this is the case you can just add the fluxio module, this includes both the frontend and the backend mock)
4. Add fluxio/frontend as a dependency
5. If needed, add fluxio/backend_mock aswell (if this is the case you can just add the fluxio module, this includes both the frontend and the backend mock)
```sh
# For both
axii workspace add fluxio
...
...
@@ -124,20 +124,20 @@ Update the npm packages used:
```sh
fluxio_frontend_install
```
For more information about the backend mock and how to use it please refer to [this](https://git.h2t.iar.kit.edu/student-projects/pse-ss23/web-based-statecharts/provider-mock)
For more information about the backend mock and how to use it please look [here](https://git.h2t.iar.kit.edu/sw/armarx/core/fluxio/backend-mock)
### Troubleshooting
- If there is no backend running already you need to start the backend mock before you can use the frontend (The frontend will start without backend but you will not be able to use anything that requires a backend)
- In case the dev command is not working you can just use 'fluxio_frontend_run_server' to start the frontend (this will not use hot reload)
- In case of issues with the npm dependencies you can try to run 'fluxio_frontend_install' to update the dependencies. If this doesn't resolve the issue please contact us.
- If there is no backend running already, you need to start the backend mock before you can use the frontend (the frontend will start without the backend but you will not be able to use anything that requires it)
- In case the dev command is not working, you can use 'fluxio_frontend_run_server' to start the frontend (this will not use hot reload)
- In case of issues with the npm dependencies, you can try to run 'fluxio_frontend_install' to update the dependencies. If this doesn't resolve the issue, please contact us.
## Installation (Docker)
Fluxio Frontend 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 methods. You can ether compile them yourself or look inside the CI/CD pipeline and download the newest version of the dist/ folder.
Fluxio frontend provides a Docker file with nginx for easy deployment. If you can't or don't want to use Docker, you can provide fluxio's frontend's static files with other methods. You can either compile them yourself, or look inside the CI/CD pipeline under "Build" 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.
For this you need to have [Docker installed](https://docs.docker.com/engine/install/) and Docker.service should be running. You can check this with `docker info`, or use `docker ps` to display a list of your running Docker containers.
<details>
<summary><h4>Get Docker image</h4></summary>
...
...
@@ -148,17 +148,17 @@ First login to the Gitlabs docker registry:
[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) but one maniac development on Emacs so it works too.
### Type Support for `.vue` Imports in TS
### 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.
...
...
@@ -193,39 +193,39 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
See [Vite Configuration Reference](https://vitejs.dev/config/).
### Project Setup
### Project setup
```sh
npm install
```
#### Compile and Hot-Reload for Development
#### Compile and hot-reload for development
```sh
npm run dev
```
#### Type-Check, Compile and Minify for Production
#### Type-Check, compile and minify for production
```sh
npm run build
```
#### Build Documentation with [TypeDoc](https://typedoc.org/)
#### Build documentation with [TypeDoc](https://typedoc.org/)
```sh
npm run build:doc
```
#### Run Unit Tests with [Vitest](https://vitest.dev/)
#### Run unit tests with [Vitest](https://vitest.dev/)
```sh
npm run test:unit
```
#### Run Integration Tests with [Playwright](https://playwright.dev/)
#### Run integration tests with [Playwright](https://playwright.dev/)
Requires the [provider mock](https://git.h2t.iar.kit.edu/student-projects/pse-ss23/web-based-statecharts/provider-mock) to run.
Requires the [provider mock](https://git.h2t.iar.kit.edu/sw/armarx/core/fluxio/backend-mock) to run.
