Hello Everyone,
I was wondering whether we can use go template to build generic reusable web UI components, for example tree components (using go html template), which can later be used across the project. Has any one tried it?
Hello there, yes you can achieve that by using Go HTML templates but I would prefer Hugo to achieve that or one SPA(single page application) framework you would like to use, to be honest. Here is how I have done in the past to create generic reusable templates.
It is also much more clean if you can keep the frontend and the backend separate to ease the development and deployment steps. This is typical monolith approach where you combine the API and the frontend in a single Go app. As the load increases on your app, it might be harder to scale out, you may need frontend to be on its own static hosting service and backend to be on its own dynamic hosting service.
main.go
func main() {
t := template.Must(template.ParseGlob("./web/templates/*.go.tmpl"))
t = template.Must(t.ParseGlob("./web/templates/components/*.go.tmpl"))
t = template.Must(t.ParseGlob("./web/templates/pages/*.go.tmpl"))
log.Fatal(http.ListenAndServe(":8080", rest.Handler(t)))
}
rest/handler.go
func Handler(t *template.Template) http.Handler {
r := mux.NewRouter()
r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("./web/static/"))))
r.HandleFunc("/home", homeHandler(t))
return r
}
func homeHandler(t *template.Template) http.HandlerFunc {
return func(w http.ResponseWriter, req *http.Request) {
// _, _ = w.Write([]byte("HELLO WORLD!"))
err := t.ExecuteTemplate(w, "pages/home", nil)
if err != nil {
panic(err)
}
}
}
web/templates/base.go.tmpl
{{define "base"}}
<!DOCTYPE html>
<html>
<head>
{{block "meta" .}}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{$cacheDisabled := true}}
{{if $cacheDisabled}}
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
{{end}}
{{end}}
<title>{{block "title" .}} MyTitle123 {{end}}</title>
{{block "css" .}}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<!-- Bulma Version 0.9.0-->
<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="../static/css/admin.css">
{{end}}
{{block "js" .}}
<script src="../static/js/reloadBrowser.js"></script>
{{end}}
</head>
<body>
<!-- START NAV -->
<nav class="navbar is-white">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item brand-text" href="../index.html"> Bulma Admin </a>
<div class="navbar-burger burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="admin.html"> Home </a>
<a class="navbar-item" href="admin.html"> Orders </a>
<a class="navbar-item" href="admin.html"> Payments </a>
<a class="navbar-item" href="admin.html"> Exceptions </a>
<a class="navbar-item" href="admin.html"> Reports </a>
</div>
</div>
</div>
</nav>
<!-- END NAV -->
<div class="container">
<div class="columns">
<div class="column is-3 ">
<aside class="menu is-hidden-mobile">
<p class="menu-label"> General </p>
<ul class="menu-list">
<li><a class="is-active">Dashboard</a></li>
<li><a>Customers</a></li>
<li><a>Other</a></li>
</ul>
<p class="menu-label"> Administration </p>
<ul class="menu-list">
<li><a>Team Settings</a></li>
<li>
<a>Manage Your Team</a>
<ul>
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
<li><a>Remove a member</a></li>
</ul>
</li>
<li><a>Invitations</a></li>
<li><a>Cloud Storage Environment Settings</a></li>
<li><a>Authentication</a></li>
<li><a>Payments</a></li>
</ul>
<p class="menu-label"> Transactions </p>
<ul class="menu-list">
<li><a>Payments</a></li>
<li><a>Transfers</a></li>
<li><a>Balance</a></li>
<li><a>Reports</a></li>
</ul>
</aside>
</div>
<div class="column is-9">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="../..">Bulma</a></li>
<li><a href="../..">Templates</a></li>
<li><a href="../..">Examples</a></li>
<li class="is-active"><a href="#" aria-current="page">Admin</a></li>
</ul>
</nav>
<section class="hero is-info welcome is-small">
{{template "components/header"}}
<div class="hero-body">
<div class="container">
<h1 class="title"> Hello, Admin. </h1>
<h2 class="subtitle"> I hope you are having a great day! </h2>
</div>
</div>
</section>
<section class="info-tiles">
<div class="tile is-ancestor has-text-centered">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">439k</p>
<p class="subtitle">Users</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">59k</p>
<p class="subtitle">Products</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">3.4k</p>
<p class="subtitle">Open Orders</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">19</p>
<p class="subtitle">Exceptions</p>
</article>
</div>
</div>
</section>
<div class="columns">
<div class="column is-6">
<div class="card events-card">
<header class="card-header">
<p class="card-header-title"> Events </p>
<a href="#" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-table">
<div class="content">
<table class="table is-fullwidth is-striped">
<tbody>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
<tr>
<td width="5%"><i class="fa fa-bell-o"></i></td>
<td>Lorum ipsum dolem aire</td>
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">View All</a>
</footer>
</div>
</div>
<div class="column is-6">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Inventory Search
</p>
<a href="#" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" type="text" placeholder="">
<span class="icon is-medium is-left">
<i class="fa fa-search"></i>
</span>
<span class="icon is-medium is-right">
<i class="fa fa-check"></i>
</span>
</div>
</div>
</div>
</div>
<div class="card">
<header class="card-header">
<p class="card-header-title"> User Search </p>
<a href="#" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" type="text" placeholder="">
<span class="icon is-medium is-left">
<i class="fa fa-search"></i>
</span>
<span class="icon is-medium is-right">
<i class="fa fa-check"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
{{end}}
web/templates/pages/home.go.tmpl
{{template "base"}}
{{define "pages/home"}}
<!DOCTYPE html>
<html>
<head>
{{block "meta" .}}
{{end}}
<title>{{block "title" .}} Hello page {{end}}</title>
{{block "css" .}}
{{end}}
{{block "js" .}}
{{end}}
</head>
<body>
<!-- THIS IS HOME PAGE CONTENT -->
</body>
</html>
{{end}}
web/templates/components/header.go.tmpl
{{define "components/header"}}
<h1>I AM A COMPONENT DUDE</h1>
{{end}}
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.