OpenShock Frontend

master
develop

This is the frontend for the OpenShock project that interfaces with the OpenShock API.

Technologies

Available Commands

• pnpm i - Install dependencies
• pnpm run dev - Start the development server
• pnpm run build - Build the project
• pnpm run preview - Preview the built project
• pnpx openapi-generator-cli generate - Generate the API client

Setup

To get started with development, you will need to have Node.js and pnpm installed.

We recommend using a version manager like Volta to manage your Node.js versions.

Install Node.js and pnpm

Install on Linux:

curl https://get.volta.sh | bash

Install on Windows:

winget install Volta.Volta

Then you can install the required Node.js and pnpm version by running a single command in the repository root directory:

volta install node
volta install pnpm

Install dependencies and build project

With Node.js installed, you can run the following commands to get started:

pnpm i
pnpm run build

Running locally

Running the frontend locally is as simple as this:

pnpm run dev

Hosts redirect

If you do not have a hosts file config for your domain and try to run the project you will get the following example message:

Please ensure that local.openshock.app resolves to 127.0.0.1 in your hosts file

On macOS and Linux, you can do this by running the following command:
echo "127.0.0.1 local.openshock.app" | sudo tee -a /etc/hosts

On Windows, you can do this by running the following command in PowerShell as an administrator:
Add-Content -Path "C:\Windows\System32\drivers\etc\hosts" -Value "127.0.0.1 local.openshock.app"

Then restart your development server

This action is required because of cookie policy, once you have done this you should be set!

Try closing and re-opening your development environment or console to refresh its cached system config.

📂 Project Structure

.changestes/   # Versioning and changelog automation
.github/       # GitHub workflows
e2e/           # End-to-end tests (Playwright)
patches/       # Manual patches to npm dependencies (used with patch-package)
static/        # Public assets served directly (e.g., images, icons)
src/           # Application source code
├── lib/       # Shared modules and utilities
│   ├── api/               # API clients
│   │   └── internal/      # Autogenerated API client (DO NOT EDIT MANUALLY)
│   ├── components/        # UI components
│   │   ├── metadata/      # Meta helpers for SEO and accessibility
│   │   ├── svg/           # Customizable SVG icons
│   │   └── ui/            # Shadcn UI components (Do not add custom components here)
│   ├── constants/         # Global constants
│   ├── errorhandling/     # Error handling utilities
│   ├── hooks/             # Svelte hooks
│   ├── inputvalidation/   # Input validators for usage with input fields
│   ├── signalr/           # SignalR real-time communication logic
│   ├── stores/            # Svelte stores for global state management
│   ├── typeguards/        # Type guard helpers for runtime type checking
│   ├── types/             # Global TypeScript types
│   └── utils/             # General utilities
├── params/                # SvelteKit route parameter matchers
├── routes/                # Application routes (file-based routing)
│   ├── (authenticated)/   # Protected routes (everything under this folder requires authentication)
│   │   └── +layout.svelte # Authentication boundary and layout
│   ├── +error.svelte      # Global error fallback
│   └── +layout.svelte     # Root layout and entrypoint
├── app.css    # Global styles
├── app.d.ts   # Global type declarations
└── app.html   # HTML root template
└── error.html # Fallback HTML error page (for critical errors)

Configuration files

📦 Node & pnpm

• .npmrc — npm configuration.
• .nvmrc — Node.js version manager file.
• package.json, pnpm-lock.yaml — Project dependencies and lockfile.

⚙️ Configuration & Tooling

• .editorconfig — Editor formatting consistency across IDEs.
• .prettierrc, .prettierignore — Code formatting rules (Prettier).
• eslint.config.js — Linting setup (ESLint).
• tsconfig.json — TypeScript compiler configuration.
• vite.config.ts — Vite bundler config.
• svelte.config.js — SvelteKit configuration.
• components.json — Component metadata for shadcn.
• openapitools.json — Codegen config from OpenAPI spec.
• playwright.config.ts — End-to-end testing configuration (Playwright).

🌐 Environment Variables

• .env, .env.development, .env.production, .env.test — Environment-specific config files (e.g., API keys, endpoints).

🐳 Containerization

• Dockerfile — Container definition for deployment or local dev.
• .dockerignore — Files to exclude from Docker build context.

Support

You can support the openshock dev team here: Sponsor OpenShock

For self hosting support consider supporting us via the link above.