🚀 SvelteKit + Go: The Ultimate Full-Stack Boilerplate

Supercharge your web development with this powerful combination of SvelteKit for the frontend and Go (with Gin) for the backend. This boilerplate provides a seamless integration between these two cutting-edge technologies, allowing you to build scalable and performant web applications with ease.

✨ Features

• 🎨 SvelteKit: A powerful frontend framework for building blazing-fast web apps
• 🚄 Go + Gin: High-performance backend with one of the fastest web frameworks for Go
• 🔗 Seamless Integration: Pre-configured setup for smooth communication between frontend and backend
• 🛠 Development Ready: Includes proxy configuration for easy local development
• 📦 Production Optimized: Static adapter configuration for SvelteKit, ready for deployment

🖥 Frontend Configuration (SvelteKit)

Static Adapter

Update svelte.config.js:

import adapter from '@sveltejs/adapter-static';
import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: 'index.html',
            precompress: false
        }),
        prerender: {
            handleHttpError: 'ignore'
        }
    }
};

export default config;

Disable SSR

In src/routes/+layout.(js|ts):

export const ssr = false;
export const prerender = false;

Go Integration

Create web.go in the root:

package web

import "embed"

//go:embed build/*
var Fs embed.FS

🖥 Backend Configuration (Go)

Install Gin

First, install the Gin web framework:

go get -u github.com/gin-gonic/gin

Example Usage

Check out main.go in the backend directory for an example of how to set up a basic Gin server and integrate it with the SvelteKit frontend. Here's a snippet of what you might find:

package main

import (
	"github.com/gin-gonic/gin"
	"io/fs"
	"log"
	"net/http"
	"package-name/web"
	"strings"
)

func main() {
	f := getFileSystem()

	// Create a Gin engine
	r := gin.Default()

	// Define an API route
	api := r.Group("/api")
	api.GET("/hello", func(c *gin.Context) {
		c.JSON(http.StatusOK, gin.H{"message": "Hello, world!"})
	})

	// Serve static files and fallback for SPA
	r.Use(spaFileHandler(f))

	// Run the server on port 8080
	if err := r.Run(":8080"); err != nil {
		log.Fatal(err)
	}
}

func spaFileHandler(httpFS http.FileSystem) gin.HandlerFunc {
	fileServer := http.FileServer(httpFS)
	return func(c *gin.Context) {
		path := c.Request.URL.Path

		// Bypass the handler for API requests
		if strings.HasPrefix(path, "/api") {
			c.Next()
			return
		}

		// Try to serve the exact file
		if _, err := httpFS.Open(path); err == nil {
			fileServer.ServeHTTP(c.Writer, c.Request)
			return
		}

		// Fallback to serving index.html for SPA
		c.Request.URL.Path = "/"
		fileServer.ServeHTTP(c.Writer, c.Request)
		c.Request.URL.Path = path // Restore the original path
	}
}

// getFileSystem retrieves the embedded filesystem for serving static files
func getFileSystem() http.FileSystem {
	fSys, err := fs.Sub(web.Fs, "build") // Extract the "build" directory from the embedded filesystem
	if err != nil {
		panic(err)
	}
	return http.FS(fSys)
}

🛠 Development

For local development, update vite.config.js to proxy API requests:

import {sveltekit} from '@sveltejs/kit/vite';
import {defineConfig} from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    server: {
        proxy: {
            "/api": {
                target: "http://127.0.0.1:8080",
                changeOrigin: true,
                secure: false,
                ws: true,
            },
        },
    },
});

⚠️ Important Note

Before running the Go server, make sure to build the SvelteKit frontend or create empty directories for the static files:

npm run build

📚 Learn More

• SvelteKit Documentation
• Go Documentation
• Gin Web Framework

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check issues page.

---

Happy coding! 🎉