golang include javascript file when template is rendered

Question

I've got 3 pages: index.hml, admin.html and host.html. I've got javascript on the pages inside script tags. I want to move all the javascript to one file, and have that available on each page.

I've tried linking to the JS file from my html pages like:

<script src="static/app.js" type= "text/javascript"></script>

but I keep getting the error:

Uncaught SyntaxError: Unexpected token <

I've tried playing around with this src path, including moving the app.js file to the same level as the html file, and changing src to "app.js" but that still gives the same error message.

This makes me think it's due to how the server is rendering the files (using a ServeMux).

my code is:

func requestHandler(tpl *template.Template) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        tpl.Execute(w, r)
    })
}

func main() {
    flag.Parse()
    user := template.Must(template.ParseFiles("index.html"))
    admin := template.Must(template.ParseFiles("admin.html"))
    host := template.Must(template.ParseFiles("host.html"))
    router := http.NewServeMux()
    router.Handle("/", requestHandler(user))
    router.Handle("/admin", requestHandler(admin))
    router.Handle("/host", requestHandler(host))
    log.Fatal(http.ListenAndServe(":8081", router))
}

I've searched SO and tried many things including:

http.Handle("/js", http.FileServer(http.Dir("static/")))

with a javascript file inside static/app.js however this just renders my index page with no JS loaded. I can't seem to get a JS file to load into the page.

I've also tried reading the JS file, changing the content type and writing the JS file to the writer like so:

        data, err := ioutil.ReadFile("app.js")
    if err != nil {
        fmt.Println("error: ", err)
        return
    }
    w.Header().Add("Content Type", "application/javascript")
    w.Write(data)

however this just renders all the text to the page with the JS not running, and the text not being renderd as HTML. On the page I see:

alert("loaded");<!DOCTYPE html>
<html>
<head>
<title>Example</title>

index.html header is:

<!DOCTYPE html>
<html>
<head>
<title>Chat Example</title>    
</script>
<script src="static/app.js" type= "text/javascript"></script>

I feel there's got to be an easier way to load the JS. This is attempt 2 with more explanation, code and examples of what I tried.

I just use script tags: <script type="text/javascript">$(function() {...})</script> I'm not trying to import the JS from this page because I've tried that many times and can't get it to work — jj1111
– jj1111, Commented May 1, 2018 at 15:25

Adrian · Accepted Answer · 2018-05-01 15:56:17Z

1

You have to reference the script in your HTML:

<html>
    <head>
        <script src="/js/app.js"></script>
        ...
    </head>
    <body>...</body>
</html>

Also note that in order to serve a whole directory, the path registered in the mux should have a trailing slash:

http.Handle("/js/", http.FileServer(http.Dir("static/")))

edited May 1, 2018 at 15:56

answered May 1, 2018 at 15:23

Adrian

47.2k6 gold badges121 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

jj1111 Over a year ago

I've tried this many times but I always get the error: Uncaught SyntaxError: Unexpected token <. I've tried changing the src path many ways and still cant get it to work.

Adrian Over a year ago

That error wasn't mentioned in the question... there's not enough code or context to go on to provide any more info than this. Can you update the question with enough detail to reproduce the issue?

jj1111 Over a year ago

well I ended up not trying to import the JS from the HTML, so I didn't get this error, and therefore didn't write about it. I figured I can't include JS like this because it's a golang template rendering through a servemux, but I can't say for sure. Either way, thanks for helping.

Adrian Over a year ago

This is the normal way to include an external JS file in an HTML page.

Adrian Over a year ago

Also your mention of serving http.Handle("/js", http.FileServer(http.Dir("static/"))) implies that this is how you're including the JS in the page.

|

Collectives™ on Stack Overflow

golang include javascript file when template is rendered

1 Answer 1

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Related