Python CherryPy calling HTML file

Question

I'm using CherryPy with Python, and I'm quite new to it all. Eventually I will be using JQuery too, so following an example online, I have the below, which is calling the html correctly.

My issue is, that although it's calling my html, I am not sure what to do with my CSS and images that I have with it. I've tried calling them as normal from the html, but I have not had any luck.

def index(self):
    return file('index.html')

 if __name__ == '__main__':
 conf = {
     '/': {
         'tools.sessions.on': True,
         'tools.staticdir.root': os.path.abspath(os.getcwd())
     },
     '/generator': {
         'request.dispatch': cherrypy.dispatch.MethodDispatcher(),
         'tools.response_headers.on': True,
         'tools.response_headers.headers': [('Content-Type', 'text/plain')],
     },
     '/static': {
         'tools.staticdir.on': True,
         'tools.staticdir.dir': './public'
     }
 }

webapp = StringGenerator()
webapp.generator = StringGeneratorWebService()
cherrypy.quickstart(webapp, '/', conf)

within my html I have the normal <link href="/static/css/style2.css" rel="stylesheet"> but it isn't working.

My file structure is - with public and css being a folder:

fitbit.py fitbit.html - public - css style2.css

So it's calling the fitbit.html correctly, but within the html, I cannot get the css and image. Any help as to how to call it would be greatly appreciated.

Tasos Vogiatzoglou · Accepted Answer · 2015-03-08 12:59:47Z

3

The url of the resource is relative to the url you've requested, not on the actual path of the files. So the css href should be href="media/fitbit.css"

Edit (some code):

Application code (app.py) is

import cherrypy
from os.path import abspath

def app():
    return file("media/index.html")
app.exposed = True

CP_CONF = {
        '/media': {
            'tools.staticdir.on': True,
            'tools.staticdir.dir': abspath('./media') # staticdir needs an absolute path
            }
        }

if __name__ == '__main__':
    cherrypy.config.update({'server.socket_port': 8082})
    cherrypy.quickstart(app, '/', CP_CONF)

Index.html is

<html>
<head>
<link rel="stylesheet" type="text/css" href="media/style.css">
</head>

<body>
This is the body
</body>

</html>

Directory structure is

Project Dir
    app.py
    /media
         index.html
         style.css

The main points are

Staticdir needs an absolute path and you have to be careful with the mappings. To simplify things, here, static url root is the same with the directory name
Static assets urls are relative to the root url e.g. media/style.css

edited Mar 8, 2015 at 12:59

answered Mar 8, 2015 at 11:56

Tasos Vogiatzoglou

2,45316 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Navvy Over a year ago

I've tried loads of different file paths, and none are working. Edited question to a different version with the same problem. Worst thing about this one is it's an example from the CherryPyDocs

Navvy Over a year ago

Still exactly the same

Tasos Vogiatzoglou Over a year ago

With the code above ? It can't be, you are doing something wrong.

Ryosuke Hujisawa · Accepted Answer · 2019-07-05 14:31:35Z

You guys don't have to think about directory structure btw

Like

├── index.html
├── about-page.html
├── app.py
├── assets
│   ├── css
│   │   ├── animate.css
│   │   ├── bootstrap.css
│   │   ├── color1.css
│   │   ├── color10.css
│   │   ├── color11.css
│   │   ├── color12.css

It works $ Python3 /Users/me/Desktop/html-template/app.py

import cherrypy
from os.path import abspath

def app():
    return open("index.html")
app.exposed = True

CP_CONF = {
        '/': {
            'tools.staticdir.on': True,
            'tools.staticdir.dir': abspath('./') # staticdir needs an absolute path
            }
        }

if __name__ == '__main__':
    cherrypy.config.update({'server.socket_port': 8082})
    cherrypy.quickstart(app, '/', CP_CONF)

Collectives™ on Stack Overflow

Python CherryPy calling HTML file

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related