Why is my script reading in files linked in my HTML which aren't being specified when reading in with ioutil.ReadFile() in GoLang?

Issue

I have a GoLang script that is meant to dynamically construct webpages based on an input query in my browser that looks like this http://localhost:8000/blog/post#, the post# portion is what is used to identify which JSON data file to parse into the HTML template I created; for example, if I put http://localhost:8000/blog/post1 then it creates an index.html file from my post1.json file. Currently, my script when run allows me to load a single page in my browser before it exits with the error in my terminal stdout log:

2022/03/18 00:32:02 error: open jsofun.css.json: no such file or directory
exit status 1

this is my current script:

package main

import (
    "encoding/json"
    "html/template"
    "io/ioutil"
    "log"
    "net/http"
    "os"
)

func blogHandler(w http.ResponseWriter, r *http.Request) {
    blogstr := r.URL.Path[len("/blog/"):]

    blogstr = blogstr + ".json"

    // read the file in locally
    json_file, err := ioutil.ReadFile(blogstr)
    if err != nil {
        log.Fatal("error: ", err)
    }

    // define a data structure
    type BlogPost struct {
        // In order to see these elements later, these fields must be exported
        // this means capitalized naming and the json field identified at the end
        Title       string `json:"title"`
        Timestamp   string `json:"timestamp"`
        Main        string `json:"main"`
        ContentInfo string `json:"content_info"`
    }

    // json data
    var obj BlogPost

    err = json.Unmarshal(json_file, &obj)
    if err != nil {
        log.Fatal("error: ", err)
    }

    tmpl, err := template.ParseFiles("./blogtemplate.html")

    HTMLfile, err := os.Create("index.html")
    if err != nil {
        log.Fatal(err)
    }

    defer HTMLfile.Close()

    tmpl.Execute(HTMLfile, obj)

    http.ServeFile(w, r, "./index.html")
}

func main() {
    http.HandleFunc("/blog/", blogHandler)
    log.Fatal(http.ListenAndServe(":8080", nil))
}

I have done some basic debugging and identified that the issue is coming from the lines:

json_file, err := ioutil.ReadFile(blogstr)
    if err != nil {
        log.Fatal("error: ", err)
    }

What confuses me is why the ioutil.ReadFile is also trying to read files linked within my HTML? Shouldn’t the browser be handling that linkage and not my Handler? For reference this is my HTML where the file jsofun.css is linked; the error referenced in my console output shows me my script is trying to access this file as jsofun.css.json during the call to ioutil.ReadFile:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic JSON Events</title>
    <link rel="stylesheet" href="./jsofun.css"></style>
</head>
<body>
    <section id="title">
        <h1 id="text-title">{{.Title}}</h1>
        <time id="timestamp">
            {{.Timestamp}}
        </time>
    </section>
    <nav role="navigation" id="site-nav">
        <ul id="sitemap">
        </ul>
    </nav>
    <main role="main" id="main">
        {{.Main}}
    </main>
    <footer role="contentinfo" id="footer">
        <section id="content-info" role="contentinfo">
            {{.ContentInfo}}
        </section>
        <form id="contact-form" role="form">
        <address>
            Contact me by <a id="my-email" href="mailto:antonhibl11@gmail.com" class="my-email">e-mail</a>
        </address>
        </form>
    </footer>
<script src="./jsofun.js">
</script>
</body>
</html>

I know that I have appended .json to my query string in the line: blogstr = blogstr + ".json", however, I do not see why this would also affect the links in my HTML. Is there something I am missing or why would it be reading links in my HTML template? All I want the ioutil.ReadFile to do is to read my JSON file which is parsed into my template.

EDIT: I wanted to add that when I load the page initially into the browser it loads successfully with my text content from my JSON but fails to have any styling. When I view the source the links also are correct which confuses me why the stylesheet wouldn’t apply because it is in the right directory to be accessible. This is the source when I select view-source in browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic JSON Events</title>
    <link rel="stylesheet" href="./jsofun.css"></style>
</head>
<body>
    <section id="title">
        <h1 id="text-title">Second Post Test</h1>
        <time id="timestamp">
            Friday, March 18th, 12:21AM
        </time>
    </section>
    <nav role="navigation" id="site-nav">
        <ul id="sitemap">
        </ul>
    </nav>
    <main role="main" id="main">
        This is my second post where I am able to use dynamic URL routing
    </main>
    <footer role="contentinfo" id="footer">
        <section id="content-info" role="contentinfo">
            This post was used primarily to test and layout how the rest of my posts will appear.
        </section>
        <form id="contact-form" role="form">
        <address>
            Contact me by <a id="my-email" href="mailto:antonhibl11@gmail.com" class="my-email">e-mail</a>
        </address>
        </form>
    </footer>
<script src="./jsofun.js">
</script>
</body>
</html>

For reference this is an example of how my JSON file looks:

{
    "title" : "Second Post Test",
    "timestamp": "Friday, March 18th, 12:21AM",
    "main": "This is my second post where I am able to use dynamic URL routing",
    "content_info": "This post was used primarily to test and layout how the rest of my posts will appear."
}

Solution

Your Go server is set up to only serve the /blog/ path and it does that by executing the blogHandler. There is nothing else in your Go server that is set up to serve assets like css, js, or image files.

For such things you generally need to register a separate FileServer handler at a separate path. Example:

func main() {
    http.HandleFunc("/blog/", blogHandler)
    // To serve a directory on disk (/path/to/assets/on/my/computer)
    // under an alternate URL path (/assets/), use StripPrefix to
    // modify the request URL's path before the FileServer sees it:
    http.Handle("/assets/", http.StripPrefix("/assets/",
        http.FileServer(http.Dir("/path/to/assets/on/my/computer"))))
    log.Fatal(http.ListenAndServe(":8080", nil))
}

The other thing you need to fix are the links to those asset fiels in the HTML, they should be absolute, not relative.

...
<link rel="stylesheet" href="/assets/jsofun.css"></style>
...
<script src="/assets/jsofun.js">

The above will of course work only if the assets are located in the /path/to/assets/on/my/computer directory, e.g.

/path/to/assets/on/my/computer
├── jsofun.css
└── jsofun.js

You blogHandler is unnecessarily creating a new file for every request without removing it, this has the potential to very quickly fill up your disk to its max capacity. To serve a template you do not need to create a new file, you can instead execute the template directly into the http.ResposeWriter. It is also advisable to parse the template only once, especially in production code, to avoid unnecessary waste of resources:

type BlogPost struct {
    Title       string `json:"title"`
    Timestamp   string `json:"timestamp"`
    Main        string `json:"main"`
    ContentInfo string `json:"content_info"`
}

var blogTemplate = template.Must(template.ParseFiles("./blogtemplate.html"))

func blogHandler(w http.ResponseWriter, r *http.Request) {
    blogstr := r.URL.Path[len("/blog/"):] + ".json"

    f, err := os.Open(blogstr)
    if err != nil {
        http.Error(w, err.Error(), http.StatusNotFound)
        return
    }
    defer f.Close()

    var post BlogPost
    if err := json.NewDecoder(f).Decode(&post); err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    if err := blogTemplate.Execute(w, post); err != nil {
        log.Println(err)
    }
}

Answered By – mkopriva

Answer Checked By – Clifford M. (GoLangFix Volunteer)

Leave a Reply

Your email address will not be published.