How to get Echo to work with HTML5 pushState routing for web apps?

[dominictobias]

A web app server should work as follows:

• Serve static files (at base not public/)
• Handle API routes under /api/
• Anything else GET gets redirected to index.html

// Serve static files
e.Static("/", "public")

// API routes
e.GET("/api/hello", hello)

// Catch-all route to serve index.html for HTML5 pushstate
e.GET("/*", func(c echo.Context) error {
	return c.File("public/index.html")
})

Unfortunately this doesn't work. Seems that Echo ignores the order of route definitions and the GET("/*") overrides the static handler for files. Thus requests for files serve up the contents of index.html instead of the file.

So how do we get Echo to be able to serve a web app with client side routing?

[dominictobias]

I fixed it by using Use instead

// Catch-all for GET requests to handle 404 and redirect to public/index.html
e.Use(func(next echo.HandlerFunc) echo.HandlerFunc {
	return func(c echo.Context) error {
		err := next(c)
		if he, ok := err.(*echo.HTTPError); ok {
			if he.Code == http.StatusNotFound {
				return c.File("public/index.html")
			}
		}
		return err
	}
})

[aldas]

Static middleware is probably something that you seek. See this example: https://echo.labstack.com/docs/middleware/static#example-2

//go:embed web
var webAssets embed.FS

func main() {
	e := echo.New()

	e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
		HTML5:      true,
		Root:       "web", // because files are located in `web` directory in `webAssets` fs
		Filesystem: http.FS(webAssets),
	}))
	api := e.Group("/api")
	api.GET("/users", func(c echo.Context) error {
		return c.String(http.StatusOK, "users")
	})

	if err := e.Start(":8080"); err != nil && !errors.Is(err, http.ErrServerClosed) {
		log.Fatal(err)
	}
}