A Flask extension to manage assets with Webpack.

Hey! This repo is no longer supported!

Flask-Webpack has been deprecated in favor of: https://github.com/nickjj/flask-static-digest

The new Flask-Static-Digest extension is easier to use, easier to configure,works with any (or no) asset build tool and is completely stand alone.

Instead of depending on Webpack to handle md5 tagging assets and creating amanifest, Flask-Static-Digest does all of that and now it even gzips yourfiles too.

This makes it a general purpose extension that you can use to make your staticfiles production ready.

This will be the final commit to this project. Farewell Flask-Webpack, you werea good friend!

What is Flask-Webpack?

Managing assets can be a serious burden. Here's just a few things you get byusing this package:

Minify assets
Attach vendor prefixes to your CSS automatically
Optimize image sizes
Leverage the CommonJS module system to organize your Javascript
Compile Markdown
Compile 20+ client side template languages
Compile LESS, SASS and any other CSS pre-processor you can imagine
Compile Typescript, Coffeescript and any other to-javascript language
Compile Ecmascript 6 (ES) down to ES 5
Compile React JSX to JS with hot module reloading
Near instant compile times, ~20-50ms is common on my workstation
Optionally get source maps in development mode
Serve your assets from a tricked out local development asset server
Cache all assets forever because their file names get md5-tagged
The only runtime you need other than Python is NodeJS
Never deal with file watchers again because it's all taken care of for you
And much more...

All of the features above are the direct result of using Webpackto manage your assets. The huge win here besides the obvious is that thefunctionality is outside of this package.

That means you have free reign to pick and choose what you want withouthaving to worry about Flask-Webpack versions. If a new Webpack plugin becomesavailable, you can use it immediately.

What does this package do then?

It sets up a few template tags so you can access the assets inside of yourjinja templates.

It means you can type this:

<img src="{{ asset_url_for('images/hamburger.svg') }}" alt="Hamburger">

...and once your jinja template has been compiled, you will see this:

<img src="images/hamburger.d2cb0dda3e8313b990e8dcf5e25d2d0f.svg" alt="Hamburger">

Now you can happily tell your frontend proxy to cache that hamburger image foran entire year. If you ever change the hamburger, the md5 will change but youdo not need to change any of your templates because the asset_url_fortag knows how to look it up.

Global template tags

asset_url_for(asset_relative_path) to resolve an asset name
javascript_tag(*asset_relative_paths) to write out 1 or more script tags
stylesheet_tag(*asset_relative_paths) to write out 1 or more stylesheet tags

Both the javascript and stylesheet tags accept multiple arguments. If you giveit more than argument it will create as many tags as needed.

Installation

pip install Flask-Webpack

Quick start

from flask import Flaskfrom flask_webpack import Webpackwebpack = Webpack()app = Flask(__name__)webpack.init_app(app)

You can view a complete working example in the test app.

There's also a blog post and short video explaining how to use this extension.

How does it work?

It expects you to have built a manifest file and it handles the rest. You canbuild this manifest file using a plugin I wrote for Webpack. You can find thatplugin here.

This process is done automatically upon starting the dev asset server or buildingyour assets to prepare for a production release. All of that is taken care of inthe webpack.config.js file.

Settings

Flask-Webpack is configured like most Flask extensions. Here's the availableoptions:

WEBPACK_MANIFEST_PATH: default None
- Required: You may consider using ./build/manifest.json, it's up to you.
WEBPACK_ASSETS_URL: default publicPath from the webpack.config.js file
- Optional: Use this asset url instead of the publicPath.
- You would set this to your full domain name or CDN in production.

Learn more

Webpack knowledge

Most of what you'll need to learn is related to Webpack specifically but theexample app in this repo is enough to get you started. Here's a few resourcesto help you get started with Webpack:

Help! My assets do not work outside of development

I see, so basically the problem is you're using the url() function in yourstylesheets and are referencing a relative path to an asset, such as:

src: url('../../fonts/CoolFont.eot')

The above works in development mode because that's where the file islocated but in production mode the asset is not there. The asset_url_fortemplate helper handles all of this for you on the server side but now you needsome assistance on the client side as well.

You have a few options here depending on if you're using CSS, SASS or somethingelse. If you're using straight CSS you will need to pre-prend all of your pathswith a special identifier.

If you were to re-write the example from above, it would now be:

src: url('~!file!../../fonts/CoolFont.eot')

That will automatically get expanded to a path that works in every environment.

If you're using SASS you can create your own function to make things easier towork with on a day to day basis. Something like this should suffice:

@function asset-url($path) {  @return url('~!file!' + $path);}

Now you can call it like this and everything will work:

src: asset-url('../../fonts/CoolFont.eot')

Feel free to make additional helper functions that let you abstract away therelative prefix such as font-url or image-url. It really depends on howyour assets are set up.