Skip to content
This repository
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 92 lines (60 sloc) 2.579 kb

13: CSS/JS/Images Files With Static Assets

Of course the Web is more than just markup. You need static assets: CSS, JS, and images. Let's point our web app at a directory where Pyramid will serve some static assets.

Objectives

  • Publish a directory of static assets at a URL
  • Use Pyramid to help generate URLs to files in that directory

Steps

  1. First we copy the results of the view_classes step:

    $ cd ..; cp -r view_classes static_assets; cd static_assets
    $ $VENV/bin/python setup.py develop
    
  2. We add a call config.add_static_view in ``static_assets/tutorial/__init__.py:

    System Message: ERROR/3 (<string>, line 31)

    Unknown directive type "literalinclude".

    .. literalinclude:: static_assets/tutorial/__init__.py
     :linenos:
    
    
  3. We can add a CSS link in the <head> of our template at static_assets/tutorial/home.pt:

    System Message: ERROR/3 (<string>, line 37)

    Unknown directive type "literalinclude".

    .. literalinclude:: static_assets/tutorial/home.pt
     :language: html
    
    
  4. Add a CSS file at static_assets/tutorial/static/app.css:

    System Message: ERROR/3 (<string>, line 43)

    Unknown directive type "literalinclude".

    .. literalinclude:: static_assets/tutorial/static/app.css
     :language: css
    
    
  5. Make sure we haven't broken any existing code by running the tests:

    $ $VENV/bin/nosetests tutorial
    
  6. Run your Pyramid application with:

    $ $VENV/bin/pserve development.ini --reload
    
  7. Open http://localhost:6543/ in your browser and note the new font.

Analysis

We changed our WSGI application to map requests under http://localhost:6543/static/ to files and directories inside a static directory inside our tutorial package. This directory contained app.css.

We linked to the CSS in our template. We could have hard-coded this link to /static/app.css. But what if the site is later moved under /somesite/static/? Or perhaps the web developer changes the arrangement on disk? Pyramid gives a helper that provides flexibility on URL generation:

${request.static_url('tutorial:static/app.css')}

This matches the path='tutorial:static' in our config.add_static_view registration. By using request.static_url to generate the full URL to the static assets, you both ensure you stay in sync with the configuration and gain refactoring flexibility later.

Extra Credit

  1. There is also a request.static_path API. How does this differ from request.static_url?

System Message: ERROR/3 (<string>, line 89)

Unknown directive type "seealso".

.. seealso:: :ref:`assets_chapter`,
   :ref:`preventing_http_caching`, and
   :ref:`influencing_http_caching`
Something went wrong with that request. Please try again.