Fluxio Frontend

Benedikt Engel, Julian Tusch, Yusuf Duran, Daniel Coman, Moritz Gleissner

• Introduction
  • Languages and tools
    • Main languages and framework
    • Build and other tools
    • Testing
    • Deployment
• As an Axii module
  • Installation
    • You can use the frontend with following commands:
  • Troubleshooting
• Installation (Docker)
  • Use Docker
    • Run Docker image
• Development
  • Recommended IDE setup
  • Type support for .vue imports in TS
  • Customize configuration
  • Project setup
    • Compile and hot-reload for development
    • Set up environment variables
    • Type-Check, compile and minify for production
    • Setup SSH-Tunnel
    • Build documentation with TypeDoc
    • Run unit tests with Vitest
    • Run integration tests with Playwright
    • Lint with ESLint

Introduction

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 or the repository's wiki page.

Languages and tools

Main languages and framework

Build and other tools

Testing

Deployment

As an Axii module

Installation

1. Install Axii (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)

axii workspace create

3. Activate the newly created workspace

axii workspace activate <workspace_name>

4. Add fluxio/frontend as a dependency

# For fluxio
axii workspace add fluxio/frontend

6. Upgrade your workspace

axii workspace upgrade

7. Fluxio 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"): [ options: -h | --help, -p | --port, -u | --url ]

fluxio run server

Start the frontend in a dev environment (local server with hot reload): [ options: -h | --help, -p | --port, -u | --url ]

fluxio run dev

Build the frontend for production:

fluxio build

Update the npm packages used:

fluxio install

Troubleshooting

• If there is no backend running already, you need to start the backend 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 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 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.

docker login git.h2t.iar.kit.edu:5050

docker pull git.h2t.iar.kit.edu:5050/sw/armarx/core/fluxio/frontend:latest

docker build -t fluxiofrontend .

Run docker image

docker run --name fluxiofrontend --restart=always -p 8080:80 -d fluxiofrontend

Development

Recommended IDE setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar) but one maniac develops on Emacs so it works too.

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) 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 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.

Project setup

npm install

Compile and hot-reload for development

npm run dev

Set up environment variables

1. VITE_API_BASE_URL=$URL The base url for api requests. Default is http://localhost:3300/api/v1. (replace $URL with the actual url)
2. PORT=$PORT The port specifies the port for the frontend to run on. The frontend runs on http://localhost:5173 by default. (replace $PORT with an actual port number)

Type-Check, compile and minify for production

npm run build

Setup SSH-Tunnel

ssh -L 3000:localhost:3000 -J %r@jump.h2t.iar.kit.edu $USERNAME@pc105.h2t.iar.kit.edu

replace $USERNAME with your ssh-username.

Build documentation with TypeDoc

npm run build:doc

Run unit tests with Vitest

npm run test:unit

Run integration tests with Playwright

The playwright test are discontinued.

npm run test:integration

Lint with ESLint

npm run lint