sveltekit

SvelteKit with Go Backend and Adapter-Static

In this project, we use Tailwind CSS for utility-first styling and DaisyUI as a component library built on top of Tailwind CSS, providing a lightweight and customizable UI framework. The frontend is built with SvelteKit and paired with a Go backend using the Soul AST system, which generates API endpoints found in ./src/lib/api. The adapter-static package is used to generate static files, served by the Go backend alongside the dynamic API routes.

Go Backend Integration with Soul AST

The Go backend is powered by the Soul AST system, which generates API endpoints automatically. These endpoints are exposed via TypeScript clients in ./src/lib/api, including functions like RegisterPost, LoginPost, and others, as defined in endpoints.ts. The SvelteKit frontend is configured with adapter-static to produce static files, which the Go server delivers alongside the Soul-generated API.

Setup Instructions

1. Install dependencies using pnpm: Initialize your SvelteKit project and install required packages:

   pnpm init
   pnpm create svelte@latest my-svelte-go-app
   cd my-svelte-go-app
   pnpm install
   pnpm add -D @sveltejs/adapter-static tailwindcss postcss autoprefixer daisyui
   

2. Set up Tailwind CSS and DaisyUI:

   • Generate Tailwind configuration:

     pnpm dlx tailwindcss init -p
     

   • Update tailwind.config.js:

     /** @type {import('tailwindcss').Config} */
     export default {
       content: ['./src/**/*.{html,js,svelte,ts}'],
       theme: {
         extend: {},
       },
       plugins: [require('daisyui')],
       daisyui: {
         themes: ["light", "dark", "cupcake"], // Customize as needed
       },
     };
     

   • Create src/app.css:

     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

   • Import it in src/routes/+layout.svelte:

     <script>
       import '../app.css';
     </script>
     <slot />