Using net/http I'm unable to serve css

Getting Help
1

Hi there,

First off, I’m a newbie with golang and with webdev in general.
I’m trying to program a simple website and I’m not able to get the css config right.

.
├── static
│   └── css
│       └── test.css
├── test.go
└── tmpl
    └── test.html

test.go:

package main

import (
	"log"
	"net/http"
	"text/template"
)

func main() {  

  website := func(w http.ResponseWriter, r *http.Request) {
    templ := template.Must(template.ParseFiles("tmpl/test.html"))
    templ.Execute(w, nil)
  }
  
  http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static")))) 
  http.HandleFunc("/test/", website)

  log.Println("Listening on :8081 ...")
  err := http.ListenAndServe(":8081", nil)
  if err != nil {
    log.Fatal(err)
  }
}

test.html:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="“X-UA-Compatible”" content="“ie" ="edge”" />
    <title>Llynx Demo @ IGMR</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />

    <!-- <style> -->
    <!--   [class*="col"] { -->
    <!--     padding: 1rem; -->
    <!--     background-color: #33b5e5; -->
    <!--     border: 2px solid #fff; -->
    <!--     color: #fff; -->
    <!--     text-align: center; -->
    <!--   } -->
    <!---->
    <!--   [class*="con"] { -->
    <!--     padding: 1rem; -->
    <!--     background-color: #9e33e5; -->
    <!--     border: 2px solid #fff; -->
    <!--     color: #fff; -->
    <!--     text-align: center; -->
    <!--   } -->
    <!-- </style> -->

    <link rel="stylesheet" type="text/css" href="static/css/test.css" />
  </head>
  <body>
    <div class="container">
      <h1>HI</h1>
    </div>
  </body>
</html>

And the test.css:

.col {
  padding: 1rem;
  background-color: #33b5e5;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
}
.con {
  padding: 1rem;
  background-color: #9e33e5;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
}

3 Thinks I’ve observed:

  1. The Chrome Dev tool does not show an error that it could not load some css files
  2. If i go on http://localhost:8081/static/css/test.css I see the content of the .css file - thats good, right?
  3. In the test.html: If I write the styling there I can see the div in purple, so the css should not be the issue?

I’m searching for 3 hours now, I hope somebody can give me some hints:)

Thanks!

2

Change this line in your .html file to

href="/static/css/test.css"
3

Here you have an example how to “add” all stuff you place within the public folder.

4

Thanks, but unfortunately this is not working either.

5

I read through all, the file structure is not mentioned nor a finished repo.
Didn’t made it :roll_eyes:

6

I think something is wrong with your html or css code. I copied everything from your example. Just added h1 color: red to css file, changed this slash and everything worked.

7

My file structure is the old classic.

image
image1886×770 52.6 KB

And the file structure is mentioned in the end of each serve folder “./public/css”

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

Thank you guys,
I don’t know what i’ve changed, but it’s working suddenly when I used another pc (did’t touched the project for 2 weeks).