Add StaticFS method

[flimzy]

Issue Description

Checklist

• Dependencies installed
• No typos
• Searched existing issues and docs

Expected behaviour

As of Echo 4.6.1, we have the (*Echo).Static(prefix, root string) *Route method. With the advent of Go 1.16, we have the new fs.FS type which expands upon the older concept of http.Dir as used by http.FileServer, to allow serving of files from any FS-like location, not just on disk.

I think it would be logical for Echo to support this new standard as well. The simplest approach I think would be to add a StaticFS method, probably with the following signature:

func (e *Echo) StaticFS(prefix string, root fs.FS) *Route

Version/commit

v4.6.1

[aldas]

(default)filesystem will be added in v5 (already exists there) but most of it, if not all, could be used in v4 also

currently e.StaticFS can be emulated if you add route with no-op handler and static middleware with filesystem

echo/middleware/static.go

Line 48 in 4fffee2

Filesystem http.FileSystem `yaml:"-"`

something like that. Probably needs some Root and/or IgnoreBase config values also. I did not test it before posting here.

	e.GET("/files/*", echo.NotFoundHandler, middleware.StaticWithConfig(middleware.StaticConfig{
		Filesystem: http.Dir("./"),
	}))

[lammel]

This is now implemented with #2064 and will be made available with echo v4.7

[clemensg]

In Angular, you get all built files in one directory by default. Let's say I embed this directory as embed.FS and want to serve all those files (/index.html, /main.xyz.js, etc.) but additionally want to redirect every not-found file to index.html (so that if you reload the current /frontend-route-xyz page it should not return a 404 but serve index.html and the Angular Router deals with the fake /frontend-route-xyz URL)

I am unsure how to do this even with #2064 or am I missing something?

[aldas]

@clemensg this is what "static" middleware" can do. Please check index and HTML5 fields

echo/middleware/static.go

Lines 27 to 34 in 4a1ccdf

	// Index file for serving a directory.
	// Optional. Default value "index.html".
	Index string `yaml:"index"`
	// Enable HTML5 mode by forwarding all not-found requests to root so that
	// SPA (single-page application) can handle the routing.
	// Optional. Default value false.
	HTML5 bool `yaml:"html5"`

[clemensg]

@aldas Thank you! I missed the new Filesystem option in the Static Middleware (not in the docs yet), which makes it possible to use it with embed.FS 👍

[aldas]

Closing, this stuff is now released with v4.7.0

[justin-calleja]

In case anyone else needs this, here's a working example (tested with go v1.18):

package main

import (
	"embed"
	"flag"
	"fmt"
	"net/http"

	"github.com/labstack/echo/v4"
	echoMw "github.com/labstack/echo/v4/middleware"
)

// If you have files starting with "_" that you want to serve, use "all:"
//go:embed all:public
var public embed.FS

func main() {
	var port int
	flag.IntVar(&port, "port", 8000, "The port to listen on")
	flag.Parse()

	e := echo.New()

	e.Use(echoMw.StaticWithConfig(echoMw.StaticConfig{
		Root:       "public",     // This is the path to your SPA build folder, the folder that is created from running "npm build"
		Index:      "index.html", // This is the default html page for your SPA
		Browse:     false,
		HTML5:      true,
		Filesystem: http.FS(public),
	}))

	e.Logger.Fatal(e.Start(fmt.Sprintf(":%d", port)))
}