Loading css in python web app using jinja2

Question

I'm trying to make a little bioinformatics web app. I had it working with CGI, I am trying to tweak it so I can serve it on pythonanywhere or heroku.

The problem I am having is that the stylesheet and javascript aren't loading. I'm pretty new to programming, but I have searched extensively before posting. I removed a lot of the heft from the app to isolate the problem. The app's directory now looks like:

/app
 main.html
 main.css
 main.js
 WSGI_app.py

The code in WSGI_app.py looks like:

from wsgiref.simple_server import make_server
import jinja2

def application( environ, start_response ):
    templateLoader = jinja2.FileSystemLoader( searchpath="./" )
    env = jinja2.Environment( loader=templateLoader )
    template = env.get_template( 'main.html' )
    template = template.render()
    start_response("200 OK", [( "Content-Type", "text/html" )])
    yield(template.encode( "utf8" ))

httpd = make_server('localhost', 8051, application)
httpd.serve_forever()

The top of main.html looks like:

<!doctype html>
<html lang="en">
 <head>
    <meta charset="utf-8" />
    <title>Chimera Quest</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="./main.css" />
    <script type="text/javascript" src="./main.js"></script>
</head>

I've tried replacing "./main.css" with "/main.css" and "main.css".

My browser's console reads:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8051/main.css".

Does anyone have see anything here? I'm totally out of ideas.

Graham Dumpleton · Accepted Answer · 2016-08-25 06:01:54Z

2

If you are not using a WSGI server that also provides support for hosting static files, such as mod_wsgi with Apache, the best thing to do is to use a WSGI middleware to handle serving up static files. The main such WSGI middleware people use is called Whitenoise.

https://pypi.python.org/pypi/whitenoise

answered Aug 25, 2016 at 6:01

Graham Dumpleton

58.7k6 gold badges128 silver badges142 bronze badges

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

3 Comments

Joefaa Over a year ago

Thank you so much Graham! That did the trick. I have so much to learn, especially regarding the server side of things. I am working my way towards Apache and the like, at this point I'm just trying to spin up a little development server to work the kinks out of this app. Also, in trying to learn how mod_wsgi/Apache handles this differently, I stumbled into your name. Nice to meet you. Looks like I came to the right place!

conrad Over a year ago

By the way, on pythonanywhere, you actually don't need to use whitenoise to serve the static files. Just setup a static file mapping under the webapps dashboard and they will automatically offload static files to a separate thread that serves up files from the location specified (instead of tying up your own workers to serve the file).

Joefaa Over a year ago

Thanks Conrad! Good to know. It seems I need to serve this particular app elsewhere, probably Heroku, because pythonanywhere won't let me shell out to run a java program, but I appreciate the tip.

Collectives™ on Stack Overflow

Loading css in python web app using jinja2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related