Servir recursos en el servidor HTTP

02-01-2025
Tiempo de lectura: 1 minutos

Al crear una plantilla HTML para mostrar en el servidor http, el estilado los podemos crear en ficheros CSS independientes, sin necesidad de insertar los estilos en la plantilla HTML.

Plantilla HTML

Contexto

Plantilla HTML

Para el proyecto de servidor de ficheros utilizaré un par de plantillas HTML para servir en el navegador. El estilado de estas plantillas lo realizaré con un estilos predefinidos en un archivos CSS. La estructura de directorios para la parte web es la siguiente:

    ├── web/
    │   ├── static/
    │   │   ├── css/
    │   │   ├── js/
    │   │   └── ...
    │   └── templates/
    │       ├── index.html
    │       └── ...

En la planilla HTML incluiremos la referencia a la hoja de estilos, como se hace normalmente, para sustituir los tags style.

<link rel="stylesheet" type="text/css" href="../static/css/main.css" />

Pero esto no funcionará tal cual está. Necesitamos que el paquete http gestione la carga de los ficheros, creando un handle para servir ficheros. Al montar el handle para el directorio ./web/static lo hacemos para todos los ficheros de recursos, por lo que todos los ficheros css, js, etc, deberán estar bajo /static.

fs := http.FileServer(http.Dir("./web/static"))
http.Handle("/static/", fs)

Lo que le estamos indicando es que sirva los ficheros que se encuentran en la ruta ./web/static y que lo utilice como raíz del servidor web. Entonces, al incluir una hoja de estilos, usaremos esta ruta:

<link rel="stylesheet" type="text/css" href="/web/static/css/main.css">

Como la ruta enviada al request es la ruta completa, para que se sirvan los ficheros desde el punto de montaje, tendremos que eliminar la parte ./web/static/, de lo contrario la ruta sería /static/./web/static/css/main.css, que no es correcta. Utilizamos el método StripPrefix().

http.Handle("/static/", http.StripPrefix("/web/static/", fs))

Contexto

Finalmente, podemos utilizar el contexto para parametrizar la ruta que utilice la plantilla HTML. Definimos unas constantes:

const (
	htmlFilesPath = "web/static/templates/"
	webPathImages = "web/static/images"
	webPathCSS    = "web/static/css"
)

Preparamos la estructura que define el contexto:

type Context struct {
	Title      string // Título para la página
	Directory  string // Directorio actual
	Parent     string // Directorio padre
	Files      Files  // Lista de ficheros
	RootURL    string // URL raíz para localizar css y js
	Admin      bool   // Si es administrador
	WebPathIMG string // Ruta para los ficheros de imagen
	WebPathCSS string // Ruta para los ficheros css
	NumFiles   int    // Número de ficheros
	NumDirs    int    // Número de directorios
}

Y lo pasamos al contexto para procesar la plantilla :

	templates := template.Must(template.New("serverPage").Parse(htmltemplate))
	context := Context{title, dir, parent, fileList, rootURL, false, webPathImages, webPathCSS, nFiles, nDirs}
    if err := templates.Execute(w, context); err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }

En la plantilla HTML modificamos la línea de carga del fichero de estilos con la variable de contexto correspondiente:

<link rel='stylesheet' type='text/css' href='{{ .WebPathCSS }}/main.css'>