Integrates Laravel Mix with Flask
Project description
Flask-Mix
Flask-Mix extends Flask by adding a mix()
template helper that can be used to
write the path to an asset managed by Laravel Mix into a template.
For those unfamiliar with Laravel mix, the library is described as an "elegant wrapper around Webpack for the 80% use case". See https://laravel-mix.com for more information.
Installation
pip install Flask-Mix
Quick Start
Extend a Flask App with Flask-Mix
from flask import Flask
from flask_mix import Mix
mix = Mix()
app = Flask(__name__, static_url_path='', static_folder='static')
mix.init_app(app)
Use Mix in Templates
Use the mix()
template helper to get a versioned path to an asset.
For example, this:
<link rel="stylesheet" href="{{ mix('/css/app.css') }}" />
Will output this:
<link rel="stylesheet" href="/css/app.css?id=875403388f63c4da5686" />
Manage Assets with Laravel Mix
- In the project root, along side the
static
andtemplates
directories, create anassets
directory. - Add a
package.json
file to theassets
directory and install the dependencies for Laravel Mix:npm i -D laravel-mix cross-env
. - Add a
webpack.mix.js
file to theassets
directory and configure it to ingest source files from theassets
directory and build them to thestatic
directory. - Add the scripts below to the you
package.json
file.
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
If you follow this method, you will need to add the --prefix
flag to all npm
commands. Provide the relative path to the assets directory after the --prefix
flag. For example, npm install --prefix assets
.
To build assets for dev, run npm run dev --prefix assets
or npm run watch --prefix assets
.
To build assets for production, run npm run prod --prefix assets
.
It's recommended to ignore the static assets built by Laravel Mix in your
.gitignore
file and to build these assets from source for both development
and production.
See the working example in this repository for a simple project setup.
Settings
Flask-Mix can be configured with the following options:
MIX_ASSETS_BASE_URL
- Default:
''
- Optional: Provide a full domain if assets are on another domain, e.g. CDN
- May be automatically set if running Laravel Mix in hot mode
- Default:
MIX_MANIFEST_PATH
- Default:
os.path.join(app.static_folder, 'mix-manifest.json'))
- Required: This file is generated by Laravel Mix and needs to be read for versioning.
- Default:
MIX_HOT_PATH
- Default:
os.path.join(app.static_folder, 'hot'))
- Required: This file is generated by Laravel Mix and needs to be read for hot mode.
- Default:
Example
This repository contains a demo that you can refer to for project setup. You can take it for a spin to see how Flask, Flask-Mix, and Laravel Mix work together.
Follow these steps to get going:
- Install Python dependencies:
pip install -r example/requirements.txt
- Install frontend dependencies:
npm install --prefix example/assets
- Build frontend assets and watch for changes:
npm run dev --prefix example/assets
- Run the web app:
python -m example.app
- View the web app in your browser:
open http://localhost:5000
Credits
This library was based off of flask-webpack and flask-manage-webpack.
License
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.