How to render static files within Gin router?

Question

I want to serve a JSON file with gin server. And set some customize values in the HTML file. Use JavaScript in it to call the JSON file.

My application structure:

.
├── main.go
└── templates
    ├── index.html
    └── web.json

I put these basic source into main.go file:

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

var router *gin.Engine

func main() {
    router = gin.Default()
    router.LoadHTMLGlob("templates/*")

    router.GET("/web", func(c *gin.Context) {
        c.HTML(
            http.StatusOK,
            "index.html",
            gin.H{
                "title": "Web",
                "url":   "./web.json",
            },
        )
    })

    router.Run()
}

Some code in templates/index.html file:

<!doctype html>
<html>

  <head>
    <title>{{ .title }}</title>

    // ...
  </head>

  <body>
    <div id="swagger-ui"></div>

    // ...
    
    <script>
      window.onload = function() {
        // Begin Swagger UI call region
        const ui = SwaggerUIBundle({
          url: "{{ .url }}",
          dom_id: '#swagger-ui',
          // ...
        })
        // End Swagger UI call region

        window.ui = ui
      }
    </script>

  </body>
</html>

When running the application, I got a fetch error:

Not Found ./web.json

So how should I serve the web.json file to be accessed in the Gin internal server?

score 21 · Accepted Answer · answered Aug 05 '19 at 07:59

21

Quoting the original gin docs: https://github.com/gin-gonic/gin#serving-static-files

func main() {
    router := gin.Default()
    router.Static("/assets", "./assets")
    router.StaticFS("/more_static", http.Dir("my_file_system"))
    router.StaticFile("/favicon.ico", "./resources/favicon.ico")

    // Listen and serve on 0.0.0.0:8080
    router.Run(":8080")
}

So basically you should define a route specific to your JSON file next to other routes you've defined. And then use that.

answered Aug 05 '19 at 07:59

Seaskyways

3,630
3
26
43

1

It's the simple way. But how can I set dynamic `url` param here? – 02040402 Aug 05 '19 at 08:08
@02040402 yes that's how you do it, perhaps have a GET param, and do the file grabbing manually – Seaskyways Aug 05 '19 at 08:34
1

The last method ```reouter.StaticFileFS`` ends up doing a redirect for me when using ```embed.FS```. Also, wrong link – TheRealChx101 Jan 26 '23 at 10:43

iFurySt · Answer 2 · 2023-03-25T07:50:56.787

if you want to serve static file according by the query path, you can do like this:

func serve() {
    r := gin.Default()

    r.GET("/*path", func(c *gin.Context) {
        // read from file
        data, err := os.ReadFile("/path/to/file")
        if err != nil {
            // error handler
        }
        switch path.Ext(c.Request.URL.Path) {
        case ".html":
            c.Header("Content-Type", "text/html")
        case ".css":
            c.Header("Content-Type", "text/css")
        case ".js":
            c.Header("Content-Type", "application/javascript")
            // ...
        }
        _, _ = c.Writer.Write(data)
    })
    // Listen and serve on 0.0.0.0:8080
    panic(r.Run(":8080"))
}

How to render static files within Gin router?

2 Answers2

Linked

Related