Frontend

This is the frontend starter for project 2.

It uses quite a lot of new components, so please take your time to read the following resources:

  • Vite: build system for the frontend
  • Svelte: The frontend JavaScript library that we will be using. Please make sure you understand how to use Svelte.
  • SvelteKit: Framework that makes developing web applications easier/faster. For example you get file-based routing
  • Fetch: We will be using fetch for making request to the REST API
  • Tailwind: Tailwind is used as the CSS library. However you can use any css library that you want to use, e.g. Bootstrap, Bulma, etc.

Setting up

  1. First add a .env file in the root of the frontend application (/frontend/.env), in here specify the backend API URL:
# Backend API base URL
PUBLIC_API_BASE="http://localhost:8080/api/v1"
  1. Install Node.js and npm
  2. Install needed dependencies using npm, run npm install in the frontend root directory
  3. Start the frontend application npm run dev, this will start a server and watch for any file changes. All changes will autoupdate the application and are immediately visible.
  4. Go to http://localhost:5173 and you should see a simple starter application

[!IMPORTANT] Please follow the tutorial for SvelteKit https://svelte.dev/tutorial/kit/introducing-sveltekit

Developing

You are free to develop the frontend in the way you prefer.

  • Use your own CSS or use a library
  • Build your own components or use a library (e.g. Flowbite)
  • If you prefer to use Typescript that is also allowed

[!IMPORTANT] The focus of project 2 is on the backend, NOT the frontend.