CODEWITHSUNDEEP
pythonhtmlbottle
GuardianAngel02
GuardianAngel02

Reputation: 91

Error 404 - Getting Stylesheet Working in Bottle (Python Webframework)

I'm using bottle (the python webframework) to familiarize myself with html, js and css and using localhost to access the site. I can't quite get the css file to be applied to the site that the templates link to. Sometimes it works, but when I edit the file, it doesn't update and even loses the file and can't find it, even after restarting the server. The Console gives the 404 error (file not found), even though I have not moved it.

I first noticed the issue when the CSS wouldn't update in the browser when I refreshed. After clearing out the cache every time I edited, I found the 404 not found issue. I've validated the css file to check if a synthax error was the issue. It came back clean. I redownloaded the bottle.py file in case it needed an update. Still the same result. I also triple checked the link path, even tried to put them all into the same folder with no change.

Here is my file structure:

project folder
    static
        css
            main.css
    views
        home.tpl
    bottle.py
    server.py
    start.bat (starts the server)

Here is the code in server.py

from bottle import route, run, template

@route('/')
def home():
    return template('home')

run(host='localhost', port=8080, debug='True', reloader='True')

Here is the template home.tpl:

<!DOCTYPE html>
<html>
<head>
<title>Bottle Site</title>
<link rel="stylesheet" type="text/css" href="/static/css/main.css" />
</head>
<body>

    <div id="wrapper">

        <div id="header">
            <h1>Header!</h1>
        </div>

        <div id="navigation">
            <ul>
                <li><a href="/">Home</a></li>
            </ul>
        </div>

        <div id="section">
            Section text!
        </div>

        <div id="footer">
            &copy; 2019 - <b href="#" id="dev"><a href="about">Footer/b></a>
        </div>

    </div>

</body>
</html>

I'd like to reliably be able to apply the css to the site without it crashing and sometimes not finding the file. Whenever I paste a fresh copy of my css file and start the server, it works fine until I try and change the file (a background color, for example. Nothing syntax breaking) but it doesn't update. when I clear the cache, it turns into a plane html file and the console reads:

"GET /static/css/main.css HTTP/1.1" 404 764

Upvotes: 3

Views: 625

Answers (2)

eatmeimadanish
eatmeimadanish

Reputation: 3907

I also like to use whitenoise with bottle. 

from whitenoise import WhiteNoise
...

botapp = WhiteNoise(botapp)
botapp.add_files(staticfolder, prefix='static/')

Upvotes: 1

GuardianAngel02
GuardianAngel02

Reputation: 91

I just figured it out.

In the server.py file, you apparently need a:

@route('/static/<filename:path>')
def send_static(filename):
    return static_file(filename, root='./static/')

to give the server a route that it can access and find the files (i think).

So in the templates, to show it where they are, you can say:

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

And it will work fabulously every time. :)

Why without the route it sometimes found the file and sometimes not will forever be a mystery of computer science.

Routes are hard.

Have a nice day! :)

Upvotes: 2

Related Questions