htmlcssgoviewengine

Unable to load CSS in Go Server

I'm a newbie in go. While I'm creating a server and connected with html my CSS snd Images are not loading.

My Folder Structure

The file loads as html and shows html code in css file. I got it from this image when I tried to inspect what is the error in Network panel

Here is the code below

package main

import (
    "errors"
    "fmt"
    "html/template"
    "net/http"
)

var tmpl *template.Template

func getHome(w http.ResponseWriter, r *http.Request) {
    fmt.Println("Home Loaded")
    tmpl.ExecuteTemplate(w, "index.html", "Abdullah Nettoor")
}

func getLogin(w http.ResponseWriter, r *http.Request) {
    fmt.Println("Login Loaded")
    tmpl.ExecuteTemplate(w, "login.html", nil)
}

func getSignup(w http.ResponseWriter, r *http.Request) {
    fmt.Println("Signup Loaded")
    tmpl.ExecuteTemplate(w, "signup.html", nil)
}

func postSignup(w http.ResponseWriter, r *http.Request) {
    tmpl.ExecuteTemplate(w, "signup.html", nil)
}

func postLogout(w http.ResponseWriter, r *http.Request) {
    http.Redirect(w, r, "/login", http.StatusSeeOther)
}

func main() {
    tmpl = template.Must(template.ParseGlob("view/template/*.html"))
    // tmpl, _ = template.ParseGlob("view/template/*.html")

    // Create Server
    fmt.Println("Starting Server...")
    mux := http.NewServeMux()

    mux.HandleFunc("/", getHome)

    mux.HandleFunc("/login", getLogin)

    mux.HandleFunc("/signup", getSignup)

    mux.HandleFunc("/logout", postLogout)
    mux.HandleFunc("/signup-post", postSignup)
    mux.Handle("/view/static/", http.FileServer(http.Dir("static")))

    // Start Server
    err := http.ListenAndServe(":3333", mux)
    if errors.Is(err, http.ErrServerClosed) {
        fmt.Println("Server Closed")
    } else if err != nil {
        fmt.Printf("Error starting server: %s", err)
    } else {
        fmt.Println("Server Started on PORT:3333")
    }
}

I've tried adding mux.Handle("/view/static/", http.FileServer(http.Dir("static"))) adding this to call every other file in the directory. But, it still remains as it was before. I also checked Network panel in browser it shows that the files are loading but it is not styling my html

The code of index.html attached below

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="../static/main.css">
</head>

<body class="text-white">
    <img class="body-bg" src="../static/images/bg.jpg" alt="">
    <main class="container-sm d-flex flex-column justify-content-center align-items-center">
        <h1 class="display-1 text-center text-bold mt-5"> Hello, Good morning<br> {{.}}</h1>
        <p class="text-center fs-4 pb-5 pt-2 fw-lighter">Were you expecting something 😅 See you later!</p>
        <form action="/logout" method="post">
            <button type="submit" class="btn btn-labeled btn-outline-light btn-lg">
                <span><i class=" fa fa-sign-out btn-label"></i>Logout</span>
            </button>
        </form>

    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
        crossorigin="anonymous"></script>
</body>

</html>

If there any one know how to load css properly, Hoping help from you...

Solution

  • Issue is Solved. I've changed my link tag into <link rel="stylesheet" type="text/css" href="/view/static/css/style.css"> by explicit mention of the folder structure other than putting dots like this <link rel="stylesheet" type="text/css" href="../static/css/style.css">

    And also added a line in go code to add static files mux.Handle("/view/static/", http.StripPrefix("/view/static/", http.FileServer(http.Dir("view/static/"))))