CODEWITHSUNDEEP
htmlcssgo
Little Max
Little Max

Reputation: 67

How to run html with css using golang

everyone, I have a problem with including css in html files through golang file. The output on the local server is only the html file but no css, how can I fix it?

Maybe problem with the way I use template package, so could you explain how to make routing differently? Example: When you go http://localhost:8080/login and it would show login.html. I saw net/http documentation about it but either I'm blind or I just try to found wrong things there. All files are in the same directory

welcome.html

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
    <link rel="stylesheet" href="style.css" >
</head>

<body>
    <link rel="stylesheet" href="style.css">
<form action="">
    <center><h1>Enter</h1></center>
        <div class="group">
            <label for="">Login:</label>
            <input type="text">
        </div>
        <div class="group">
            <label for="">Password:</label>
            <input type="password">
        </div>
    <div class="group">
            <center><button>Come in</button></center>
        </div>
    <center><a href="regist.html" class="link">Registration</a></center>
    </form>

</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
body
{
    font-family: "Comic Sans MS";
    background-image: url(images/bg.jpg);
    background-repeat: repeat ;
    background-size: 80px 80px ;
}
h1
{
margin: 0;
text-transform: uppercase;
padding-bottom: 5px;
border-bottom: 3px solid rgba(58,87,15,0.80);
}
form 
{
    margin : 0 auto;
    background: rgba(123,170,52,0.76);
    width: 450px;
    height: 350px;
    padding: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}
.group
{
    margin: 16px ;
    padding: 5px;

}
label
{
    padding-left: 10px;
    text-transform: uppercase;
}
input
{
    margin-top: 5px;
    height: 30px;
    width: 400px;
    border-radius:20px/20px;
    border: none;
    padding-left: 15px;
    font-size: 18px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}

input:focus{
    border: 2px solid #264503;
    transform: translateX(15px);
    width: 385px;
}
button{
    font-family: "Comic Sans MS";
    cursor: pointer;
    padding: 10px 20px;
    height: 40px;
    color:aliceblue;
    background: rgba(21,73,3,1.00);
    border: none;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}
button:hover{
    font-weight: bold;
    transform: scale(1.1);
}

.link{
    font-family: "Comic Sans MS";
    cursor: pointer;
    padding: 10px 20px;
    height: 40px;
    color:aliceblue;
    background: rgba(21,73,3,1.00);
    border: none;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
    text-decoration: none; 

}

goFile.go

package main

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

func welcome(w http.ResponseWriter, r *http.Request) {

    tmpl := template.Must(template.ParseFiles("welcome.html"))

    tmpl.Execute(w, nil)
}

func login(w http.ResponseWriter, r *http.Request) {
    tmpl := template.Must(template.ParseFiles("login.html"))

    tmpl.Execute(w, nil)
}

func main() {
    http.HandleFunc("/", welcome)
    http.HandleFunc("/login", login)

    fmt.Println("Listening...")
    http.ListenAndServe(":8080", nil)
}

**The output is following: ** output

Summarize: How to display page with css using golang net/http or html/template packages? How to do routing between pages properly? Sorry for mistakes. Thanks in advance, guys!

Upvotes: 3

Views: 5686

Answers (1)

xarantolus
xarantolus

Reputation: 2029

Your Go server doesn't know that it should serve style.css because you never told it to. If you move that file to an assets/ subdirectory, you can register a handler to serve that directory:

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

Also see this answer.

Upvotes: 9

Related Questions