Flask extension for connecting and managing webpack assets
Project description
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:
- Bootstrap your Webpack configuration fast.
- Import your assets via
webpack_url_for()
in your templates. - Browser caching via hash tagging.
- Code splitting and dynamic import().
- Remove unused CSS, with the help of
Purgecss
- Compatible with Content-Security-Policy:
e.g. script-src: 'nonce-<random-value>
- Working with CDN, and static host provider such as
Netlify
for making your Webpack build process automated. - 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()
manage_webpack.init_app(app)
Initialize Webpack Config:
- Run
flask manage-webpack --app <your_flask_app>
. This will generate Webpack config files. - In your
app/static
folder, create amanifest.json
file with curly braces insidei.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?
- Put your images to
assets/img/
or to your preferred folder structure. - In HTML, import your image via relative path:
<img src="{{ webpack_url_for('img/something.jpg') }}">
Config Variables:
MANAGE_WEBPACK_MANIFEST_PATH
defaults tostatic/manifest.json
MANAGE_WEBPACK_ASSETS_URL
: Your static url domain name. Defaults toNone
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 likeNetlify
. i.e.https://example.com/manifest.json
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
@bp.route("/reload-manifest")
def reload_manifest():
manage_webpack.reload_manifest()
return redirect('/')
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for Flask-Manage-Webpack-1.3.3.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 8fdb1ac656acdcfe78f7d7c4b5d95f26ec58360487523d5d5cb9d299019445b3 |
|
MD5 | 573fd1b60a0b7a08f5413bdd87aecb0e |
|
BLAKE2b-256 | 0cc7a130a0ae089ca000f83b1e76e4b77df910e943f538a474b813bbb3fce707 |
Hashes for Flask_Manage_Webpack-1.3.3-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 0f91b56770c92eb002552931a412fb3ef0b640a059d75c72fdd385f112fb1d57 |
|
MD5 | 6b8c82aed32c758f76b05f333ce48bfd |
|
BLAKE2b-256 | f4c0a3c8d3c90a576ec6377baba1e29e280b014a9b9ec0c6b0c785816e035a73 |