Inertia.js integration plugin for Flaxon framework
Project description
Flaxon Inertia
Inertia.js integration plugin for Flaxon framework.
What is Inertia.js?
Inertia.js is a framework that lets you build full-stack applications with a Python backend and modern JavaScript frontend (React, Vue, Svelte) without building a separate REST API. It serves as the "glue" that binds your backend and frontend together.
Features
- 🚀 Full-stack development — Build modern apps with Python backend + JS frontend
- 📦 No API required — Backend and frontend communicate seamlessly
- ⚡ Fast development — No need to maintain separate API endpoints
- 🔄 Partial reloads — Only update what changes
- 📊 Shared data — Automatically share data across pages
- 🎯 Lazy loading — Load data on demand for better performance
- 💬 Flash messages — Easy session-based notifications
- 🖥️ SSR Support — Optional server-side rendering
- 🎨 Framework agnostic — Works with React, Vue, Svelte, and more
Installation
pip install flaxon-inertia
For server-side rendering support:
bash
pip install flaxon-inertia[ssr]
Quick Start
1. Install and Configure Plugin
python
from flaxon import Flaxon
from flaxon_inertia import InertiaPlugin
app = Flaxon("my-app")
app.plugins.load_plugin(InertiaPlugin(
root_template="templates/app.html",
asset_version="v1.0.0",
))
@app.get("/")
async def home():
return inertia.render("Home", {
"title": "Welcome to Flaxon Inertia",
"features": ["Fast", "Modern", "Python"],
})
2. Create Root Template
html
<!-- templates/app.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flaxon Inertia</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app" data-page="{{ page | tojson }}"></div>
<script src="/js/app.js"></script>
</body>
</html>
3. Setup Frontend
javascript
// app.js
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => import(`./pages/${name}.vue`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
4. Create Pages
vue
<!-- pages/Home.vue -->
<script setup>
defineProps({
title: String,
features: Array,
})
</script>
<template>
<div>
<h1>{{ title }}</h1>
<ul>
<li v-for="feature in features" :key="feature">
{{ feature }}
</li>
</ul>
</div>
</template>
Configuration
Environment Variables
bash
# Asset version for cache busting
INERTIA_ASSET_VERSION=v1.0.0
# SSR configuration
INERTIA_SSR_ENABLED=true
INERTIA_SSR_HOST=localhost
INERTIA_SSR_PORT=13714
# Root template location
INERTIA_ROOT_TEMPLATE=templates/app.html
With Flaxon Config
python
app = Flaxon("my-app", config={
"INERTIA_ROOT_TEMPLATE": "templates/app.html",
"INERTIA_ASSET_VERSION": "v1.0.0",
"INERTIA_SSR_ENABLED": True,
"INERTIA_SSR_HOST": "localhost",
"INERTIA_SSR_PORT": 13714,
})
plugin = InertiaPlugin.from_config(app.config)
app.plugins.load_plugin(plugin)
Advanced Usage
Shared Data
Share data across all pages:
python
from flaxon_inertia import share
@share("user")
def get_user(request):
"""Share user data across all pages."""
return request.session.get("user")
@share("notifications")
async def get_notifications(request):
"""Share notifications across all pages."""
return await notification_service.get_for_user(request.user)
# Or directly in plugin config
app.plugins.load_plugin(InertiaPlugin(
root_template="templates/app.html",
shared_data={
"app_name": "My App",
"user": get_user,
"notifications": get_notifications,
}
))
Lazy Props
Load data only when needed:
python
from flaxon_inertia import lazy
@app.get("/dashboard")
async def dashboard(request):
return inertia.render("Dashboard", {
# Loaded immediately
"user": request.user,
# Loaded on demand (partial reload)
"stats": lazy(lambda: get_dashboard_stats()),
"recent_activity": lazy(lambda: get_recent_activity()),
"notifications": lazy(lambda: get_notifications()),
})
Flash Messages
Show temporary notifications:
python
@app.post("/users")
async def create_user(request):
data = await request.json()
user = await create_user(data)
return inertia.redirect(
"/users",
flash={"success": f"User {user.name} created!"}
)
@app.post("/login")
async def login(request):
if not await authenticate(request):
return inertia.redirect(
"/login",
flash={"error": "Invalid credentials"}
)
return inertia.redirect(
"/dashboard",
flash={"success": "Welcome back!"}
)
Server-Side Rendering (SSR)
Enable SSR for better SEO and performance:
python
app.plugins.load_plugin(InertiaPlugin(
root_template="templates/app.html",
ssr_enabled=True,
ssr_host="localhost",
ssr_port=13714,
))
Start the SSR server:
bash
node ssr.js
Custom User Mapper
Map Inertia page data to your app's user model:
python
def map_user(google_user):
"""Map Google user to app user for Inertia."""
return {
"id": google_user.id,
"name": google_user.name,
"email": google_user.email,
"avatar": google_user.picture,
}
# Use with OAuth plugin
@app.get("/auth/google/callback")
async def google_callback(request):
# ... OAuth flow ...
user = map_user(google_user)
return inertia.redirect(
"/dashboard",
flash={"success": f"Welcome {user['name']}!"}
)
Routes
Route Method Description
Any GET/POST Inertia handles routing via frontend
All routes are handled by Inertia's client-side routing. The backend only needs to render the initial page and handle form submissions.
Testing
bash
# Run all tests
pytest
# Run with coverage
pytest --cov=flaxon_inertia
# Run specific test
pytest tests/test_response.py -v
Frontend Examples
React
jsx
import { createRoot } from 'react-dom/client'
import { createInertiaApp } from '@inertiajs/react'
createInertiaApp({
resolve: name => import(`./pages/${name}.jsx`),
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />)
},
})
Vue 3
javascript
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => import(`./pages/${name}.vue`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
Svelte
javascript
import { mount } from 'svelte'
import { createInertiaApp } from '@inertiajs/svelte'
createInertiaApp({
resolve: name => import(`./pages/${name}.svelte`),
setup({ el, App, props }) {
mount(App, { target: el, props })
},
})
Security Best Practices
✅ Use CSRF protection for form submissions
✅ Validate all input data
✅ Use secure cookies for sessions
✅ Sanitize data before passing to frontend
✅ Keep asset versions unique per deployment
Roadmap
Version Features
0.1.0 Basic Inertia integration, response handling, shared data
0.2.0 Partial reloads, lazy props, flash messages
0.3.0 Server-side rendering (SSR) support
0.4.0 Vite/Webpack integration helpers
0.5.0 TypeScript type definitions
0.6.0 CSRF protection built-in
Contributing
Fork the repository
Create a feature branch
Add tests for new features
Ensure all tests pass
Submit a pull request
License
MIT License - See LICENSE file for details.
Support
📚 Documentation
🐛 Issue Tracker
💬 Discussions
🌐 Inertia.js Website
Related Plugins
flaxon-sentry - Sentry error tracking
flaxon-oauth-google - Google OAuth authentication
flaxon-jinax - Jinja2 template integration
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
flaxon_inertia-0.1.0.tar.gz
(22.5 kB
view details)
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file flaxon_inertia-0.1.0.tar.gz.
File metadata
- Download URL: flaxon_inertia-0.1.0.tar.gz
- Upload date:
- Size: 22.5 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.12.10
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
70910944d24c77bea9602b3b77b50a63d8ab543bc7b95d3453fb7f709d8bdaf7
|
|
| MD5 |
129f285c23a0a904c242833f4dab1195
|
|
| BLAKE2b-256 |
e98562a3baa1f3e287b592dfa31d3eff56489647dbafc467f007f150ef3fd16e
|
File details
Details for the file flaxon_inertia-0.1.0-py3-none-any.whl.
File metadata
- Download URL: flaxon_inertia-0.1.0-py3-none-any.whl
- Upload date:
- Size: 15.5 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.12.10
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
982ebaa6d124faf3e530ebbafb5302310fe4c4298e7688ca543aee658d619498
|
|
| MD5 |
d25f20e2f0192008db99cf92ac5493ca
|
|
| BLAKE2b-256 |
70c1e5908646181c75166d639f0de2c1d4cec715a5bfa4d4c1303e957798c006
|
