Embedding sveltekit in golang binaries

php editor Baicao will introduce to you an interesting technology today - embedding SvelteKit in golang binary files. With the continuous development of front-end technology, more and more frameworks and tools have emerged. As an emerging framework, SvelteKit provides faster loading speed and higher performance by building applications at compile time. This article will show you how to embed SvelteKit applications into golang binaries to achieve more convenient deployment and distribution. Let us find out together!

Question content

I'm trying to use embedd to serve a single binary file to include a sveltekit website. I use chi as my router. But I can't get it to work. I get one of these options below. From what I understand, the embedd all: option ensures that files prefixed with _ are included. I also tried variations of the stripprefix method in main v1: /uibuild/ or uibuild/ etc...

Can someone shine a light on it?

Sample Repository

1. Directory listing, in my case "uibuild"
2. There is a blank page at "/", but in the chrome console, a 404 error appears for nested files
3. 404 appears on the homepage "/".

​

Thin configuration:

import preprocess from "svelte-preprocess";
import adapter from "@sveltejs/adapter-static";

/** @type {import('@sveltejs/kit').config} */
const config = {
  kit: {
    adapter: adapter({
      pages: "./../server/uibuild",
      assets: "./../server/uibuild",
      fallback: "index.html",
    }),
  },

  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
};

export default config;

​

main.go v1：

This will generate error 3.

package main

import (
    "embed"
    "log"
    "net/http"

    chi "github.com/go-chi/chi/v5"
)

//go:embed all:uibuild
var sveltestatic embed.fs

func main() {

    r := chi.newrouter()

    r.handle("/", http.stripprefix("/uibuild", http.fileserver(http.fs(sveltestatic))))

    log.fatal(http.listenandserve(":8082", r))
}

main.go v2：

This will give error 2.

static, err := fs.sub(sveltestatic, "uibuild")
    if err != nil {
        panic(err)
    }

r := chi.newrouter()
r.handle("/", http.fileserver(http.fs(static)))

log.fatal(http.listenandserve(":8082", r))

File structure:

.
├── go.mod
├── go.sum
├── main.go
└── uibuild
    ├── _app
    │   ├── immutable
    │   │   ├── assets
    │   │   │   ├── 0.d7cb9c3b.css
    │   │   │   └── _layout.d7cb9c3b.css
    │   │   ├── chunks
    │   │   │   ├── index.6dba6488.js
    │   │   │   └── singletons.b716dd01.js
    │   │   ├── entry
    │   │   │   ├── app.c5e2a2d5.js
    │   │   │   └── start.58733315.js
    │   │   └── nodes
    │   │       ├── 0.ba05e72f.js
    │   │       ├── 1.f4999e32.js
    │   │       └── 2.ad52e74a.js
    │   └── version.json
    ├── favicon.png
    └── index.html

Workaround

Frustratingly, your "main.go v2" can only add a single character. You are using:

r.handle("/", http.fileserver(http.fs(static)))

From the documentation:

func (mx *mux) handle(pattern string, handler http.handler)

Each route method accepts a url pattern and handler chain. The url pattern supports named parameters (i.e. /users/{userid}) and wildcards (i.e. /admin/). You can obtain url parameters at runtime by calling chi.urlparam(r, "userid") (for named parameters) and chi.urlparam(r, "") (for wildcard parameters).

So you pass in "/" as "pattern"; this will match / but nothing else; fix using:

r.handle("/*", http.fileserver(http.fs(static)))
// or
r.mount("/", http.fileserver(http.fs(static)))

I tested this with one of my lite apps and it worked fine. One improvement you might want to consider is to redirect any requests for files that don't exist to / (otherwise the page won't load if the user bookmarks it with the path). See this answer for information.

In addition to the above - to demonstrate what I said in the comments, add <a href="/about">about</a> to ui /src/routes/ page.svelte and rebuild (both svelte and then go to the application). You will then be able to navigate to the about page (load the home page first, then click "About"). This is handled by the client router (so you probably won't see any requests to the go server). See the answer linked to for information on how to make it work when accessing the page directly (e.g. /about).

Here is a quick (and somewhat hacky) example that will serve the required bits from the embedded file system and return the main index.html for all other requests (so that the svelte router can display all required page).

package main

import (
    "embed"
    "fmt"
    "io/fs"
    "log"
    "net/http"

    "github.com/go-chi/chi/v5"
)

//go:embed all:uibuild
var svelteStatic embed.FS

func main() {

    s, err := fs.Sub(svelteStatic, "uibuild")
    if err != nil {
        panic(err)
    }

    staticServer := http.FileServer(http.FS(s))

    r := chi.NewRouter()

    r.Handle("/", staticServer) // Not really needed (as the default will pick this up)
    r.Handle("/_app/*", staticServer)      // Need to serve any app components from the embedded files
    r.Handle("/favicon.png", staticServer) // Also serve favicon :-)

    r.HandleFunc("/*", func(w http.ResponseWriter, r *http.Request) { // Everything else returns the index
        r.URL.Path = "/" // Replace the request path
        staticServer.ServeHTTP(w, r)
    })

    fmt.Println("Running on port: 8082")
    log.Fatal(http.ListenAndServe(":8082", r))
}

The above is the detailed content of Embedding sveltekit in golang binaries. For more information, please follow other related articles on the PHP Chinese website!