Getting Started

Note

Everything that follows expects you to be in app/frontend/ and that you have a working installation of NodeJS/npm v24. If you dont have that check out the official documentation

First, if you haven’t already, install all dependencies:

npm i

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.\ Open http://localhost:5173 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

npm run test

This calls vitest, our testing frame work.

For more information see [[#Testing]] below

This only works for non-components tests (e.g. functions)

npm run coverage

This is short for:

npx vitetest run --coverage --run

--coverage shows a coverage report at the end while --run cancels the test when it is done as vitests watches for file changes by default (which is probably bad for CI/CD)

This only works for non-components tests (e.g. functions)

npm run test:browser

This is short for:

vitest --config=vitest.browser.config.ts --run --coverage

This is used for Component-Testing

npm run build

Builds the app for production to the dist/ folder.\ It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\ Your app is ready to be deployed!

serve

You probably also want to serve the App you just build. For this you can just run:

npm i -g serve # to install serve
serve -s dist

npm run lint

This calls eslint on the project.

npm run preview

This starts a local web server that serves the build results from dist/

Testing

vitest can run function tests like normal. It gets a bit more difficult if you want to test components. It needs browser mode for this. This is all setup but vitest might need to install some things when run for the first time.

When testing components in browser mode you can run it headless (default (for CI)) or with a GUI if you want to see what the tests are doing when developing. Just set headless: false in vitest.browser.config.ts

So for normal functions just run:

npm run test
# or
npm run coverage # for coverage report

For testing everything (including graphical components) run:

npm run test:browser # starts browser headless (in background) and creates coverage report

Coverage Reports are saved in ./coverage/.

Learn More

You can learn more about vite on their website

Testing with Cypress

In order to test the production server use:

npx cypress run

or

npx cypress run --config baseUrl='https://www.sysdf-rooms.f4.htw-berlin.de/'

In order to test the local server use instead:

npx cypress run --config baseUrl='http://localhost:5173/'