Fiber: 🤗 Making existing site dynamic with fiber

[suntong]

Question description

How to make existing site dynamic with fiber?

My mindset still remains at cgi/jsp age, when you take an existing web site structure, and change whatever need to be changed into dynamic variables, and you're mostly done. however, fiber seems to be totally different to me.

I.e., the ask here is,

• I have an existing web site structure
• most of them are static
• however, there are some key places that I want to change dynamically
• such key places spread across several .html files at different places and different levels

How to make fiber work for case like this?

Take a look at https://github.com/suntong/fiber_demo/tree/master/jmeter-dashboard for example (each .html has a Start Time and End Time entry that I want to make dynamic, for e.g.),

Code snippet _Optional_

package main

import "github.com/gofiber/fiber"

func main() {
    app := fiber.New()
    app.Get("/jmeter-dashboard", func(c *fiber.Ctx) {
        // Render index
        c.Render("jmeter-dashboard/index", fiber.Map{
            "StartTime": "2020-09-10",
        })
    })
  // ..
}

In my actual code, I tried to put the jmeter-dashboard site structure under template's view, then tried to render it with code above. However, every single other component failed:

#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/content/js/dashboard-commons.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/content/js/dashboard.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/dist/js/sb-admin-2.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/content/js/jquery.tablesorter.min.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/bower_components/flot/jquery.flot.resize.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/bower_components/flot/jquery.flot.time.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/bower_components/flot-axislabels/jquery.flot.axislabels.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/bower_components/metisMenu/dist/metisMenu.min.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/content/js/dashboard-commons.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/content/js/dashboard.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/dist/js/sb-admin-2.js
#65887 - 2020/09/10 18:05:22 404 - 0s         GET /jmeter-dashboard/content/js/jquery.tablesorter.min.js
#65887 - 2020/09/10 18:05:30 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/bower_components/bootstrap/dist/css/bootstrap.min.css
#65887 - 2020/09/10 18:05:38 404 - 0s         GET /jmeter-dashboard/sbadmin2-1.0.7/

Just to list last few entries. and the last one is what I tried manually.

Everything exist physically on my disk, ls each of them are all OK, but just fiber can't find them.

Why is that? Is everything under view/ has to be served with app.Get("/anything", func(c *fiber.Ctx) {...}? I.e., if no such explicit declaration, fiber can't find them? Is there any way for fiber to find files under view/ and serve them just like serving from static files (app.Static("/jmeter-dashboard", "jmeter-dashboard"))? THX!

[hi019]

You have two issues here: templating and static resource serving.

To use variables in templates, see here. It should be {{.StartTime}} in your template (but make sure you read the rest of the doc).

Is there any way for fiber to find files under view/ and serve them just like serving from static files (app.Static("/jmeter-dashboard", "jmeter-dashboard"))?

If its a static asset (non-template), just use app.Static as you described. If it is a template, you would need to somehow pass data into it so you would need a handler. Why don't you put content and sbadmin2-1.0.7 in a static directory, and then use app.Static to serve that?

[suntong]

Yeah, I thought about to separate the static asset and templating apart is one way out but I was reluctant to go that way, as it tears an cohesive piece apart.

such key places spread across several .html files at different places and different levels
each .html has a Start Time and End Time entry that I want to make dynamic, for e.g.

as such, only sbadmin2-1.0.7 can be put into a static directory, the files under content have to hand picked, so some go here and some go there. This is something that I want to avoid, if possible.

[Fenny]

Hi @suntong, not sure if I understand your problem correctly, but something like this might work.

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

    // Catch static assets
    app.Static("/jmeter-dashboard", "./jmeter-dashboard", fiber.Static{
        Index: "", // Don't serve index.html as static file on dir calls
    })

    // Template gets called if static asset does not exist
    app.Get("/jmeter-dashboard", func(c *fiber.Ctx) {
        // Render index
        c.Render("./jmeter-dashboard/index.html", fiber.Map{
            "StartTime": "2020-09-10",
        })
    })
    // ..
}

[suntong]

but something like this might work

Thanks @Fenny, so the conflict of index.html file get solved.

I guess that hand picking the files under content folder into different places is inevitable then. Well, if that's the final answer, then sure.

Thanks

[suntong]

Yep, I tried it and it works perfectly fine. Everything as expected.

Thanks again everyone!