DEV Community

Cover image for TV Channel Website: Static Assets
Sokhavuth TIN
Sokhavuth TIN

Posted on

1 1

TV Channel Website: Static Assets

GitHub: https://github.com/Sokhavuth/TV-Channel
Vercel: https://khmerweb-tv-channel.vercel.app/

In Bottle.py, to be able to use static assets such as font, picture, JavaScript, and CSS files, we need to set a route to a folder to store those static files

The name of the static folder could be anything we like, however, people like to name it as "public" folder in the root directory. And the best place to set the route to this folder is in the entry point file "index.py". Moreover, in this folder, we can create as many sub-folders as we need to store different kind of files.

# index.py

from bottle import static_file, get
from routes.frontend import index


app = index.app

@app.get('/static/<filepath:path>')
def staticFile(filepath):
    return static_file(filepath, root="public")


###################################################################
import socket
host = socket.getfqdn()    
addr = socket.gethostbyname(host)
if(addr == '127.0.1.1'):
    app.run(host='localhost', port=8000, debug=True, reloader=True)

###################################################################
Enter fullscreen mode Exit fullscreen mode

After the route to static assets is set, we can use different kind of static files as below:

<!--views/base.tpl-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>TV Channel Website</title>
        <script src="/static/scripts/jquery.js"></script>
        <link href="/static/images/sitelogo.png" rel="icon" />
        <link href="/static/fonts/setup.css" rel="stylesheet" />
        <link href="/static/styles/base.css" rel="stylesheet" />
    </head>
    <body>
        Hello World!
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode
/* public/styles/base.css*/

:root{
    --body-font: 14px/1.5 Vidaloka, OdorMeanChey;
    --background-dark: #541616;
    --background: #c64242;
    --background-light: #f7c2c2;
    --foreground: #fce4e4;
    --color: white;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: #ff60ac;
}

a:hover{
    opacity: 0.7;
}

.region{
    max-width: 1100px;
    margin: 0 auto;
}

body{
    background: var(--background-light);
    font: var(--body-font);
    color: var(--color);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more