Search code examples
gorenderergo-templates

golang renderer.HTML not picking javascript file from inside the template

Trying to publish a login page using "github.com/thedevsaddam/renderer" package renderer . Not able to call the .js file from inside the template. When tried inlining javascript it worked fine, but not able to load the .js file.

my file structure is

Project
|
+-main.go
|
+-handlers
| |
| +- routes.go
| |
| +- login.go
+-views
| |
| +- _login.html
| +- login.js

main.go

package main

import (
    "fmt"
    "log"
    "net/http"

    "github.com/gorilla/mux"
    "github.com/higuestssg/handlers"
)

func main() {
    router := mux.NewRouter().StrictSlash(true)

    // This will serve files under http://localhost:8000/static/<filename>
    router.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("views/"))))

    portalRouter := router.PathPrefix("/portal").Subrouter()
    handlers.HandleRoutes(portalRouter)
    fmt.Println("listening at localhost:10001")
    log.Fatal(http.ListenAndServe(":10001", router))
}

routes.go

package handlers

import (
  //"net/http"

  "github.com/gorilla/mux"
)

func HandleRoutes(r *mux.Router){
  r.HandleFunc("/login", loginHandler)
  r.HandleFunc("/healthTest", healthTestHandler)
}

login.go

package handlers

import (
    "fmt"
    "net/http"

    //"github.com/gorilla/mux"
    "github.com/thedevsaddam/renderer"
)

var rnd *renderer.Render

func init() {
    opts := renderer.Options{
        ParseGlobPattern: "./views/*.html",
    }
    rnd = renderer.New(opts)
}

// loginHandler renders login page
func loginHandler(w http.ResponseWriter, r *http.Request) {

    data := struct {
        Val1 string
        Val2 string
    }{
        "test100",
        "test2",
    }
    fmt.Println("login page hit")
    rnd.HTML(w, http.StatusOK, "_login", data)
}

_login.html

{{ define "_login" }}
<!--
https://medium.com/@thedevsaddam/easy-way-to-render-html-in-go-34575f858026
-->
<!DOCTYPE html>
<html lang="en">
<!-- Bootstrap import CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <body>
    <div class="container">
      <div class="starter-template jumbotron text-center">
        <h1>HI GUEST</h1>
        <div class="col-sm-4">
        <p class="lead">Welcome to <strong>HI_GUEST --ssg</strong> page</p>
        </div>
      </div>
    </div><!-- /.container -->
    <div class="row">
      <div class="col-sm-4"><p class="lead" id="idtest1">Test1</p></div>
      <div class="col-sm-4"><p class="lead">Test2</p></div>
      <div class="col-sm-4"><p class="lead"><button type="button" class="btn btn-info btn-lg" name="btn_ip" id="btn_id" onclick="myFunction()">{{.Val1}}</button></p></div>
    </div>
  </body>
  <script type='text/javascript' src='login.js'></script>
</html>
{{ end }}

login.js


function myFunction() 
{
 alert("Hello");
}

$(document).ready(function () {
  alert("Hello");
});

When checked in chrome using viewSource, when clicked on login.js its showing 404 not found

Solution

  • updated _login.html , its working fine with @mkopriva suggestion

    {{ define "_login" }}
<!--
https://medium.com/@thedevsaddam/easy-way-to-render-html-in-go-34575f858026
-->
<!DOCTYPE html>
<html lang="en">
<!-- Bootstrap import CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <body>
    <div class="container">
      <div class="starter-template jumbotron text-center">
        <h1>HI GUEST</h1>
        <div class="col-sm-4">
        <p class="lead">Welcome to <strong>HI_GUEST --ssg</strong> page</p>
        </div>
      </div>
    </div><!-- /.container -->
    <div class="row">
      <div class="col-sm-4"><p class="lead" id="idtest1">Test1</p></div>
      <div class="col-sm-4"><p class="lead">Test2</p></div>
      <div class="col-sm-4"><p class="lead"><button type="button" class="btn btn-info btn-lg" name="btn_ip" id="btn_id" onclick="myFunction()">{{.Val1}}</button></p></div>
    </div>
  </body>
  <script type='text/javascript' src='/static/login.js'></script>
</html>
{{ end }}