Microdot v2 and CSS

[PatLub85]

Hi,
I love the simplicity of using microdot, however I can't link a CSS file to the HTML file.
In my ESP32 and Micropython, I have a /static/css directory and in my index.html in the directory /templates:
<link rel="stylesheet" href="/static/css/index.css" />

In my micropython file I have :

@app.route('/')
async def index(request):
    return Template('index.html').render()

The HTML page displays correctly on my iPhone, but the CSS does not.
If I insert the CSS file directly into the HTML page with style tags, it works fine.
Where is my mistake?
Thank you for your help

[bixb922]

Do you have an @app.route for "/static/css/index.css" ? One way is to make a general rule:
@app.route("/static/") for all static files

[ned-pcs]

You don't need to use my code. Just implement your own routine for sending static files.
Here is an (untested!) version of the above without pkg_resources:

# Send static resources from the filesystem or from the frozen filesystem using pkg_resources.
import os
from microdot import Response

STATIC_ROOT = "/static"

def path_exists(path):
    try:
        _ = os.stat(path)
        return True
    except OSError:
        return False

def set_static_root(path):
    global STATIC_ROOT
    STATIC_ROOT = path


def response_for_file(filename: str, allow_gz: bool = False) -> Response:
    """
    Return the Response object for a static file.
    Static files are served from the STATIC_ROOT/<filetype> directory.
    Assumes static files are separated into directories based on their extension.

    :param      filename:  The filename
    :type       filename:  str

    :param      allow_gz:  Whether to allow gzipped files to be served.
    :type       allow_gz:  bool

    :returns:   The response for the file.
    :rtype:     Response
    """
    if ".." in filename:
        return Response(
            body="Not found",
            status_code=404,
            headers={},
            reason="Directory traversal is not allowed",
        )

    # split the filename into parts, and get the extension
    ext = filename.split(".")[-1]
    # get the content-type for the extension
    content_type = Response.types_map.get(ext, "application/octet-stream")
    headers = {}
    headers["Content-Type"] = content_type
    headers["Cache-Control"] = "max-age=86400"
    static_path = f"{STATIC_ROOT}/{ext}/{filename}"
    if allow_gz:
        zipped = static_path + ".gz"
        if path_exists(zipped):
            headers["Content-Encoding"] = "gzip"
            return Response(body=open(zipped, "rb"), status_code=200, headers=headers)
    elif path_exists(static_path):
        return Response(body=open(static_path, "rb"), status_code=200, headers=headers)
    else:
        return Response(body="File not found", status_code=404)

[AppsByDavideV]

Take it easy (even if you have to elaborate it a bit):

# server Routings
@app.route('/')
async def index(request):
    print(request.path)
    return redirect('/main.html')
    
