How to include CSS in HTML using Go?

Question

I am playing around with Go, but I can't seem to have the page open up with CSS, when I open the HTML file outside Go, the CSS works perfectly fine, but when I run it through Go, it's never included.

package main

import (
    "fmt"
    "html/template"
    "log"
    "net/http"
    "strings"

    _ "github.com/go-sql-driver/mysql"
)

func sayhelloName(w http.ResponseWriter, r *http.Request) {
    r.ParseForm() //Parse url parameters passed, then parse the response packet for the POST body (request body)
    // attention: If you do not call ParseForm method, the following data can not be obtained form
    fmt.Println(r.Form) // print information on server side.
    fmt.Println("path", r.URL.Path)
    fmt.Println("scheme", r.URL.Scheme)
    fmt.Println(r.Form["url_long"])
    for k, v := range r.Form {
        fmt.Println("key:", k)
        fmt.Println("val:", strings.Join(v, ""))
    }
    fmt.Fprintf(w, "Hello astaxie!") // write data to response
}

func login(w http.ResponseWriter, r *http.Request) {
    fmt.Println("method:", r.Method) //get request method
    if r.Method == "GET" {
        t, _ := template.ParseFiles("Add-Vehicle.html")
        t.Execute(w, nil)
    } else {
        r.ParseForm()
        // logic part of log in
        fmt.Println("username:", r.Form["select"])
        fmt.Println("password:", r.Form["select-1"])
        fmt.Println("username:", r.Form["year"])
        fmt.Println("password:", r.Form["text"])
        fmt.Println("username:", r.Form["dayrate"])
    }
}

func main() {
    http.HandleFunc("/", sayhelloName) // setting router rule
    http.HandleFunc("/login", login)
    http.Handle("/css/", http.FileServer(http.Dir("./css/")))
    err := http.ListenAndServe(":9090", nil) // setting listening port
    if err != nil {
        log.Fatal("ListenAndServe: ", err)
    }
}

Also here is the href on my html file

    <link rel="stylesheet" href="css/nicepage.css" media="screen">
    <link rel="stylesheet" href="css/Add-Vehicle.css" media="screen">

Would anyone be able to help me with this?

The Fool · Answer 1 · 2022-01-24T20:21:53.367

You are using relative path for your CSS links, while you are serving the page from /login and not from /. So the browser is trying to get the files from /login/css/ instead of /css/.

You can fix that, by using an absolute path.

<link rel="stylesheet" href="/css/nicepage.css" media="screen">
<link rel="stylesheet" href="/css/Add-Vehicle.css" media="screen">

See this answer to learn more about relative and absolute path behaviour: https://stackoverflow.com/a/24028813/9208887.

Additionally, you should strip the /css prefix from the request's URL.

fs := http.FileServer(http.Dir("./css"))
http.Handle("/css/", http.StripPrefix("/css", fs))

See this answer to learn why StripPrefix is useful here: https://stackoverflow.com/a/27946132/9208887.

Paperclip · Answer 2 · 2022-01-24T19:48:38.103

The http.FileServer also adds the path of the requested file to the local file search path. So your request is actually requesting a file "css/nicepage.css" inside "css" directory - css/css/nicepage.css.

Something like this would work in your case:

http.Handle("/css/", http.FileServer(http.Dir("./")))

Using root path would be considered bad for such application so web apps usually serve files from a directory specifically assigned for that. Usually this is called "public" and that directory would contain your publicly accessible files e.g. public/css, public/js, etc.

In this case you would serve them with:

http.Handle("/css/", http.FileServer(http.Dir("./public")))

There's a very nicely written answer here, that might help you: Golang. What to use? http.ServeFile(..) or http.FileServer(..)?

How to include CSS in HTML using Go?

2 Answers2