A simple package for adding a dev server to your flask app that automatically compiles the tailwindcss of the templates on file save and triggers a browser reload to sync the changes on the fly.
This package is available on PyPI, you can install it using pip or other package manager of your choice.
pip install flask-livetwIts a good practice to add as a development dependency. You can do this by adding the package to your requirements-dev.txt file or the "dev dependencies" of your package manager.
flask-livetwTo start using this package, go to your project folder or the folder where you want to develop. Then run the following command to initialize the package.
livetw initFor default values use the
-dor--defaultflag.
Then where you have your flask app add the following configuration to enable the live reload feature.
import os
...
app.config["LIVETW_DEV"] = os.getenv("LIVETW_ENV") == "development"When running the flask without livetw dev during development remember to set the LIVETW_DEV to True in your flask app configuration to enable the live reload feature.
app.config["LIVETW_DEV"] = TrueFor more information on the configuration options see the Configuration section.
Each command has its own help page, you can use the -h or --help flag to see the available options.
livetw devBy default the command starts:
- a flask server in debug mode
- a live reload websocket server
- a tailwindcss in watch mode
This command sets the enviroment variable LIVETW_ENV to development. This is useful for conditional code execution.
Builds the Tailwind CSS for the templates into a single CSS file.
livetw buildBy default, the built Tailwind CSS file will be minified to reduce the file size. You can disable this feature by using the --no-minify flag.
livetw build --no-minifyInitializes the package in the current directory. Its the command used in Initialization.
livetw initAfter initialization, a pyproject.toml file will be created if it does not exist. In this file under the [tool.flask-livetw] section
This is an example of a configuration file with the default values:
[tool.flask-livetw]
flask_root = "src"
static_folder = "static"
template_folder = "templates"
template_glob = "**/*.html"
base_layout = "layout.html"
livetw_folder = ".dev"
flask_app = "app"As a file tree, the configuration would look like this:
🌳 project_folder/
┣ 📁 src/
┃ ┣ 📁 static/
┃ ┃ ┣ 📁 .dev/
┃ ┃ ┗ ...
┃ ┣ 📁 templates/
┃ ┃ ┣ 📄 layout.html
┃ ┃ ┗ ...
┃ ┗ ...
┃ 📄 app.py
┣ 📄 pyproject.toml
┗ ...The root folder of the flask application. All paths are relative to this folder.
Default is "src".
The argument --app passed to flask to discover the application. For more information see the Flask Application Discovery documentation.
Default is "app".
The folder where the static files are stored relative to the flask_root.
Default is "static".
The folder where the templates are stored relative to the flask_root.
Default is "templates".
The glob pattern to search for templates to build the Tailwind CSS. Must be relative to the template_folder.
Default is "**/*.html".
For more information see the Tailwindcss configuring source paths documentation.
The layout that is shared among all templates. This file is used to inject the Tailwind CSS and the live reload script. If it isn't shared among all templates, the Tailwind CSS and the live reload script won't be injected into the templates.
Default is "layout.html".
The folder where flask-livetw stores the related files.
It contains:
global.css: The global CSS file for the application.live_reload.js: The live reload script for the application.tailwind_development.css: The Tailwind CSS file for the application during development.
Default is ".dev".
The global CSS file for the application relative to the livetw_folder.
Default is "global.css".
The production CSS file for the application relative to the static_folder.
Default is "tailwind_production.css".
The host for websocket server for the live reload functionality. If set must be manually sync on the live reload script for the client.
Default is "127.0.0.1".
The port for websocket server for the live reload functionality. If set must be manually sync on the live reload script for the client.
Default is 5678.
The host for the Flask application.
Default is "127.0.0.1".
The port for the Flask application.
Default is 5000.
The patterns to exclude python scripts from the Flask application. This is useful to exclude files from triggering the flask server to reload.
Contributions are welcome, feel free to submit a pull request or an issue.