Auto-updated file in CI authored by Moritz Gleissner's avatar Moritz Gleissner
......@@ -3,11 +3,30 @@
<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
## Table of Contents
- [Introduction](#introduction)
- [Languages and Tools:](#languages-and-tools)
- [Main Languages and Framework](#main-languages-and-framework)
- [Build and other Tools](#build-and-other-tools)
- [Testing](#testing)
- [Deployment](#deployment)
- [As an Axii module](#as-an-axii-module)
- [Installation](#installation)
- [You can use the frontend with following commands:](#you-can-use-the-frontend-with-following-commands)
- [Troubleshooting](#troubleshooting)
- [Installation (Docker)](#installation-docker)
- [Use Docker](#use-docker)
- [Run Docker image](#run-docker-image)
- [Development](#development)
- [Recommended IDE Setup](#recommended-ide-setup)
- [Type Support for `.vue` Imports in TS](#type-support-for-vue-imports-in-ts)
- [Customize configuration](#customize-configuration)
- [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 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)
- [Lint with ESLint](#lint-with-eslint)
## Introduction
......@@ -61,9 +80,60 @@ The repository is mainly written in TypeScript and uses Vue to create a SPA (Sin
</a>
</p>
## Installation
## 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)
```sh
axii workspace create
```
3. Activate the newly created workspace
```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)
```sh
# For both
axii workspace add fluxio
# For fluxio_frontend only
axii workspace add fluxio/frontend
# For fluxio_backend_mock only
axii workspace add fluxio/backend_mock
```
6. Upgrade your workspace
```sh
axii workspace upgrade
```
7. Fluxio frontend (and backend mock if installed) should now be installed inside your workspace
#### You can use the frontend with following commands:
Host the website locally on a server(if asked to install dependencies, answer with "y"):
```sh
fluxio_frontend_run_server
```
Start the frontend in a dev environment (local server with hot reload):
```sh
fluxio_frontend_dev
```
Build the frontend for production:
```sh
fluxio_frontend_build
```
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)
### 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.
## 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 methodes. 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 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.
### Use Docker
......
......