Project Structure & Configuration

This page provides an overview of the project's structure and key configuration files for developers who wish to contribute or customize Hollama.

Technology Stack

• Framework: SvelteKit
• Language: TypeScript
• Bundler: Vite
• Styling: Tailwind CSS with PostCSS
• Desktop App: Electron
• Testing: Playwright for end-to-end tests

Key Configuration Files

• package.json: Defines project metadata, scripts, and dependencies. Key scripts include dev, build, test, and electron:build.

• svelte.config.js: The main configuration file for SvelteKit. It specifies:

  • Preprocessors: vitePreprocess() is used to enable features like PostCSS and TypeScript in Svelte components.
  • Adapters: It dynamically chooses a SvelteKit adapter based on the PUBLIC_ADAPTER environment variable. It supports adapter-node (for Docker and Electron builds) and adapter-cloudflare (for the live demo).

• vite.config.ts: Configures the Vite development server and build process. Notably, it sets up the preview server's allowedHosts based on the VITE_ALLOWED_HOSTS environment variable, which is crucial for Docker deployments.

• tailwind.config.js & postcss.config.cjs: These files configure the styling pipeline. tailwind.config.js defines the design system (colors, fonts, etc.) and custom plugins. postcss.config.cjs sets up the PostCSS plugins, including @tailwindcss/nesting and autoprefixer.

• tsconfig.json: The TypeScript configuration file. It extends the base configuration generated by SvelteKit and sets strict type-checking rules.

• electron-builder.yml: Configures how the Electron application is packaged for different operating systems (macOS, Windows, Linux). It defines the app ID, product name, icons, and build targets.

• electron/main.js: The entry point for the Electron main process. It's responsible for creating the application window and loading the SvelteKit app.