# all other files
@app.route('<path:path>')
async def sendPageOrFile(request, path):
    # if user is logged in, restore timeout
    if brd.currentUser['level']> -1:
        brd.conn['lastServerLogin']=time.ticks_ms()   
    path=request.path
    
    print('Requested: ' + path)
    if '..' in path:
        # directory traversal is not allowed
        return 'Not found', 404
    if '.html' in path :
        # depends on...:
        if brd.currentUser['level']<0:
            if 'about.html' in path:
                pass # -> open about without authentication
            elif 'main.html' in path and brd.Setts['useAuth']==0:
                pass # open main without authentication
            else:
                path = '/login.html' # login required
        
        if fileOrDirExists('/static/html/' + path):
            file=open('/static/html/' + path)
            content=file.read()
            file.close
            #fileManipulation(content,path)
            #return send_file('static/html/' + path)
            return fileManipulation(content,path)
        else:
            return 'Not found', 404
    elif '.css' in path:
        return send_file(path)
    elif '.js'  in path:
        return send_file(path, max_age=86400)  # in seconds
    elif '.ico' in path:
        # fix for favicon
        path='static/html/' + path
        return send_file(path)
    elif fileOrDirExists(path):
        # other files
        return send_file(path)
    else:
        return 'Not found', 404`

in the 'fileManipulation(content,path)' I dinamically change thing in the page, so change it for your needs.

Sorry if the code isn't correctly formatted, something went wrong but still clear, I think
Cheers, Davide

[robert-hh]

For formatting include the file in lines with triple backticks ```.
If the first line is ```python the code will have syntax highlighting. I edited your post accordingly.

[bixb922]

I don't understand what you are proposing
How to do this?

See https://github.com/miguelgrinberg/microdot/blob/main/examples/static/static.py for an example on how to serve static files with Microdot

There are more good examples for Microdot in https://github.com/miguelgrinberg/microdot/blob/main/examples

[AppsByDavideV]

Hi bixb922,
My code above is a practical and extended implementation of the simple example you linked. All my projects have a built in full working webserver, using the code above as core functionality :)

[AppsByDavideV]

Another example for processors with constrained ram...

# check if a file o dir exist 
def fileOrDirExists(filename):
    try:
        os.stat(filename)
        return True
    except OSError:
        return False


# server Routings
@app.route('/')
async def index(request):
    #print(request.path)
    return redirect('/main.html')
    
# all other files
@app.route('<path:path>')
async def sendPageOrFile(request, path):
    
    # if user is logged in, restore timeout
    if brd.currentUser['level']> -1:
        brd.conn['lastServerLogin']=time.ticks_ms()   
    path=request.path
    
    print('Requested: ' + path)
    if '..' in path:
        # directory traversal is not allowed
        return 'Not found', 404
    if '.html' in path :
        # depends on...:
        if brd.currentUser['level']<0:
            if 'about.html' in path:
                pass # -> open about without authentication
            elif 'main.html' in path and brd.Setts['useAuth']==0:
                pass # open main without authentication
            else:
                path = '/login.html' # login required
                
        # second pass:
        if dev.devStatus['error'] or dev.devStatus['warning']:
            path = '/diagnostic.html' # login required
        
        if fileOrDirExists('/static/html/' + path):
            # generate and send page in chuck for low ram capability processors
            async def generatePage(Path):
                with open('/static/html' + path) as f:
                    for line in f:
                        if '$' in line:
                            line=fileManipulation(line,path)
                        yield(line)       
            return generatePage(path)
        else:
            return 'Not found', 404
    elif '.css' in path:
        return send_file(path)
    elif '.js'  in path:
        return send_file(path, max_age=86400)  # in seconds
    elif '.ico' in path:
        # fix for favicon
        path='static/html/' + path
        return send_file(path)
    elif fileOrDirExists(path):
        # other files
        return send_file(path)
    else:
        return 'Not found', 404`

[PatLub85]

I am surprised by yours codes. I'm trying to reproduce the project described here, https://www.donskytech.com/building-a-micropython-wifi-robot-car/, and there is no mention of these static routes.
Curious!
But I will try to find a solution with your comments.

[AppsByDavideV]

Documentation: https://microdot.readthedocs.io/en/latest/

[mattytrentini]

The document you provided does indeed mention static routes and provides code to serve those files. Please search for 'static' within the page you supplied.

[PatLub85]

Hi,
It works. Thank you all for your valuable help.
Here is the code that works for me (HTML/CSS/JS):

from microdot import Microdot,Response,send_file
from template import Template
app = Microdot()
Response.default_content_type = 'text/html'
@app.route('/')
async def index(request):
    return Template('index.html').render()

@app.route('/static/<path:path>')
async def static(request, path):
    if '..' in path:
        # directory traversal is not allowed
        return 'Not found', 404
    return send_file('static/' + path)
app.run(debug=True)

[dbn-b4e]

Hello,

I tried to reproduce with the above but went into troubles.
I tried to have index.html in main root of FS, in static, etc.. What works is vaficon.ico
Really strange. I tried to put style.css at another location, then I can dwonload the file but no way the index.html can retrieve the .css

I added "Not found x" with a number to be sure where it exits. Seems it cannot find the files, while when I do it "by hand" with fileOrDirExists it works for all like a charm.

Surely I missed something big but I am lost, if someone has a hint...?

Thanks!

David

Here is what I used:

from microdot import Microdot, Response, redirect, send_file
from hal import temperature, led_state
import os

#check if a file o dir exist
def fileOrDirExists(filename):
try:
os.stat(filename)
return True
except OSError:
return False

class WebServer:
def init(self, port, debug):
self.app = Microdot()
self.port = port
self.debug = debug
Response.default_content_type = 'text/html'
self.setup_routes()

def setup_routes(self):
    @self.app.route('/')
    async def index(request):
        print(request.path)
        return redirect('/static/html/index.htm')

    # all other files
    @self.app.route('<path:path>')
    async def sendPageOrFile(request, path):
        path=request.path
        
        print('Requested: ' + path)
        if '..' in path:
            # directory traversal is not allowed
            return 'Not found 1', 404
        if '.html' in path :                
            if fileOrDirExists('/static/html/' + path):
                file=open('/static/html/' + path)
                content=file.read()
                file.close
                return send_file('static/html/' + path)
            else:
                return 'Not found 2', 404
        elif '.htm' in path:
            path='static/html/' + path
            return send_file(path)
        elif '.css' in path:
            path='static/html/' + path
            return send_file(path)
        elif '.js'  in path:
            return send_file(path, max_age=86400)  # in seconds
        elif '.ico' in path:
            # fix for favicon
            path='static/html/' + path
            return send_file(path)
        elif fileOrDirExists(path):
            # other files
            return send_file(path)
        else:
            return 'Not found 3', 404

