A python package to create flask project with svelte frontend.
Project description
Enhanced Flask-Svelte Documentation
Welcome to Flask-Svelte, a python package that integrates Svelte with Flask. This integration brings together the best of both worlds: Svelte's reactive frontend capabilities and Flask's robust backend, providing a seamless experience for web application development.
Note: This package is still in development. The API is subject to change.
Key Features
- Svelte Integration with Flask: Effortlessly serve Svelte templates as dynamic components within Flask applications.
- Automatic Live Reloading: Implement livereload for instant browser updates when templates are modified.
- Simplified Project Management: Utilize the CLI for effortless project setup and template handling.
- Use Python data in Svelte: The
render_template
function extends Flask's capability, allowing direct data integration into Svelte templates for dynamic content rendering. - Tailwind CSS Preinstalled: Comes with Tailwind CSS, a utility-first CSS framework for rapid UI development, preconfigured and ready to use.
Getting Started
Installation and Project Setup
- Prerequisites: Install Node.js and Python.
- Install Flask-Svelte:
pip install flask-svelte
- Create a New Project:
flask-svelte create <project_name>
- Navigate to the Project Directory:
cd <project_name>
- Install JavaScript Dependencies:
npm install
Development Workflow
- Start Development Server:
npm run dev
- Add New Svelte Templates:
flask-svelte add-page <template_name>
Generates Svelte files insvelte/<template_name>
. Edit them and see the changes in the browser. Note: Thenpm run dev
command must be restarted for new templates to be recognized.
Important Usage Notes
- Production Build: Use
npm run build
for deployment readiness. Post-build, thesvelte
directory is optional. - Data Integration in Templates: Replace
flask.render_template
withflask_svelte.render_template
for enhanced data passing. Example:from flask_svelte import render_template from app import app @app.route('/') def index(): return render_template('index.html', name='World')
- Accessing Data in Svelte: Retrieve Flask-passed data in Svelte with
{{ app.data["key"] }}
. Example:<h1>Hello {{ app.data["name"] }}!</h1>
Enhanced Documentation
render_template
Function
- Purpose: Replaces Flask's
render_template
for integrating Python and JavaScript. - Usage: Passes variables and data from Flask to Svelte components for interactive web applications.
app.data
Object
- Functionality: Facilitates data transfer between Flask and Svelte.
- Access in Svelte: Retrieve Flask data in Svelte templates via
{{ app.data["key"] }}
.
Command-Line Interface (CLI) Commands
-
Create a New Project:
flask-svelte create <project_name>
Sets up a new Flask-Svelte project environment.
-
Add a New Template:
flask-svelte add-page <template_name>
Adds a new Svelte template to your project, creating necessary files in
svelte/<template_name>
.
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
flask_svelte-1.0.0.tar.gz
(7.3 kB
view hashes)
Built Distribution
Close
Hashes for flask_svelte-1.0.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 6cc407aa274c7d13b102c64242752db4f93bae92f7f49878d0153932608001a9 |
|
MD5 | 8d9527cf527fcc499109f5b8f2ab7d06 |
|
BLAKE2b-256 | 97eea01d4708d29276f463fa339204fd272ae741dd725e9b1fdf28df022bf01a |