Flask Svelte

A python package to create flask project with svelte frontend.

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 in svelte/<template_name>. Edit them and see the changes in the browser. Note: The npm 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, the svelte directory is optional.

Data Integration in Templates: Replace flask.render_template with flask_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>.

Top categories