Static files¶
As their name suggests, static files are the files that don’t change. In your average app, this includes CSS files, JavaScript files and images. They can also include audio files and other things of that nature.
Organizing your static files¶
We’ll create a directory for our static files called static inside our application package.
How you organize the files in static/ is a matter of personal preference. Personally, I get a little irked by having third-party libraries (e.g. jQuery, Bootstrap, etc.) mixed in with my own JavaScript and CSS files. To avoid this, I recommend separating third-party libraries out into a lib/ folder within the appropriate directory. Some projects use vendor/ instead of lib/.
Serving a favicon¶
The files in our static directory will be served from example.com/static/. By default, web browsers and other software expects our favicon to be at example.com/favicon.ico. To fix this discrepency, we can add the following in the <head> section of our site template.
Manage static assets with Flask-Assets¶
Flask-Assets is an extension for managing your static files. There are two really useful tools that Flask-Assets provides. First, it lets you define bundles of assets in your Python code that can be inserted together in your template. Second, it lets you pre-process those files. This means that you can combine and minify your CSS and JavaScript files so that the user only has to load two minified files (CSS and JavaScript) without forcing you to develop a complex asset pipeline. You can even compile your files from Sass, LESS, CoffeeScript and a bunch of other sources.
Defining bundles¶
Our app has two sections: the public site and the admin panel, referred to as “home” and “admin” respectively in our app. We’ll define four bundles to cover this: a JavaScript and CSS bundle for each section. We’ll put these in an assets module inside our util package.
Flask-Assets combines your files in the order in which they are listed here. If admin.js requires jquery-1.10.2.js, make sure jquery is listed first.
We’re defining the bundles in a dictionary to make it easy to register them. webassets, the package behind Flask-Assets lets us register bundles in a number of ways, including passing a dictionary like the one we made in this snippet. [1]
Since we’re registering our bundles in util.assets , all we have to do is import that module in __init__.py after our app has been initialized.
Using our bundles¶
To use our admin bundles, we’ll insert them into the parent template for the admin section: admin/layout.html.
We can do the same thing for the home bundles in templates/home/layout-.html.
Using filters¶
We can use filters to pre-process our static files. This is especially handy for minifying our JavaScript and CSS bundles.
To use the jsmin and cssmin filters, you’ll need to install the jsmin and cssmin packages (e.g. with pip install jsmin cssmin ). Make sure to add them to requirements.txt too.
Flask-Assets will merge and compress our files the first time the template is rendered, and it’ll automatically update the compressed file when one of the source files changes.
If you set ASSETS_DEBUG = True in your config, Flask-Assets will output each source file individually instead of merging them.
Take a look at some of the other filters that we can use with Flask-Assets.
Templates and Static files in Flask
Templates and static files helps on various aspects of web development.
In previous tutorial, we learned how to run a hello world program in flask but the way we used in the tutorial, can not be used in large projects.
Why templates?
While working on large projects, we need to render large html codes in the browser and if we just return the html code in the previous way then it become very difficult to work with it. Therfore, we save the html code in html files and render in the flask app with the help of Jinja template engine.
So in this tutorial, we will see how to use templates and static files in flask.
Rendering templates
In order to render templates, you need to create a templates subfolder in which you can store templates. By default, the Flask looks for templates in a templates subfolder located inside the applicaion folder.
Here is the code for rendering the templates in Flask.
Exit fullscreen mode
To render templates, we use render_template function. This render_template function integrates the Jinja2 template engine with the application. It takes the filename (template name) as its first argument.Any additional arguments are key/value pairs that represent actual values for variables referenced in the template.
Using variables in templates
Let’s understand the usage of variables in template with the help of example.
Exit fullscreen mode
In the above code, we add an additional argument name which we will use in our template home.html .
Here is the html code of Home.html .
Exit fullscreen mode
The << name >> construct used in the template references a variable that tells the template engine that value of name variable (the addional argument) should be placed here.
Jinja2 can recognize variables of any type. It can recognize complex types such as lists, dictionaries and objects. Following are some more examples of variables used in templates.
Exit fullscreen mode
Static files
In order to make the site more attractive, we need static files. A powerful application cannot be useful without static files like javascript, images and CSS.
To use static files in application you need to create a static subfolder which we store static files.
Name already in use
flask / docs / tutorial / static.rst
- Go to file T
- Go to line L
- Copy path
- Copy permalink
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
The authentication views and templates work, but they look very plain right now. Some CSS can be added to add style to the HTML layout you constructed. The style won’t change, so it’s a static file rather than a template.
Flask automatically adds a static view that takes a path relative to the flaskr/static directory and serves it. The base.html template already has a link to the style.css file:
Besides CSS, other types of static files might be files with JavaScript functions, or a logo image. They are all placed under the flaskr/static directory and referenced with url_for(‘static’, filename=’. ‘) .
This tutorial isn’t focused on how to write CSS, so you can just copy the following into the flaskr/static/style.css file:
Go to http://127.0.0.1:5000/auth/login and the page should look like the screenshot below.
You can read more about CSS from Mozilla’s documentation. If you change a static file, refresh the browser page. If the change doesn’t show up, try clearing your browser’s cache.
Обслуживание статических файлов с помощью Flask в Python
Flask – отличный выбор для создания модульных веб-приложений с использованием Python. В отличие от Django и других аналогов, таких как Ruby on Rails, Flask представляет собой микро-фреймворк. Это означает, что он включает в себя только то, что необходимо для базовой веб-разработки, оставляя вам большую часть выбора, помимо этого минимального подмножества.
Такой подход имеет огромное преимущество в упрощении вашего кода и рабочего процесса, особенно в небольших проектах. Здесь мы покажем вам, как обслуживать статические файлы, такие как JS, CSS и изображения, с помощью Flask.
Убедитесь, что у вас установлен Python 3. Для этого вы можете использовать pyenv, который поможет вам выбрать версии Python. Следуйте этому руководству, чтобы настроить программу с помощью pyenv. Если вы предпочитаете virtualenv, обязательно ознакомьтесь с документацией, но просто убедитесь, что у вас активна среда Python 3.
Прежде чем мы сможем начать обслуживать статические файлы с помощью Flask, нам нужно установить его и запустить простое приложение. Для этого установите Flask с помощью команды:
Теперь мы создадим базовое приложение Flask, которое обслуживает целевую страницу, на которой мы будем отображать классический текст «Hello World».
В этом новом каталоге создайте новый файл, который создает приложение Flask и запускает его. В этом файле мы создаем маршрут Flask, в котором будем отображать приветственное сообщение, используя шаблон.
Теперь давайте создадим шаблон для отображения нашего сообщения. Создайте HTML-файл в папке “serv_static/templates/index.html” со следующим HTML-кодом. Обратите внимание на сообщение переменной Python, переданное из файла serve.py выше.
Теперь мы готовы запустить приложение. Вернувшись в корневой каталог “serv_static”, запустите приложение с помощью команды:
Если сервер запустился правильно, вы получите сообщение о том, что он запущен, и URL-адрес для просмотра приложения. Откройте этот URL-адрес в своем браузере, и теперь вы должны увидеть наше сообщение «Hello, World», отображаемое в браузере.
Flask создает маршруты приложений, используя декораторы, такие как тот, что показан в serve.py выше. Декоратор, такой как @ app.route (“/”), создает новый маршрут по указанному пути. Определение функции ниже содержит логику приложения, которая будет запускаться при получении запроса по этому URL-адресу.
Обслуживание статических файлов
Наиболее распространенные статические файлы, которые вы хотите обслуживать в веб-приложении, – это файлы CSS вашего приложения для стилизации приложения, а также файлы JavaScript, которые добавляют динамическое поведение к странице. В этом разделе мы увидим, как обслуживать файлы CSS и JavaScript, добавляя их в простое приложение, которое мы создали выше.
Статические файлы во Flask имеют особый маршрут. Все URL-адреса приложений, начинающиеся с «/static», по соглашению обслуживаются из папки, расположенной внутри корневой папки вашего приложения.
Это означает, что если мы создадим папку «/static» внутри нашей основной папки «serve_static», мы сможем обслуживать статические файлы, такие как CSS, JS, изображения и другие ресурсы, просто поместив их в эту папку.
Теперь давайте изменим приветственное сообщение на индексной странице нашего приложения, чтобы представить «Магазин Flask», вымышленный магазин, где посетители могут покупать книги Flask.
Во-первых, мы хотим, чтобы шаблон страницы индекса показывал посетителю название магазина, а также список книг, которые продаются. Обновите свой HTML-шаблон в “serv_static_ /templates/index.html”, добавив эти изменения, чтобы он выглядел следующим образом.
Вы заметите, что название страницы теперь «Магазин Flask», и мы включили список книг Flask для продажи. Посетитель должен иметь возможность увидеть на странице этот список книг при посещении домашней страницы нашего приложения магазина.
Взгляните еще раз на заголовок HTML-шаблона. Вы заметите, что теперь мы делаем ссылку на новый файл, а именно на таблицу стилей CSS с именем «style.css». Путь «/static/style.css» показывает, что этот файл находится в нашей папке «/static».
Помните, что Flask автоматически обрабатывает файлы, помещенные в “/static”, как статические файлы, вместо того, чтобы пытаться запустить эти файлы, как исходные файлы Python.
Давайте теперь создадим статическую папку в “serv_static/static”, чтобы содержать все наши статические файлы.
Внутри этой статической папки давайте создадим новый файл «style.css» и добавим следующие правила CSS, чтобы добавить стиль в наше приложение для витрины.
Когда эти правила стиля определены, наше приложение заменит простой белый фон, который мы видели в нашем примере «Hello, World», на более красочный красный фон «firebrick». Мы также определяем характерный белый стиль для текста на странице.
Теперь давайте обновим сообщение, которое мы отображаем на странице. Вернитесь в “serv_stati/serve.py” и обновите переменную сообщения, указав название магазина. Найдите функцию hello() и обновите переменную сообщения следующим образом:
Теперь перезапустите сервер и снова запустите python serve.py. Затем перейдите по URL-адресу приложения по адресу localhost: 5000, и вы увидите наш список книг по Flask.
Обратите внимание, что стиль приложения теперь берется из нашего файла CSS, который обслуживается нашим приложением Flask из каталога «/static».
Если вы еще раз посмотрите на наш шаблон “serv_static/templates/index.html”, перед закрывающим тегом </body> мы вставляем тег сценария JavaScript.
URL-адрес этого скрипта – «/static/scripts.js». Это еще один статический файл, который будет обслуживаться Flask из нашей папки «/static».
Давайте теперь создадим этот файл JavaScript в “serv_static/static/scripts.js”. Содержимым будет некоторый код JavaScript для динамического изменения цвета фона нашего приложения магазина каждую секунду. Это создает драматический эффект, чтобы привлечь внимание к ограниченной по времени распродаже в нашем вымышленном магазине Flask.
Теперь остановите сервер и снова запустите python serve.py. Когда вы заходите в наше приложение в браузере, фон страницы должен мигать и меняться каждую секунду с оттенка красного, это:
К оттенку черного, вот так:
Функция setInterval в нашем коде JavaScript меняет фон каждую секунду в непрерывном временном цикле.
Теперь мы обслуживаем файлы JavaScript и CSS из нашей папки «/static» для стилизации и улучшения поведения нашего приложения.
Если у вас есть дополнительные файлы CSS или JavaScript, вы можете добавить их в папку «/static» таким же образом и ссылаться на них, как мы сделали выше.
Обслуживание файлов JavaScript
Другой распространенный вариант использования статических файлов в веб-приложениях – это обслуживание сторонних библиотек, таких как Backbone.js, Vue.js, Bootstrap или React.
Любая библиотека, которую вы хотите включить, может обслуживаться почти так же, как мы видели выше из нашего каталога «/static».
В качестве примера давайте посмотрим, как включить библиотеку JavaScript Backbone.js в наше приложение.
Хорошая идея при обслуживании сторонних библиотек – разместить их в специальной папке lib или vendor в папке «/static». Вы можете назвать эту стороннюю папку как хотите.
Ключевым моментом, однако, является размещение внешних библиотек в их собственной папке, где вы можете легко обновлять версии или выполнять другое управление отдельно от кода вашего собственного приложения.
Имея это в виду, создайте новую папку в “serv_static/static/lib”. Поскольку мы включаем Backbone.js, загрузите однофайловую версию, а затем поместите ее в новую папку lib внутри нашей папки «/static».
Backbone.js сильно зависит от Underscore.js, другой библиотеки JavaScript, которая предоставляет множество важных утилит. Так что загрузите последнюю версию Underscore.js и поместите ее рядом с Backbone.js в папку «/static/lib».
Теперь мы можем использовать Backbone.js, включив его в наш шаблон страницы и вызвав его функции.
Вернувшись в свой шаблон, в файле “serv_static/templates/index.html” найдите закрывающий тег </ol>. После этого на новой строке создайте новый элемент заголовка, которым мы будем управлять с помощью Backbone.js.
Кроме того, добавьте новые теги сценария перед закрывающим тегом </body>. В эти теги мы включаем Underscore.js и Backbone.js, а также пишем код для обновления DOM с использованием кода Backbone.
Обновленная часть шаблона index.html должна выглядеть следующим образом.
Наш последний тег <script> выше использует Backbone.js. Если вы перезапустите сервер сейчас, вы увидите, что текст на странице внизу показывает правильную версию Backbone.js, которую мы используем.
Если бы мы использовали Vue.js, React или любую другую библиотеку, мы могли бы добавить ее и обслуживать ее статические файлы таким же образом, делая ее доступной для нашего приложения.
Обслуживание изображений и других типов файлов
Другие типы файлов, такие как изображения и даже файлы .txt и .pdf, могут обслуживаться аналогично файлам JS и CSS, которые мы показали ранее. Просто поместите их в “/static” и сделайте ссылку на них.
Давайте посмотрим на пример кода обслуживания изображений. Вот два изображения связанных книг: book1 и book2. Загрузите их и поместите в новую папку в “serv_static/static/images”.
Теперь мы можем добавить раздел «Связанные» книги в наш индексный шаблон, где мы будем отображать изображения этих книг.
Обновите свой шаблон index.html следующим образом:
Теперь, когда вы перезапустите сервер и зайдете в приложение в браузере, вы увидите изображения связанных книг.
Подготовка статических файлов с помощью системы сборки
Одна из самых больших вещей, которых сейчас не хватает в нашей настройке, – это минимизация статических ресурсов, конкатенация JavaScript, CSS, а также другие оптимизации для ускорения работы приложения. Кроме того, в нашей текущей настройке использование препроцессоров и компиляторов, таких как Sass, Coffeescript и Babel, необходимо обрабатывать вручную.
Использование системы сборки, такой как Webpack, Gulp, Brunch или Browserify, помогает автоматизировать этот процесс.
Если вы заинтересованы в изучении этого, вот руководство по бранчу, чтобы добавить бранч в качестве системы сборки для вашего проекта.
Или вы можете просмотреть документацию по предпочитаемой системе сборки, чтобы узнать, как ее настроить и интегрировать в свое приложение Flask.
Обслуживание статических файлов в производственной среде
Запуск вашего кода в производственной среде немного отличается от среды разработки. В производственной среде, в зависимости от вашего приложения, вы можете столкнуться с гораздо более высокими объемами трафика, что может сказаться на вашем сервере.
В производственной среде рекомендуется обслуживать статические файлы с таким сервером, как nginx, чтобы максимально снизить нагрузку на ваш веб-сервер Python. Если вы обслуживаете большое количество файлов, это ускорит ваше приложение.
Кроме того, вы захотите использовать веб-сервер Python производственного уровня, а не встроенный сервер Flask. Хорошими вариантами являются Gunicorn, Gevent и Apache с mod_wsgi.
Заключение
В этой статье мы увидели, как с помощью Flask можно легко обслуживать статические ресурсы. Вы можете использовать JavaScript, CSS, изображения, а также другие статические файлы. Это можно сделать разными способами, самым простым из которых является использование каталога «/static», который Flask будет использовать для обслуживания файлов клиенту.