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.
- 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.
- 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
- Start Development Server:
npm run dev
- Add New Svelte Templates:
Generates Svelte files in
flask-svelte add-page <template_name>
svelte/<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.
- 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>
- 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.
- Functionality: Facilitates data transfer between Flask and Svelte.
- Access in Svelte: Retrieve Flask data in Svelte templates via
{{ app.data["key"] }}
.
-
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>
.