# Flask-Svelte Documentation
Welcome to Flask-Svelte, a python package that integrates [Svelte](https://svelte.dev/) with [Flask](https://flask.palletsprojects.com/en/1.1.x/). 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
0. **Prerequisites**: Install [Node.js](https://nodejs.org/en/) and [Python](https://www.python.org/downloads/).
1. **Install Flask-Svelte**:
```bash
pip install flask-svelte
```
2. **Create a New Project**:
```bash
flask-svelte create <project_name>
```
3. **Navigate to the Project Directory**:
```bash
cd <project_name>
```
4. **Install JavaScript Dependencies**:
```bash
npm install
```
### Development Workflow
- **Start Development Server**:
```bash
npm run dev
```
- **Add New Svelte Templates**:
```bash
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
1. **Production Build**: Use `npm run build` for deployment readiness. Post-build, the `svelte` directory is optional.
2. **Data Integration in Templates**: Replace `flask.render_template` with `flask_svelte.render_template` for enhanced data passing. Example:
```python
from flask_svelte import render_template
from app import app
@app.route('/')
def index():
return render_template('index.html', name='World')
```
3. **Accessing Data in Svelte**: Retrieve Flask-passed data in Svelte with `{{ app.data["key"] }}`. Example:
```html
<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>`.
Raw data
{
"_id": null,
"home_page": "https://github.com/priyanshu-shubham/flask-svelte",
"name": "flask-svelte",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8,<4.0",
"maintainer_email": "",
"keywords": "flask,svelte,sveltekit,flask-svelte,flask-svelte-cli,flask-svelte-generator,flask-svelte-template",
"author": "Priyanshu Shubham",
"author_email": "priyanshushubham27@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/44/60/d252cd79f9a35fb86465ea91d4ecd087e0b37303b61de132c4fb033f4a42/flask_svelte-1.0.1.tar.gz",
"platform": null,
"description": "# Flask-Svelte Documentation\n\nWelcome to Flask-Svelte, a python package that integrates [Svelte](https://svelte.dev/) with [Flask](https://flask.palletsprojects.com/en/1.1.x/). 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.\n\nNote: This package is still in development. The API is subject to change.\n\n## Key Features\n- **Svelte Integration with Flask**: Effortlessly serve Svelte templates as dynamic components within Flask applications.\n- **Automatic Live Reloading**: Implement livereload for instant browser updates when templates are modified.\n- **Simplified Project Management**: Utilize the CLI for effortless project setup and template handling.\n- **Use Python data in Svelte**: The `render_template` function extends Flask's capability, allowing direct data integration into Svelte templates for dynamic content rendering.\n- **Tailwind CSS Preinstalled**: Comes with Tailwind CSS, a utility-first CSS framework for rapid UI development, preconfigured and ready to use.\n\n## Getting Started\n\n### Installation and Project Setup\n0. **Prerequisites**: Install [Node.js](https://nodejs.org/en/) and [Python](https://www.python.org/downloads/).\n1. **Install Flask-Svelte**: \n ```bash\n pip install flask-svelte\n ```\n2. **Create a New Project**: \n ```bash\n flask-svelte create <project_name>\n ```\n3. **Navigate to the Project Directory**: \n ```bash\n cd <project_name>\n ```\n4. **Install JavaScript Dependencies**: \n ```bash\n npm install\n ```\n\n### Development Workflow\n- **Start Development Server**: \n ```bash\n npm run dev\n ```\n- **Add New Svelte Templates**: \n ```bash\n flask-svelte add-page <template_name>\n ```\n Generates Svelte files in `svelte/<template_name>`. Edit them and see the changes in the browser.\n Note: The `npm run dev` command must be restarted for new templates to be recognized.\n\n### Important Usage Notes\n1. **Production Build**: Use `npm run build` for deployment readiness. Post-build, the `svelte` directory is optional.\n2. **Data Integration in Templates**: Replace `flask.render_template` with `flask_svelte.render_template` for enhanced data passing. Example:\n ```python\n from flask_svelte import render_template\n from app import app\n\n @app.route('/')\n def index():\n return render_template('index.html', name='World')\n ```\n3. **Accessing Data in Svelte**: Retrieve Flask-passed data in Svelte with `{{ app.data[\"key\"] }}`. Example:\n ```html\n <h1>Hello {{ app.data[\"name\"] }}!</h1>\n ```\n\n## Enhanced Documentation\n\n### `render_template` Function\n- **Purpose**: Replaces Flask's `render_template` for integrating Python and JavaScript.\n- **Usage**: Passes variables and data from Flask to Svelte components for interactive web applications.\n\n### `app.data` Object\n- **Functionality**: Facilitates data transfer between Flask and Svelte.\n- **Access in Svelte**: Retrieve Flask data in Svelte templates via `{{ app.data[\"key\"] }}`.\n\n### Command-Line Interface (CLI) Commands\n- **Create a New Project**: \n ```\n flask-svelte create <project_name>\n ```\n Sets up a new Flask-Svelte project environment.\n \n- **Add a New Template**: \n ```\n flask-svelte add-page <template_name>\n ```\n Adds a new Svelte template to your project, creating necessary files in `svelte/<template_name>`.",
"bugtrack_url": null,
"license": "MIT",
"summary": "A python package to create flask project with svelte frontend.",
"version": "1.0.1",
"project_urls": {
"Homepage": "https://github.com/priyanshu-shubham/flask-svelte",
"Repository": "https://github.com/priyanshu-shubham/flask-svelte"
},
"split_keywords": [
"flask",
"svelte",
"sveltekit",
"flask-svelte",
"flask-svelte-cli",
"flask-svelte-generator",
"flask-svelte-template"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "9d3527bdd19fd0620428376c1be07cd3cb83adb0821a3574508ba60fc4b44dd8",
"md5": "4b1dfb8143f12a4798ae9fc5c1cddd07",
"sha256": "85a3b42f36108e2a2939e0509aca3719d2d6999ce21e73fdbdfdecdf85c35f80"
},
"downloads": -1,
"filename": "flask_svelte-1.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "4b1dfb8143f12a4798ae9fc5c1cddd07",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8,<4.0",
"size": 10309,
"upload_time": "2024-01-20T13:28:11",
"upload_time_iso_8601": "2024-01-20T13:28:11.517681Z",
"url": "https://files.pythonhosted.org/packages/9d/35/27bdd19fd0620428376c1be07cd3cb83adb0821a3574508ba60fc4b44dd8/flask_svelte-1.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "4460d252cd79f9a35fb86465ea91d4ecd087e0b37303b61de132c4fb033f4a42",
"md5": "f52f3083ef451fb1fa888a8ba797e445",
"sha256": "f27859aac0da05bf9f39d7860fd65a18b5ba338873d571d2110c323e2d6e43b4"
},
"downloads": -1,
"filename": "flask_svelte-1.0.1.tar.gz",
"has_sig": false,
"md5_digest": "f52f3083ef451fb1fa888a8ba797e445",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8,<4.0",
"size": 7354,
"upload_time": "2024-01-20T13:28:13",
"upload_time_iso_8601": "2024-01-20T13:28:13.234784Z",
"url": "https://files.pythonhosted.org/packages/44/60/d252cd79f9a35fb86465ea91d4ecd087e0b37303b61de132c4fb033f4a42/flask_svelte-1.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-01-20 13:28:13",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "priyanshu-shubham",
"github_project": "flask-svelte",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "flask-svelte"
}
JSON
