How do I serve CSS and JS in Go

Question

I followed the Go Writing Web Applications tutorial but for whatever reason I am having trouble getting the app to serve CSS and JS. If I run my static page without the Go server the page CSS works fine. When I run the Go server on the other hand the CSS just doesn't work.

Here is what my HTML sort of looks like:

<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../assets/css/custom.css">

then under the body tag:

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>

My file tree looks like this:

go-affect/
├── data
│   └── …
├── static
│   ├── css
│   │   └── …
│   └── js
│   │   └── …
├── tmpl
│   ├── edit.html
│   ├── index.html
│   └── view.html
└── main.go

How do I get my Go application to serve the CSS and JavaScript I need?

EDIT:

The problem has since been solved, here is the working main:

func main() {
    http.HandleFunc("/view/", makeHandler(viewHandler))
    http.HandleFunc("/edit/", makeHandler(editHandler))
    http.HandleFunc("/save/", makeHandler(saveHandler))
    http.HandleFunc("/index/", makeHandler(indexHandler))

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

    http.ListenAndServe(":8080", nil)
}

Here is an example of the handlers I am using:

func indexHandler(w http.ResponseWriter, r *http.Request, title string) {
    p := &Page{Title: title}
    err := templates.ExecuteTemplate(w, "index.html", p)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

Possible duplicate of Include js file in Go template; and With golang webserver where does the root of the website map onto the filesystem? — icza
– icza, Commented Apr 25, 2017 at 6:53
Why is the link in html tag is "/assets/" but in the pic "/static/"? — Huy Ngo
– Huy Ngo, Commented Oct 28, 2018 at 13:42
Can I ask where you put your executable file? I'm having the same problem and I don't know how I should write the file path. — Huy Ngo
– Huy Ngo, Commented Nov 3, 2018 at 10:29
A Wonderful tutorial alexedwards.net/blog/serving-static-sites-with-go — Arun
– Arun, Commented Feb 17, 2020 at 6:46

RayfenWindspear · Accepted Answer · 2019-07-23 17:05:16Z

41

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

Would serve your css directory at /. Of course you can serve whichever directory at whatever path you choose.

You probably want to make sure that the static path isn't in the way of other paths and use something like this.

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

Placing both your js and css in the directory static in your project. This would then serve them at domain.com/static/css/filename.css and domain.com/static/js/filename.js

The StripPrefix method removes the prefix, so it doesn't try to search e.g. in the static directory for static/css/filename.css which, of course, it wouldn't find. It would look for css/filename.css in the static directory, which would be correct.

edited Jul 23, 2019 at 17:05

answered Apr 25, 2017 at 4:06

RayfenWindspear

6,3241 gold badge34 silver badges44 bronze badges

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

8 Comments

bmacrevolution Over a year ago

Where should I place that line of code? In main with all the function handlers or in my function that serves the index template for example

RayfenWindspear Over a year ago

Anytime. Usually before http.ListenAndServe. So probably in your main.

bmacrevolution Over a year ago

Doing it that way does not seem to have worked. I posted some updated code

RayfenWindspear Over a year ago

Use either the /static/ path I added to my answer, or do one for each css and js, e.g. http.Handle("/css/", http.FileServer(http.Dir("css/"))) and http.Handle("/js/", http.FileServer(http.Dir("js/")))

RayfenWindspear Over a year ago

Your code shows you are using http.Dir("/static"). Remove the /. Using it tells Go to look for the directory at the root of your filesystem. No / tells it to look relative to the go application. Admittedly... my example has the slash, so that's my bad (fixed)

|

VerySeriousSoftwareEndeavours · Accepted Answer · 2019-08-19 06:02:15Z

1

I added a link to my apache servers css dir into the head section of my template files. I keep the template and data files used by any go application under dir that the go application is running from. In this instance cgi-bin.

The template uses the css from my apache server assets/css directory :

<link rel="stylesheet" href="/assets/css/main.css" />

go apps run from my cgi-bin dir

sytle sheets are served from my apache assets/css dir

edited Aug 19, 2019 at 6:02

VerySeriousSoftwareEndeavours

1,7634 gold badges33 silver badges64 bronze badges

answered Aug 19, 2019 at 1:13

Lyn Samuel

72 bronze badges

Collectives™ on Stack Overflow

How do I serve CSS and JS in Go

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related