Frontend

This project contains the frontend of the Data Abstraction Platform.

It is a web application platform built using SvelteKit.

Table of Contents

1. Environment Variables
2. Development
3. Containerization
4. SvelteKit Documentation
5. Key tools, and technologies used

Key tools and technologies used

Name	Use	Documentation Link
Svelte	Component building	Click Here
Tailwind CSS	Base CSS Styling	Click Here
Daisy UI	Component and Theme Styling	Click Here
Svelte for VS Code	Extension for VS Code	Click Here
Iconify Design	Repository with thousands of icons	Click Here

Environment Variables

Create your own .env file using this template.

Name/Key	Example	Default	Description
PUBLIC_API_CORE_URL	http://localhost:5174/api		Backend Core Api URL.
PUBLIC_BASE_PATH	/dap	/	Base Path to serve the webiste from. Requires rebuild if this value is changed.
PUBLIC_WEBSITE_TITLE	Data Abstraction Platform	Data Abstraction Platform Dev	Title of the website
PUBLIC_TELEMETRY_LOG_LEVEL	-4	0	Level of detail of logs generated. Range Meaning -4 to -1 debug 0 to 3 info 4 to 7 warning 8 error

Containerization

The script builds a data_abstraction_platform/website container image using this Dockerfile.

The script accepts the following flags during execution.

Flag	Example	Default	Purpose
-c	podman	docker	Container engine to use Optional
-t	v1alpha3	latest	Container Tag Optional

Example:

#!/bin/bash

CONTAINER_TAG="v4.18.3"
CONTAINER_ENGINE="podman"

bash build_container.sh -t $CONTAINER_TAG -c $CONTAINER_ENGINE

sv

Everything you need to build a Svelte project, powered by sv.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.