olivere/vite

To serve multiple Vite applications from a single Go backend, you must generate unique HTML tags for each application using vite.HTMLFragment. Each application requires its own vite.Config instance specifying its unique development URL, entry point, template type, and filesystem context.

Key configuration requirements for multiple apps:

• Unique ViteURL: Assign a distinct port or path for each app's development server (e.g., http://localhost:5173 and http://localhost:5174/admin).
• ViteTemplate: Specify the correct template type (e.g., vite.ReactTs or vite.Vue).
• FS: Use fs.Sub to provide a sub-filesystem for each app's specific distribution directory.
• AssetsURLPrefix: Use this to prevent path collisions in production by prefixing asset URLs.

// Example for a Main App
assetsApp, _ := fs.Sub(app.DistFS, "app")
viteConfig := vite.Config{
	IsDev:        app.InDevelopment,
	ViteURL:      "http://localhost:5173",
	ViteEntry:    "src/main.tsx",
	ViteTemplate: vite.ReactTs,
	FS:           assetsApp,
}

// Example for an Admin App with a custom prefix
assetsAdmin, _ := fs.Sub(app.DistFS, "admin-app")
viteConfigAdmin := vite.Config{
	IsDev:           app.InDevelopment,
	ViteURL:         "http://localhost:5174/admin",
	ViteEntry:       "src/main.js",
	ViteTemplate:    vite.Vue,
	FS:              assetsAdmin,
	AssetsURLPrefix: "/admin-app",
}

// Generate the tags
fragment, _ := vite.HTMLFragment(viteConfig)
return fragment.Tags

When using the HTMLFragment helper function, you are responsible for serving static assets yourself.

• Development Mode: The Vite dev server handles JS and CSS. Your Go server must serve other assets (images, SVGs, etc.) from the public folder or source directories.
• Production Mode: You must serve the built assets from your dist directory.

Example of manual asset serving in Go:

if isDev {
    // Serve assets from the source directory in development
    serveStaticFolder(mux, "/src/assets/", os.DirFS("frontend/src/assets"))
    // Serve the public folder
    serveStaticFolder(mux, "/", os.DirFS("frontend/public"))
}

if !isDev {
    // Serve the build directory in production
    serveStaticFolder(mux, "/assets/", os.DirFS("frontend/dist/assets"))
    // Serve the public folder
    serveStaticFolder(mux, "/", os.DirFS("frontend/dist"))
}

func serveStaticFolder(mux *http.ServeMux, path string, fs fs.FS) {
    mux.Handle(path, http.StripPrefix(path, http.FileServer(http.FS(fs))))
}

The helper function approach generates the necessary HTML tags (<script>, <link>) to connect your Go application to Vite assets. It automatically switches between the Vite dev server in development and built assets in production.

To use this, call vite.HTMLFragment with a vite.Config object and pass the resulting fragment to your HTML template. You must access the .Tags property of the fragment within your template.

// Initialize the helper function
viteFragment, err := vite.HTMLFragment(vite.Config{
    FS:        os.DirFS("frontend/dist"), // Required: Vite build output directory
    IsDev:     *isDev,                     // Required: Development or Production mode
    ViteURL:   "http://localhost:5173",   // Optional: Defaults to this URL
    ViteEntry: "src/main.js",             // Optional: Depends on your frontend setup
})
if err != nil {
    panic(err)
}

// Template with Vite tags
indexTemplate := `
<head>
    <meta charset="UTF-8" />
    <title>My Go Application</title>
    {{ .Vite.Tags }}
</head>
<body id="app"></body>
`