🤔 How to serve Single page application

[WLun001]

Question description
How to serve javascript single app application?

Code snippet (optional)

package main

import "github.com/gofiber/fiber"

func main() {
  app := fiber.New()
  // ..
app.Static("/", "web/dist/web")
}

This only works for the client root routes. It won't work if the client has navigate to different route.
eg, /page1

[welcome]

Thanks for opening your first issue here! 🎉 Be sure to follow the issue template!

[y21]

I had the same "problem" a while ago and ended up registering multiple static file handlers as it didn't work with just one handler, though I'm not sure if this is the optimal way to approach that and it seems rather annoying if you have a lot of directories.

app.Static("/", "web/dist/web")
app.Static("/js/", "web/dist/web/js")
app.Static("/css/", "web/dist/web/css")
// ...

Wouldn't it make more sense to use a web server like nginx for fully static websites anyway?

[WLun001]

@y21 yeah I know using web server will be better sense. I just wanted to run simple full stack app in one service.

The example does not work, I only have one directory, it's an Angular app

.
└── web
    ├── favicon.ico
    ├── index.html
    ├── main.js
    ├── main.js.map
    ├── polyfills.js
    ├── polyfills.js.map
    ├── runtime.js
    ├── runtime.js.map
    ├── styles.js
    ├── styles.js.map
    ├── vendor.js
    └── vendor.js.map

[Fenny]

@WLun001

func main() {
  app := fiber.New()

  // http://localhost:3000/favicon.ico
  // http://localhost:3000/js/main.js
  // http://localhost:3000/css/style.css
  app.Static("/", "web")

  // http://localhost:3000/i/will/match/anything
  app.Get("*", func(c *fiber.Ctx) {
    c.SendFile("web/index.html")
  })
  
  app.Listen(3000)
}

[WLun001]

@Fenny thanks! This is my final code, SPA serves under web because I still want to serve api

func main() {
  app := fiber.New()
  app.Static("/web", "web/dist/web")
  app.Get("/web/*", func(ctx *fiber.Ctx) {
    ctx.SendFile("web/dist/web/index.html")
 })
  app.Listen(3000)
}

should we add this example to the docs?

[Fenny]

I will add an example to https://github.com/gofiber/recipes