Dev Soul Food

Tag: HTML

  • I Suck at REACT

    I’m working on a project with a Golang backend and a REACT frontend. Built the backend using Gin and was able to create a basic API. I wanted to not only test out the api but also figure out additional API calls I would need for the frontend. I’m primarily backend engineer and who can write frontend code when I had to. I didn’t feel like creating an entire REACT app and going through the process of figuring out the deployment so I decided to be lazy and serve html via Gin.

    Using HTML Templates in Go

    Writing HTML template in Go is not that difficult. Its basically a static html file with an action pipeline. A few examples of action pipelines:

    {{/* a comment */}}	
{{.}}	
{{.Title}}	
{{if .Done}} {{else}} {{end}}	
{{range .Todos}} {{.}} {{end}}	
{{block "content" .}} {{end}}	
    Defines a comment
Renders the root element
Renders the “Title”-field in a nested element
Defines an if-Statement
Loops over all “Todos” and renders each using {{.}}
Defines a block with the name “content”

    Here is an example template :

    <html>
    <header>
        <title>My Template</title>
    </header>
    <body>            
            {{range .Players}}
                <div id="playerList">
                    {{.Rank}} - {{.Name}}
                </div>
            {{end}
    </body>
</html>

    Serving the Pages Via Gin

    Now that I have a template how do I serve it via Gin. First create a directory named templates and save the above example as index.tmpl .Data for the template must be passed using a Go struct. The files must be loaded using LoadHTMLGlob() or LoadHTMLFiles().

    Here is an example of how to serve html file using Gin:

    func main() {
	router := gin.Default()
	router.LoadHTMLGlob("templates/*")
        data := []struct {
		Rank string
		Name string
	}{
		{"1", "Michael Jordan"},
		{"2", "Larry Bird"},
	}
	router.GET("/index", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.tmpl", gin.H{
			"Players": data,
		})
	})
	router.Run(":8080")
}

    This code will read templates from the templates directory, create an array with the required data and display the template using the provided data. Gin will detect if a change has been made to templates and automatically reload it. Templates can use CSS and Javascript if you can to get more fancy.

    This is a simple workaround to avoid having to create a full blown REACT app and shouldn’t be seen as a long term solution.