Skip to main content
Python Software Foundation 20th Year Anniversary Fundraiser  Donate today!

Flask extension for connecting and managing webpack assets

Project description

Build Status PyPI Dependabot Badge

What is Flask-Manage-Webpack?

A Flask extension that connect and manage your webpack generated assets. Flask-Manage-Webpack reads a manifest.json file auto-generated by webpack-manifest-plugin, and out of the box it made possible to:

  1. Bootstrap your Webpack configuration fast.
  2. Import your assets via webpack_url_for() in your templates.
  3. Browser caching via hash tagging.
  4. Code splitting and dynamic import().
  5. Remove unused CSS, with the help of Purgecss
  6. Compatible with Content-Security-Policy: e.g. script-src: 'nonce-<random-value>
  7. Working with CDN, and static host provider such as Netlify for making your Webpack build process automated.
  8. Extending the functionality by using Webpack.

Quick start

Install: pip install Flask-Manage-Webpack

from flask import Flask
from flask_manage_webpack import FlaskManageWebpack

app = Flask(__name__)

# Register Extension
manage_webpack = FlaskManageWebpack()

Initialize Webpack Config:

  • Run flask manage-webpack --app <your_flask_app>. This will generate Webpack config files.
  • In your app/static folder, create a manifest.json file with curly braces inside i.e. { }

Run Webpack: npm start

For more info, checkout the demo app inside example folder.

How to import assets in HTML?

Import your main stylesheet to HTML:

<link rel="stylesheet" href="{{ webpack_url_for('main_css.css') }}">

Import your main JavaScript to HTML:

<script id="main_js" src="{{ webpack_url_for('main_js.js') }}"></script>

What about images, and other files?

  1. Put your images to assets/img/ or to your preferred folder structure.
  2. In HTML, import your image via relative path: <img src="{{ webpack_url_for('img/something.jpg') }}">

Config Variables:

  1. MANAGE_WEBPACK_MANIFEST_PATH defaults to static/manifest.json
  2. MANAGE_WEBPACK_ASSETS_URL: Your static url domain name. Defaults to None
  3. MANAGE_WEBPACK_MANIFEST_URL: Your absolute manifest.json url. This is useful if you wish to host your manifest.json file in a remote server, and if you like to automate your Webpack build process by hosting it to such service like Netlify. i.e.

In Production:

How to reload your manifest file? When you add another asset or make changes, webpack-manifest-plugin insert mappings of your new asset build files in the manifest.json. In development mode when you made changes in your assets, this plugin automatically reload and re-fetch the manifest file, but in production this is not ideal to fetch the manifest file in every requests. So when you added a new asset (i.e. image), you have to tell Flask-Manage-Webpack to reload the manifest.

from .extensions import manage_webpack

def reload_manifest():

    return redirect('/')

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for Flask-Manage-Webpack, version 1.4.1
Filename, size File type Python version Upload date Hashes
Filename, size Flask_Manage_Webpack-1.4.1-py3-none-any.whl (14.4 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size Flask-Manage-Webpack-1.4.1.tar.gz (9.7 kB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring DigiCert DigiCert EV certificate Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page