# Inertia.js FastAPI Adapter
<!-- TOC -->
* [Inertia.js FastAPI Adapter](#inertiajs-fastapi-adapter)
* [Installation](#installation)
* [Configuration](#configuration)
* [Examples](#examples)
* [Usage](#usage)
* [Set up the dependency](#set-up-the-dependency)
* [Rendering a page](#rendering-a-page)
* [Rendering assets](#rendering-assets)
* [Sharing data](#sharing-data)
* [Flash messages](#flash-messages)
* [Flash errors](#flash-errors)
* [Redirect to an external URL](#redirect-to-an-external-url)
* [Redirect back](#redirect-back)
* [Enable SSR](#enable-ssr)
* [Frontend documentation](#frontend-documentation)
* [For a classic build](#for-a-classic-build)
* [For a SSR build](#for-a-ssr-build)
* [Performance note](#performance-note)
<!-- TOC -->
## Installation
You can install the package via pip:
```bash
pip install fastapi-inertia
```
## Configuration
You can configure the adapter by passing a `InertiaConfig` object to the `Inertia` class.
The following options are available:
| key | default | options | description |
|--------------------|------------------------|-----------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| environment | development | development,production | The environment to use |
| version | 1.0.0 | Any valid string | The version of your server |
| json_encoder | InertiaJsonEncoder | Any class that extends json.JSONEncoder | The JSON encoder used to encode page data when HTML is returned |
| manifest_json_path | "" | Any valid path | The path to the manifest.json file. Needed in production |
| dev_url | http://localhost:5173 | Any valid url | The URL to the development server |
| ssr_url | http://localhost:13714 | Any valid url | The URL to the SSR server |
| ssr_enabled | False | True,False | Whether to [enable SSR](#enable-ssr). You need to install the `requests` package, to have set the manifest_json_path and started the SSR server |
| use_typescript | False | True,False | Whether to use TypeScript |
| use_flash_messages | False | True,False | Whether to use [flash messages](#flash-messages). You need to use Starlette's SessionMiddleware to use this feature |
| flash_message_key | messages | Any valid string | The key to use for [flash errors](#flash-errors) |
| use_flash_errors | False | True,False | Whether to use flash errors |
| flash_error_key | errors | Any valid string | The key to use for flash errors |
## Examples
You can see different full examples in the [following repository](https://github.com/hxjo/fastapi-inertia-examples).
## Usage
### Set up the dependency
This Inertia.js adapter has been developed to be used as a FastAPI dependency.
To use it, you first need to set up the dependency, with your desired configuration.
`inertia_dependency.py`
```python
from fastapi import Depends
from typing import Annotated
from inertia import InertiaConfig, inertia_dependency_factory, Inertia
inertia_config = InertiaConfig(
# Your desired configuration
)
inertia_dependency = inertia_dependency_factory(
inertia_config
)
InertiaDependency = Annotated[Inertia, Depends(inertia_dependency)]
```
You can then access the `InertiaDependency` in your route functions, and use it to render your pages.
### Rendering a page
To render a page, you can use the `render` method of the `Inertia` class. It takes two arguments:
- The name of the page
- The data to pass to the page
`main.py`
```python
from fastapi import FastAPI, Depends
from inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler
from inertia_dependency import InertiaDependency
app = FastAPI()
app.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)
@app.get('/', response_model=None)
async def index(inertia: InertiaDependency) -> InertiaResponse:
return inertia.render('Index', {
'name': 'John Doe'
})
```
### Rendering assets
As your front-end framework likely references assets that are not served by FastAPI,
you need to mount a static directory to serve these assets.
`main.py`
```python
import os
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from inertia_dependency import inertia_config
app = FastAPI()
webapp_dir = (
os.path.join(os.path.dirname(__file__), "..", "webapp", "dist")
if inertia_config.environment != "development"
else os.path.join(os.path.dirname(__file__), "..", "webapp", "src")
)
app.mount("/src", StaticFiles(directory=webapp_dir), name="src")
app.mount(
"/assets", StaticFiles(directory=os.path.join(webapp_dir, "assets")), name="assets"
)
```
### Sharing data
To share data, in Inertia, is basically to add data before even entering your route.
This is useful, for example, to add a user to all your pages that expects your user to be logged in.
`main.py`
```python
from fastapi import FastAPI, Depends
from inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler
from inertia_dependency import InertiaDependency
app = FastAPI()
app.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)
def current_user(inertia: InertiaDependency):
inertia.share(user={
'name': 'John Doe'
})
@app.get('/', response_model=None, dependencies=[Depends(current_user)])
async def index(inertia: InertiaDependency) -> InertiaResponse:
"""
Because of the dependency, and as we are sharing the user data, the user data will be available in the page.
"""
return inertia.render('Index')
```
### Flash messages
With the inertia dependency, you have access to a `flash` helper method that allows you to add flash messages to your pages.
This is useful to display messages to the user after a form submission, for example.
Those messages are called `flash` messages as they are only displayed once.
You need to have set `use_flash_messages` to `True` in your configuration to use this feature.
You need to have the `SessionMiddleware` enabled in your application to use this feature.
`main.py`
```python
from fastapi import FastAPI, Depends
from starlette.middleware.sessions import SessionMiddleware
from inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler
from inertia_dependency import InertiaDependency
app = FastAPI()
app.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)
app.add_middleware(SessionMiddleware, secret_key="secret")
@app.get('/', response_model=None)
async def index(inertia: InertiaDependency) -> InertiaResponse:
inertia.flash('Index was reached successfully', category='success')
return inertia.render('Index')
```
### Flash errors
If you handle form submissions in your application, and if you do all validation at the pydantic level,
a malformed payload will raise a `RequestValidationError` exception.
You can use the `inertia_request_validation_exception_handler` to handle this exception and display the errors to the user.
It supports error bags, so you can display multiple errors at once.
If the request is not from Inertia, it will fallback to FastAPI's default error handling.
In order to use this feature, you need to have set `use_flash_errors` to `True` in your configuration.
You also need to have the `SessionMiddleware` enabled in your application to use this feature.
`main.py`
```python
from fastapi import FastAPI, Depends
from pydantic import BaseModel, model_validator
from typing import Any
from fastapi.exceptions import RequestValidationError
from starlette.middleware.sessions import SessionMiddleware
from inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler, inertia_request_validation_exception_handler
from inertia_dependency import InertiaDependency
app = FastAPI()
app.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)
app.add_exception_handler(RequestValidationError, inertia_request_validation_exception_handler)
app.add_middleware(SessionMiddleware, secret_key="secret")
class Form(BaseModel):
name: str
@model_validator(mode="before")
@classmethod
def name_must_contain_doe(cls, data: Any):
if 'Doe' not in data.name:
raise ValueError('Name must contain Doe')
@app.post('/', response_model=None)
async def index(data: Form, inertia: InertiaDependency) -> InertiaResponse:
return inertia.render('Index')
```
### Redirect to an external URL
If you want to redirect the user to an external URL, you can use the `location` method of the `Inertia` class.
It takes one argument: the URL to redirect to.
`main.py`
```python
from fastapi import FastAPI, Depends
from inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler
from inertia_dependency import InertiaDependency
app = FastAPI()
app.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)
@app.get('/', response_model=None)
async def index(inertia: InertiaDependency) -> InertiaResponse:
return inertia.location('https://google.fr')
```
### Redirect back
If you want to redirect the user back (for example, after a form submission), you can use the `back` method of the `Inertia` class.
It will use the `Referer` header to redirect the user back.
If you're on a `GET` request, the status code will be `307`. Otherwise, it will be `303`.
That ways, it will trigger a new GET request to the referer URL.
`main.py`
```python
from fastapi import FastAPI, Depends
from inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler
from inertia_dependency import InertiaDependency
app = FastAPI()
app.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)
@app.get('/', response_model=None)
async def index(inertia: InertiaDependency) -> InertiaResponse:
return inertia.back()
```
### Enable SSR
To enable SSR, you need to set `ssr_enabled` to `True` in your configuration.
You also need to have set the `manifest_json_path` to the path of your `manifest.json` file.
You need to have the `requests` package installed to use this feature.
This can be done through the following command:
```bash
pip install requests
```
## Frontend documentation
There is no particular caveats to keep in mind when using this adapter.
However, here's an example of how you would set up your frontend to work with this adapter.
### For a classic build
> [!NOTE]
> To build the project, you can run the `vite build` command
`vite.config.js`
```javascript
import { fileURLToPath } from "node:url";
import { dirname } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const projectRoot = dirname(fileURLToPath(import.meta.url));
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": `${projectRoot}/src`,
},
},
build: {
manifest: "manifest.json",
outDir: "dist",
rollupOptions: {
input: "src/main.js",
},
},
});
```
`main.js`
```javascript
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
return pages[`./Pages/${name}.vue`];
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});
```
### For a SSR build
> [!NOTE]
> To build the project, you can run the `vite build` and `vite build --ssr` commands
> To serve the Inertia SSR server, you can run the `node dist/ssr/ssr.js` command
`vite.config.js`
```javascript
import { fileURLToPath } from "node:url";
import { dirname } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const projectRoot = dirname(fileURLToPath(import.meta.url));
// https://vitejs.dev/config/
export default defineConfig(({ isSsrBuild }) => ({
plugins: [vue()],
resolve: {
alias: {
"@": `${projectRoot}/src`,
},
},
build: {
manifest: isSsrBuild ? false : "manifest.json",
outDir: isSsrBuild ? "dist/ssr" : "dist/client",
rollupOptions: {
input: isSsrBuild ? "src/ssr.js" : "src/main.js",
},
},
}));
```
`main.js`
```javascript
import { createSSRApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
return pages[`./Pages/${name}.vue`];
},
setup({ el, App, props, plugin }) {
createSSRApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});
```
`ssr.js`
```javascript
import { createInertiaApp } from "@inertiajs/vue3";
import createServer from "@inertiajs/vue3/server";
import { renderToString } from "@vue/server-renderer";
import { createSSRApp, h } from "vue";
createServer((page) =>
createInertiaApp({
page,
render: renderToString,
resolve: (name) => {
const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
return pages[`./Pages/${name}.vue`];
},
setup({ App, props, plugin }) {
return createSSRApp({
render: () => h(App, props),
}).use(plugin);
},
}),
);
```
### Performance note
With the implementation proposed above, you'll be loading the whole page on the first load.
This is because everything will be bundled in the same file.
If you want to split your code, you can use the following implementation.
`helper.js` (taken from [laravel vite plugin inertia helpers](https://github.com/laravel/vite-plugin/blob/1.x/src/inertia-helpers/index.ts))
```javascript
export async function resolvePageComponent<T>(path: string|string[], pages: Record<string, Promise<T> | (() => Promise<T>)>): Promise<T> {
for (const p of (Array.isArray(path) ? path : [path])) {
const page = pages[p]
if (typeof page === 'undefined') {
continue
}
return typeof page === 'function' ? page() : page
}
throw new Error(`Page not found: ${path}`)
}
```
`main.js`
```javascript
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "@/helper.js";
createInertiaApp({
resolve: (name) => {
return resolvePageComponent(`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue"),
)
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});
```
Raw data
{
"_id": null,
"home_page": "https://github.com/hxjo/fastapi-inertia",
"name": "fastapi-inertia",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "inertia, inertiajs, fastapi, python",
"author": "Hugo Mortreux",
"author_email": "70602545+hxjo@users.noreply.github.com",
"download_url": "https://files.pythonhosted.org/packages/30/45/9c9cfa8ee4c92160d637a843d3cb8a8792841e3b4a8d813ced9f76d4bccf/fastapi_inertia-0.1.2.tar.gz",
"platform": null,
"description": "# Inertia.js FastAPI Adapter\n<!-- TOC -->\n* [Inertia.js FastAPI Adapter](#inertiajs-fastapi-adapter)\n * [Installation](#installation)\n * [Configuration](#configuration)\n * [Examples](#examples)\n * [Usage](#usage)\n * [Set up the dependency](#set-up-the-dependency)\n * [Rendering a page](#rendering-a-page)\n * [Rendering assets](#rendering-assets)\n * [Sharing data](#sharing-data)\n * [Flash messages](#flash-messages)\n * [Flash errors](#flash-errors)\n * [Redirect to an external URL](#redirect-to-an-external-url)\n * [Redirect back](#redirect-back)\n * [Enable SSR](#enable-ssr)\n * [Frontend documentation](#frontend-documentation)\n * [For a classic build](#for-a-classic-build)\n * [For a SSR build](#for-a-ssr-build)\n * [Performance note](#performance-note)\n<!-- TOC -->\n\n## Installation\nYou can install the package via pip:\n```bash\npip install fastapi-inertia\n```\n\n\n## Configuration\nYou can configure the adapter by passing a `InertiaConfig` object to the `Inertia` class. \nThe following options are available:\n\n| key | default | options | description |\n|--------------------|------------------------|-----------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|\n| environment | development | development,production | The environment to use |\n| version | 1.0.0 | Any valid string | The version of your server |\n| json_encoder | InertiaJsonEncoder | Any class that extends json.JSONEncoder | The JSON encoder used to encode page data when HTML is returned |\n| manifest_json_path | \"\" | Any valid path | The path to the manifest.json file. Needed in production |\n| dev_url | http://localhost:5173 | Any valid url | The URL to the development server |\n| ssr_url | http://localhost:13714 | Any valid url | The URL to the SSR server |\n| ssr_enabled | False | True,False | Whether to [enable SSR](#enable-ssr). You need to install the `requests` package, to have set the manifest_json_path and started the SSR server |\n| use_typescript | False | True,False | Whether to use TypeScript |\n| use_flash_messages | False | True,False | Whether to use [flash messages](#flash-messages). You need to use Starlette's SessionMiddleware to use this feature |\n| flash_message_key | messages | Any valid string | The key to use for [flash errors](#flash-errors) |\n| use_flash_errors | False | True,False | Whether to use flash errors |\n| flash_error_key | errors | Any valid string | The key to use for flash errors |\n\n## Examples\nYou can see different full examples in the [following repository](https://github.com/hxjo/fastapi-inertia-examples).\n\n\n## Usage\n### Set up the dependency\nThis Inertia.js adapter has been developed to be used as a FastAPI dependency.\nTo use it, you first need to set up the dependency, with your desired configuration.\n\n`inertia_dependency.py`\n```python\nfrom fastapi import Depends\nfrom typing import Annotated\nfrom inertia import InertiaConfig, inertia_dependency_factory, Inertia\n\ninertia_config = InertiaConfig(\n # Your desired configuration\n )\n\ninertia_dependency = inertia_dependency_factory(\n inertia_config\n)\n\nInertiaDependency = Annotated[Inertia, Depends(inertia_dependency)]\n```\nYou can then access the `InertiaDependency` in your route functions, and use it to render your pages.\n\n### Rendering a page\nTo render a page, you can use the `render` method of the `Inertia` class. It takes two arguments:\n- The name of the page\n- The data to pass to the page \n\n`main.py`\n```python\nfrom fastapi import FastAPI, Depends\nfrom inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler\nfrom inertia_dependency import InertiaDependency\n\napp = FastAPI()\n\napp.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)\n\n@app.get('/', response_model=None)\nasync def index(inertia: InertiaDependency) -> InertiaResponse:\n return inertia.render('Index', {\n 'name': 'John Doe'\n })\n```\n\n### Rendering assets\nAs your front-end framework likely references assets that are not served by FastAPI,\nyou need to mount a static directory to serve these assets.\n\n`main.py`\n```python\nimport os\nfrom fastapi import FastAPI\nfrom fastapi.staticfiles import StaticFiles\nfrom inertia_dependency import inertia_config\n\n\napp = FastAPI()\nwebapp_dir = (\n os.path.join(os.path.dirname(__file__), \"..\", \"webapp\", \"dist\")\n if inertia_config.environment != \"development\"\n else os.path.join(os.path.dirname(__file__), \"..\", \"webapp\", \"src\")\n)\n\napp.mount(\"/src\", StaticFiles(directory=webapp_dir), name=\"src\")\napp.mount(\n \"/assets\", StaticFiles(directory=os.path.join(webapp_dir, \"assets\")), name=\"assets\"\n)\n```\n\n### Sharing data\nTo share data, in Inertia, is basically to add data before even entering your route.\nThis is useful, for example, to add a user to all your pages that expects your user to be logged in. \n\n`main.py`\n```python\nfrom fastapi import FastAPI, Depends\nfrom inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler\nfrom inertia_dependency import InertiaDependency\n\napp = FastAPI()\n\napp.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)\n\ndef current_user(inertia: InertiaDependency):\n inertia.share(user={\n 'name': 'John Doe'\n })\n\n@app.get('/', response_model=None, dependencies=[Depends(current_user)])\nasync def index(inertia: InertiaDependency) -> InertiaResponse:\n \"\"\"\n Because of the dependency, and as we are sharing the user data, the user data will be available in the page.\n \"\"\"\n return inertia.render('Index')\n```\n\n### Flash messages\nWith the inertia dependency, you have access to a `flash` helper method that allows you to add flash messages to your pages.\nThis is useful to display messages to the user after a form submission, for example.\nThose messages are called `flash` messages as they are only displayed once. \nYou need to have set `use_flash_messages` to `True` in your configuration to use this feature.\nYou need to have the `SessionMiddleware` enabled in your application to use this feature.\n\n`main.py`\n```python\nfrom fastapi import FastAPI, Depends\nfrom starlette.middleware.sessions import SessionMiddleware\nfrom inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler\nfrom inertia_dependency import InertiaDependency\n\napp = FastAPI()\n\napp.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)\napp.add_middleware(SessionMiddleware, secret_key=\"secret\")\n\n\n@app.get('/', response_model=None)\nasync def index(inertia: InertiaDependency) -> InertiaResponse:\n inertia.flash('Index was reached successfully', category='success')\n return inertia.render('Index')\n```\n\n### Flash errors\nIf you handle form submissions in your application, and if you do all validation at the pydantic level,\na malformed payload will raise a `RequestValidationError` exception.\nYou can use the `inertia_request_validation_exception_handler` to handle this exception and display the errors to the user.\nIt supports error bags, so you can display multiple errors at once.\nIf the request is not from Inertia, it will fallback to FastAPI's default error handling. \nIn order to use this feature, you need to have set `use_flash_errors` to `True` in your configuration.\nYou also need to have the `SessionMiddleware` enabled in your application to use this feature.\n\n`main.py`\n```python\nfrom fastapi import FastAPI, Depends\nfrom pydantic import BaseModel, model_validator\nfrom typing import Any\nfrom fastapi.exceptions import RequestValidationError\nfrom starlette.middleware.sessions import SessionMiddleware\nfrom inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler, inertia_request_validation_exception_handler\nfrom inertia_dependency import InertiaDependency\n\napp = FastAPI()\n\napp.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)\napp.add_exception_handler(RequestValidationError, inertia_request_validation_exception_handler)\napp.add_middleware(SessionMiddleware, secret_key=\"secret\")\n\n\nclass Form(BaseModel):\n name: str\n \n @model_validator(mode=\"before\")\n @classmethod\n def name_must_contain_doe(cls, data: Any):\n if 'Doe' not in data.name:\n raise ValueError('Name must contain Doe')\n\n@app.post('/', response_model=None)\nasync def index(data: Form, inertia: InertiaDependency) -> InertiaResponse:\n return inertia.render('Index')\n```\n\n### Redirect to an external URL\nIf you want to redirect the user to an external URL, you can use the `location` method of the `Inertia` class.\nIt takes one argument: the URL to redirect to.\n\n`main.py`\n```python\nfrom fastapi import FastAPI, Depends\nfrom inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler\nfrom inertia_dependency import InertiaDependency\n\napp = FastAPI()\napp.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)\n\n@app.get('/', response_model=None)\nasync def index(inertia: InertiaDependency) -> InertiaResponse:\n return inertia.location('https://google.fr')\n```\n\n\n### Redirect back\nIf you want to redirect the user back (for example, after a form submission), you can use the `back` method of the `Inertia` class.\nIt will use the `Referer` header to redirect the user back.\nIf you're on a `GET` request, the status code will be `307`. Otherwise, it will be `303`. \nThat ways, it will trigger a new GET request to the referer URL.\n\n`main.py`\n```python\nfrom fastapi import FastAPI, Depends\nfrom inertia import InertiaResponse, InertiaVersionConflictException, inertia_version_conflict_exception_handler\nfrom inertia_dependency import InertiaDependency\n\napp = FastAPI()\napp.add_exception_handler(InertiaVersionConflictException, inertia_version_conflict_exception_handler)\n\n@app.get('/', response_model=None)\nasync def index(inertia: InertiaDependency) -> InertiaResponse:\n return inertia.back()\n```\n\n### Enable SSR\nTo enable SSR, you need to set `ssr_enabled` to `True` in your configuration.\nYou also need to have set the `manifest_json_path` to the path of your `manifest.json` file.\nYou need to have the `requests` package installed to use this feature.\nThis can be done through the following command:\n```bash\npip install requests\n```\n\n\n## Frontend documentation\nThere is no particular caveats to keep in mind when using this adapter.\nHowever, here's an example of how you would set up your frontend to work with this adapter.\n\n### For a classic build\n> [!NOTE] \n> To build the project, you can run the `vite build` command\n\n\n`vite.config.js`\n```javascript\nimport { fileURLToPath } from \"node:url\";\nimport { dirname } from \"path\";\n\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nconst projectRoot = dirname(fileURLToPath(import.meta.url));\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()],\n resolve: {\n alias: {\n \"@\": `${projectRoot}/src`,\n },\n },\n build: {\n manifest: \"manifest.json\",\n outDir: \"dist\",\n rollupOptions: {\n input: \"src/main.js\",\n },\n },\n});\n```\n\n`main.js`\n```javascript\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs/vue3\";\n\ncreateInertiaApp({\n resolve: (name) => {\n const pages = import.meta.glob(\"./Pages/**/*.vue\", { eager: true });\n return pages[`./Pages/${name}.vue`];\n },\n setup({ el, App, props, plugin }) {\n createApp({ render: () => h(App, props) })\n .use(plugin)\n .mount(el);\n },\n});\n```\n\n### For a SSR build\n> [!NOTE] \n> To build the project, you can run the `vite build` and `vite build --ssr` commands \n> To serve the Inertia SSR server, you can run the `node dist/ssr/ssr.js` command\n\n\n`vite.config.js`\n```javascript\nimport { fileURLToPath } from \"node:url\";\nimport { dirname } from \"path\";\n\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nconst projectRoot = dirname(fileURLToPath(import.meta.url));\n// https://vitejs.dev/config/\nexport default defineConfig(({ isSsrBuild }) => ({\n plugins: [vue()],\n resolve: {\n alias: {\n \"@\": `${projectRoot}/src`,\n },\n },\n build: {\n manifest: isSsrBuild ? false : \"manifest.json\",\n outDir: isSsrBuild ? \"dist/ssr\" : \"dist/client\",\n rollupOptions: {\n input: isSsrBuild ? \"src/ssr.js\" : \"src/main.js\",\n },\n },\n}));\n```\n\n`main.js`\n```javascript\nimport { createSSRApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs/vue3\";\n\ncreateInertiaApp({\n resolve: (name) => {\n const pages = import.meta.glob(\"./Pages/**/*.vue\", { eager: true });\n return pages[`./Pages/${name}.vue`];\n },\n setup({ el, App, props, plugin }) {\n createSSRApp({ render: () => h(App, props) })\n .use(plugin)\n .mount(el);\n },\n});\n```\n\n`ssr.js`\n```javascript\nimport { createInertiaApp } from \"@inertiajs/vue3\";\nimport createServer from \"@inertiajs/vue3/server\";\nimport { renderToString } from \"@vue/server-renderer\";\nimport { createSSRApp, h } from \"vue\";\n\ncreateServer((page) =>\n createInertiaApp({\n page,\n render: renderToString,\n resolve: (name) => {\n const pages = import.meta.glob(\"./Pages/**/*.vue\", { eager: true });\n return pages[`./Pages/${name}.vue`];\n },\n setup({ App, props, plugin }) {\n return createSSRApp({\n render: () => h(App, props),\n }).use(plugin);\n },\n }),\n);\n```\n\n### Performance note\nWith the implementation proposed above, you'll be loading the whole page on the first load.\nThis is because everything will be bundled in the same file.\nIf you want to split your code, you can use the following implementation. \n\n`helper.js` (taken from [laravel vite plugin inertia helpers](https://github.com/laravel/vite-plugin/blob/1.x/src/inertia-helpers/index.ts))\n```javascript\nexport async function resolvePageComponent<T>(path: string|string[], pages: Record<string, Promise<T> | (() => Promise<T>)>): Promise<T> {\n for (const p of (Array.isArray(path) ? path : [path])) {\n const page = pages[p]\n\n if (typeof page === 'undefined') {\n continue\n }\n\n return typeof page === 'function' ? page() : page\n }\n\n throw new Error(`Page not found: ${path}`)\n}\n```\n\n\n`main.js`\n```javascript\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs/vue3\";\nimport { resolvePageComponent } from \"@/helper.js\";\n\ncreateInertiaApp({\n resolve: (name) => {\n return resolvePageComponent(`./Pages/${name}.vue`,\n import.meta.glob(\"./Pages/**/*.vue\"),\n )\n },\n setup({ el, App, props, plugin }) {\n createApp({ render: () => h(App, props) })\n .use(plugin)\n .mount(el);\n },\n});\n```",
"bugtrack_url": null,
"license": "MIT",
"summary": "An implementation of the Inertia protocol for FastAPI.",
"version": "0.1.2",
"project_urls": {
"Homepage": "https://github.com/hxjo/fastapi-inertia",
"Repository": "https://github.com/hxjo/fastapi-inertia"
},
"split_keywords": [
"inertia",
" inertiajs",
" fastapi",
" python"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "1ac0713748554068b6bf42389d007cf4489dc7fef6b9493a6fb57fb8041b517d",
"md5": "b33d7f3086b7d202c3fed0904e54166c",
"sha256": "fbcb6c64ff5be9efe4bf072e4c147eda363384457c559a1c28b55d9f679c9b2e"
},
"downloads": -1,
"filename": "fastapi_inertia-0.1.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "b33d7f3086b7d202c3fed0904e54166c",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 12029,
"upload_time": "2024-04-23T16:11:19",
"upload_time_iso_8601": "2024-04-23T16:11:19.576447Z",
"url": "https://files.pythonhosted.org/packages/1a/c0/713748554068b6bf42389d007cf4489dc7fef6b9493a6fb57fb8041b517d/fastapi_inertia-0.1.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "30459c9cfa8ee4c92160d637a843d3cb8a8792841e3b4a8d813ced9f76d4bccf",
"md5": "8355461186492a775516b5c39e26a98c",
"sha256": "eddfde258bb1f8997cb93fd9c979c92fdd984b012e66d0adea696a9a9e7c5f99"
},
"downloads": -1,
"filename": "fastapi_inertia-0.1.2.tar.gz",
"has_sig": false,
"md5_digest": "8355461186492a775516b5c39e26a98c",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 13831,
"upload_time": "2024-04-23T16:11:21",
"upload_time_iso_8601": "2024-04-23T16:11:21.387472Z",
"url": "https://files.pythonhosted.org/packages/30/45/9c9cfa8ee4c92160d637a843d3cb8a8792841e3b4a8d813ced9f76d4bccf/fastapi_inertia-0.1.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-04-23 16:11:21",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "hxjo",
"github_project": "fastapi-inertia",
"travis_ci": false,
"coveralls": true,
"github_actions": true,
"lcname": "fastapi-inertia"
}
JSON
