| commit | author | age | ||
| b731b5 | 1 | .. _qtut_static_assets: |
| PE | 2 | |
| b1b922 | 3 | ========================================== |
| PE | 4 | 13: CSS/JS/Images Files With Static Assets |
| 5 | ========================================== | |
| 6 | ||
| 41279d | 7 | Of course the Web is more than just markup. You need static assets: CSS, JS, |
| SP | 8 | and images. Let's point our web app at a directory where Pyramid will serve |
| 9 | some static assets. | |
| b1b922 | 10 | |
| PE | 11 | Objectives |
| 12 | ========== | |
| 13 | ||
| 41279d | 14 | - Publish a directory of static assets at a URL. |
| b1b922 | 15 | |
| 41279d | 16 | - Use Pyramid to help generate URLs to files in that directory. |
| SP | 17 | |
| b1b922 | 18 | |
| PE | 19 | Steps |
| 20 | ===== | |
| 21 | ||
| 22 | #. First we copy the results of the ``view_classes`` step: | |
| 23 | ||
| 24 | .. code-block:: bash | |
| 25 | ||
| 187104 | 26 | $ cd ..; cp -r view_classes static_assets; cd static_assets |
| 2d2ced | 27 | $ $VENV/bin/pip install -e . |
| b1b922 | 28 | |
| 6799b8 | 29 | #. We add a call ``config.add_static_view`` in |
| b1b922 | 30 | ``static_assets/tutorial/__init__.py``: |
| PE | 31 | |
| 32 | .. literalinclude:: static_assets/tutorial/__init__.py | |
| 33 | :linenos: | |
| 34 | ||
| 35 | #. We can add a CSS link in the ``<head>`` of our template at | |
| 36 | ``static_assets/tutorial/home.pt``: | |
| 37 | ||
| 38 | .. literalinclude:: static_assets/tutorial/home.pt | |
| 39 | :language: html | |
| 40 | ||
| 41279d | 41 | #. Add a CSS file at ``static_assets/tutorial/static/app.css``: |
| b1b922 | 42 | |
| PE | 43 | .. literalinclude:: static_assets/tutorial/static/app.css |
| 44 | :language: css | |
| 45 | ||
| a9e8ac | 46 | #. We add a functional test that asserts that the newly added static file is delivered: |
| SP | 47 | |
| 48 | .. literalinclude:: static_assets/tutorial/tests.py | |
| 49 | :language: python | |
| 50 | :pyobject: TutorialFunctionalTests.test_css | |
| 51 | :lineno-match: | |
| 52 | ||
| 53 | #. Now run the tests: | |
| b1b922 | 54 | |
| PE | 55 | .. code-block:: bash |
| 56 | ||
| b9ed3f | 57 | $ $VENV/bin/py.test tutorial/tests.py -q |
| 41279d | 58 | .... |
| a9e8ac | 59 | 5 passed in 0.50 seconds |
| b1b922 | 60 | |
| PE | 61 | #. Run your Pyramid application with: |
| 62 | ||
| 63 | .. code-block:: bash | |
| 64 | ||
| 187104 | 65 | $ $VENV/bin/pserve development.ini --reload |
| b1b922 | 66 | |
| 34e974 | 67 | #. Open http://localhost:6543/ in your browser and note the new font. |
| b1b922 | 68 | |
| 41279d | 69 | |
| b1b922 | 70 | Analysis |
| PE | 71 | ======== |
| 72 | ||
| 73 | We changed our WSGI application to map requests under | |
| 41279d | 74 | http://localhost:6543/static/ to files and directories inside a ``static`` |
| SP | 75 | directory inside our ``tutorial`` package. This directory contained |
| 76 | ``app.css``. | |
| b1b922 | 77 | |
| 41279d | 78 | We linked to the CSS in our template. We could have hard-coded this link to |
| SP | 79 | ``/static/app.css``. But what if the site is later moved under |
| 80 | ``/somesite/static/``? Or perhaps the web developer changes the arrangement on | |
| 81 | disk? Pyramid gives a helper that provides flexibility on URL generation: | |
| b1b922 | 82 | |
| PE | 83 | .. code-block:: html |
| 84 | ||
| 85 | ${request.static_url('tutorial:static/app.css')} | |
| 86 | ||
| 41279d | 87 | This matches the ``path='tutorial:static'`` in our ``config.add_static_view`` |
| SP | 88 | registration. By using ``request.static_url`` to generate the full URL to the |
| 89 | static assets, you both ensure you stay in sync with the configuration and gain | |
| 90 | refactoring flexibility later. | |
| b1b922 | 91 | |
| 41279d | 92 | |
| SP | 93 | Extra credit |
| b1b922 | 94 | ============ |
| PE | 95 | |
| 96 | #. There is also a ``request.static_path`` API. How does this differ from | |
| 97 | ``request.static_url``? | |
| 98 | ||
| 4042c7 | 99 | .. seealso:: :ref:`assets_chapter`, |
| PE | 100 | :ref:`preventing_http_caching`, and |
| 101 | :ref:`influencing_http_caching` | |
