golang and external CSS

6,513 views
Skip to first unread message

Sankar

unread,
Jun 3, 2012, 1:38:11 PM6/3/12
to golan...@googlegroups.com
Hi,

I have a index.html and a sway.css files in my directory.

The index.html has a reference to the .css file, using the link tag. The index.html when opened in the browser directly, the CSS properties display fine. However, when I try to view the same file via a Go webapp using:

template.Must(template.ParseFiles("index.html")).Execute(w, nil)

the CSS is not applied. The barebones HTML is displayed without the CSS properties. I have even added the "sway.css" as part of the ParseFiles api, but the CSS is not applied. If I pass the .css as the first parameter to the template.ParseFiles the HTML is not displayed, but just the .css contents are displayed.

What should I do to get the .css properties applied ? 

Thanks.

Rémy Oudompheng

unread,
Jun 3, 2012, 1:45:29 PM6/3/12
to Sankar, golan...@googlegroups.com
The browser asks the HTTP server for the files (index.html and
sway.css): you have to configure the server to serve these files,
using the appropriate handler and, for example http.ServeFile.

If your server serves dynamic content, a common practice is to serve
the static files from a separate directory, or if you just want to
serve plain files, the template package should not be necessary. see a
example for FileServer:
http://golang.org/pkg/net/http/#example_FileServer

Rémy.

DisposaBoy

unread,
Jun 3, 2012, 1:46:20 PM6/3/12
to golan...@googlegroups.com
Add a handler to serve the external files as well. http://golang.org/pkg/net/http/#FileServer 

Sankar P

unread,
Jun 3, 2012, 1:54:13 PM6/3/12
to DisposaBoy, golan...@googlegroups.com
This solves the problem.

But visiting / in the browser, lists the files in the app's working
directory. Is there a better way to apply CSS or disable file-listing
when visiting / directly ??

--
Sankar P
http://psankar.blogspot.com

DisposaBoy

unread,
Jun 3, 2012, 1:59:36 PM6/3/12
to golan...@googlegroups.com, DisposaBoy


On Sunday, June 3, 2012 6:54:13 PM UTC+1, Sankar wrote:
set your handler to match the css file path directly. Look at the example that uses http.StripPrefix. Alternatively, my preferred method is to use a dedicated subdeirectory e.g. /assets to store files

Sankar P

unread,
Jun 3, 2012, 2:09:05 PM6/3/12
to DisposaBoy, golan...@googlegroups.com
Thanks a lot :-)

benn

unread,
Jun 20, 2012, 12:26:13 AM6/20/12
to golan...@googlegroups.com
Do you mind posting up a sample solution. for some wierd reason I have not been able to get this to work

Sankar P

unread,
Jun 20, 2012, 4:49:31 AM6/20/12
to benn, golan...@googlegroups.com
> Do you mind posting up a sample solution. for some wierd reason I have not
> been able to get this to work
>

Here you go: golang templates External CSS demo

~/Documents/curios/external-css-golang-demo $ ls -R
http.go    index.html resources

./resources:
index.css
~/Documents/curios/external-css-golang-demo $ cat http.go
package main

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

func handler(w http.ResponseWriter, r *http.Request) {
template.Must(template.ParseFiles("index.html")).Execute(w, nil)
}

func main() {
http.HandleFunc("/", handler)
http.Handle("/resources/", http.StripPrefix("/resources/", http.FileServer(http.Dir("resources"))))
http.ListenAndServe (":8080", nil);
}
~/Documents/curios/external-css-golang-demo $ cat index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/index.css" />
</head>
<body>
Hello World
</body>
</html>
~/Documents/curios/external-css-golang-demo $ cat resources/*
body {
background:black;
color:white;
}
~/Documents/curios/external-css-golang-demo $

HTH

jason

unread,
Jun 20, 2012, 3:57:39 PM6/20/12
to golan...@googlegroups.com
An app I created a month or so ago has similar functionality to what you're looking for an example of.

It creates three different URL path handlers,
* / - for index.html, HttpHandler#initServeHomeHndlr
* /ws - for websocket connection HttpHandler#initServeGbWsHndlr
* /assets/ - All static files are serviced from here, HttpHandler#initServeStaticHndlr

Each path handler has a specific role, and they each operate independent of the others.

benn

unread,
Jun 20, 2012, 8:05:13 PM6/20/12
to golan...@googlegroups.com
Thanks, that was useful. I managed to get mine working, however your solutions looks much simpler.

balakri...@spritle.com

unread,
Apr 1, 2015, 11:34:23 AM4/1/15
to golan...@googlegroups.com
Hi ,
       I also facing same issue, but now I correct it ,Check that bellow steps 

1. first you have to create css folder in templates 

                             
2.In server.go you have to past bellow code

//for  link  load resources for (ex: js and css)
fs := http.FileServer(http.Dir("templates"))
http.Handle("/css/", fs)
    http.Handle("/js/", fs) 

3.In html page you have to past bellow code 

<style type="text/css" media="screen">
@import url("/css/style.css");
</style>
Reply all
Reply to author
Forward
0 new messages