async def start(self):
    await self.app.start_server(port=self.port, debug=self.debug)

[PatLub85]

Hi,
It's been a year since I worked on this project and I don't know if your problem is equivalent to mine.
However, it is important to define the locations where the files are stored

import sys
sys.path.append("/lib/utemplate")
sys.path.append("/static")

My directories

[dbn-b4e]

Hello,
Sorry for late reply? I found the issue...
In my webserver.py I did not understood the different folders. Now it works by placing .js is a folder and modify the path as for favicon. Should be something related to FS access.

Thanks!

[dbn-b4e]

Hello,

Still a stupid question...

Now have SSE working just had to copy full microdot as a folder... Rhaaa

I will post my full test setup in case someone wants a full working stuff with multiple tasts, etc...

[PatLub85]

Be careful, microdot is a rather large file. I transformed it into mpy to save space

[dbn-b4e]

Never did this have to try out how to... Ir. David Baldwin B4E SRL - Administrateur 40, Rue de l'Etang B-1410 Waterloo Belgium Mob: +32 477 56 29 78 <tel://+32 477 56 29 78> Mail: ***@***.*** ***@***.***> VAT : BE0635.630.310 Please consider our environment before printing this e-mail Disclaimer: This message and any attachments thereto are confidential. They may also be privileged or otherwise protected by work product immunity or other legal rules. If you have received it by mistake, please let us know by e-mail reply and delete it from your system; you may not copy this message or disclose its contents to anyone. E-mail transmission cannot be guaranteed to be secure or error free as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or contain viruses. The sender therefore is in no way liable for any errors or omissions in the content of this message, which may arise as a result of e-mail transmission. If verification is required, please request a hard copy. Cet email, ainsi que ses annexes, est confidentiel. Il contient des informations particulières destinées à l'usage exclusif de celui à qui il est adressé. Si ce message est reçu par quelqu'un d'autre que son destinataire, merci de le retourner simplement en y répondant et ensuite de le supprimer de votre ordinateur. Si vous n'êtes la personne à qui ce message est destiné, vous ne pouvez en faire de copie, le faire circuler ou en divulguer l'existence à qui que ce soit. Si le présent message est incomplet ou incorrect, merci de le retourner à son expéditeur.

…

Le 6 mars 2025 à 13:15, PatLub85 ***@***.***> a écrit : Be careful, microdot is a rather large file. I transformed it into mpy to save space — Reply to this email directly, view it on GitHub <#13430 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQGQ4IO4LXDTNJT4NEL6TFD2TA36XAVCNFSM6AAAAABYJ7X4ZWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENBRGM2TAMQ>. You are receiving this because you commented.

[PatLub85]

???

[dbn-b4e]

I meant mpy Ir. David Baldwin B4E SRL - Administrateur 40, Rue de l'Etang B-1410 Waterloo Belgium Mob: +32 477 56 29 78 <tel://+32 477 56 29 78> Mail: ***@***.*** ***@***.***> VAT : BE0635.630.310 Please consider our environment before printing this e-mail Disclaimer: This message and any attachments thereto are confidential. They may also be privileged or otherwise protected by work product immunity or other legal rules. If you have received it by mistake, please let us know by e-mail reply and delete it from your system; you may not copy this message or disclose its contents to anyone. E-mail transmission cannot be guaranteed to be secure or error free as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or contain viruses. The sender therefore is in no way liable for any errors or omissions in the content of this message, which may arise as a result of e-mail transmission. If verification is required, please request a hard copy. Cet email, ainsi que ses annexes, est confidentiel. Il contient des informations particulières destinées à l'usage exclusif de celui à qui il est adressé. Si ce message est reçu par quelqu'un d'autre que son destinataire, merci de le retourner simplement en y répondant et ensuite de le supprimer de votre ordinateur. Si vous n'êtes la personne à qui ce message est destiné, vous ne pouvez en faire de copie, le faire circuler ou en divulguer l'existence à qui que ce soit. Si le présent message est incomplet ou incorrect, merci de le retourner à son expéditeur.

…

Le 6 mars 2025 à 17:38, PatLub85 ***@***.***> a écrit : ??? — Reply to this email directly, view it on GitHub <#13430 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQGQ4IKLN7V6ZS6C2WE6LH32TB2ZDAVCNFSM6AAAAABYJ7X4ZWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENBRGYZTQNA>. You are receiving this because you commented.