|
I use the Static Middleware to serve a Vue Frontend which is embedded. Is there a way to add some data to the index.html? |
Replies: 1 comment 2 replies
|
The static middleware serves files as-is, so it won't help with injecting dynamic data. What you want is to handle Here's how I'd approach it: //go:embed all:dist
var staticFiles embed.FS
func main() {
e := echo.New()
// Serve index.html with dynamic data
e.GET("/", func(c echo.Context) error {
// Read the embedded index.html
content, err := staticFiles.ReadFile("dist/index.html")
if err != nil {
return err
}
// Inject your data (e.g., replace a placeholder)
html := strings.Replace(
string(content),
"<!--APP_CONFIG-->",
`<script>window.APP_CONFIG = {"apiUrl": "/api", "version": "1.0.0"}</script>`,
1,
)
return c.HTML(http.StatusOK, html)
})
// Serve other static assets normally
assetHandler := echo.WrapHandler(
http.FileServer(http.FS(staticFiles)),
)
e.GET("/dist/*", assetHandler)
e.Start(":8080")
}In your Vue <head>
<!--APP_CONFIG-->
</head>Then in your Vue app, access it via Alternatively, if you need more complex templating, you could use Go's |
|
how would i do the fallback to |
|
Do you want to create SPA (single-page-application) where application checks if request path exists and serves that static file or if it does not will reserve index.html as fallback? There are many ways to achieve this, one is to have Filesystem that falls back to index.html which is served from in-memory fs package main
import (
"embed"
"fmt"
"io/fs"
"log/slog"
"net/http"
"strings"
"github.com/labstack/echo/v5"
"github.com/spf13/afero"
)
//go:embed dist/public
var distAssets embed.FS
type overlayFS struct {
primary fs.FS
fallback fs.FS
}
func (o overlayFS) Open(name string) (fs.File, error) {
if name == "index.html" {
return o.fallback.Open(name)
}
f, err := o.primary.Open(name)
if err == nil {
return f, nil
}
return o.fallback.Open("index.html")
}
// Create Afero in memory filesystem with index.html
// https://github.com/spf13/afero `go get github.com/spf13/afero`
func createIndexHMTLfs(assets embed.FS) (fs.FS, error) {
content, err := distAssets.ReadFile("dist/public/index.html")
if err != nil {
return nil, fmt.Errorf("failed to read index.html")
}
html := strings.Replace(
string(content),
"<!--APP_CONFIG-->",
`<script>window.APP_CONFIG = {"apiUrl": "/api", "version": "1.0.0"}</script>`,
1,
)
memMapFs := afero.NewMemMapFs()
afero.WriteFile(memMapFs, "index.html", []byte(html), 0644)
return afero.NewIOFS(memMapFs), err
}
func main() {
e := echo.New()
indexFs, err := createIndexHMTLfs(distAssets)
if err != nil {
slog.Error("failed to create index fs", "error", err)
}
ofs := overlayFS{
primary: echo.MustSubFS(distAssets, "dist/public"),
fallback: indexFs,
}
e.StaticFS("/", ofs)
e.GET("/api/test", func(c *echo.Context) error {
return c.JSON(http.StatusOK, map[string]string{"message": "Hello, World!"})
})
if err := e.Start(":8080"); err != nil {
slog.Error("failed to start server", "error", err)
}
} |
Do you want to create SPA (single-page-application) where application checks if request path exists and serves that static file or if it does not will reserve index.html as fallback?
There are many ways to achieve this, one is to have Filesystem that falls back to index.html which is served from in-memory fs