SvelteKit / shadcn Web-App template

Below you'll find all the necessary information to get started with the project, including setup instructions and common commands.

🛠️ Technologies used

Framework: SvelteKit          Runtime: Bun

UI: shadcn-svelte                           ORM: Prisma

Testing: Playwright, Vitest                  Code Quality: ESLint, Prettier

Language: TypeScript

🚀 Getting started

To get the project up and running on your local machine, follow these steps:

1. Clone the repository

git clone https://github.com/Robodealz/webapp.git
cd webapp

2. Install dependencies

• Using Bun as the package manager:

  bun install
  

3. Environment setup

• Set type of db in prisma/schema.prismafile:

  datasource db {
      provider = "mysql"
      url      = env("DATABASE_URL")
  }
  

• Create a .env file in the root directory and populate it with the necessary environment variables:

  DATABASE_URL="mysql://user:password@hostnameOrIp:port/dbname"
  

4. Generate Prisma client

bun prisma generate

5. Run migrations

bun prisma migrate dev

🎨 Run and Build with SvelteKit

Development server

bun dev

Build production version

• Building it:

  bun run build
  
  bun preview # To preview the production build
  

• And running the production build with bun:

  cd build
  
  bun run start
  

🔗 Useful commands for Prisma

Open Prisma Studio

bun prisma studio

Create a New Migration

bun prisma migrate dev --name add_new_feature

📦 Using shadcn-svelte components

shadcn-svelte is a anti-component component library for Svelte. Anti component means it's components source code is installed to your src/lib/components/ui directory by using it's CLI.

Component installation

bunx shadcn-svelte@latest add button

Takes component names as space separated input to directly install them.
Without any component name behind the command, an installer is started where components can be selected.

Component usage

Inside your Svelte component:

<script lang="ts">
    import { Button } from '$lib/components/ui/button';
</script>

<button>Button</button>

Component update

bunx shadcn-svelte@latest update button

🧪 Testing

To run tests using Playwright and Vitest:

Unit and Integration Tests with Vitest

bun vitest

E2E Tests with Playwright

bun playwright test

🧹 Code Quality

To ensure your code adheres to the set standards using ESLint and Prettier:

Linting with ESLint

bun lint

Formatting with Prettier

bun prettier --write .

🕸️ WebSocket Server

https://bun.sh/docs/api/websockets

// hooks.server.js

/** @type {import("svelte-adapter-bun").WebSocketHandler} */
export const handleWebsocket = {
    open(ws) {
        console.log('WebSocket opened');
        ws.send('Finally');
    },
    /**
     * @param {Request} request
     * @param {Function} upgrade
     */
    upgrade(request, upgrade) {
        const url = new URL(request.url);
        if (url.pathname.startsWith('/ws')) {
            return upgrade(request);
        }
    },
};