InertiaCore
v0.0.9
Puede consultar estos ejemplos para tener algún punto de partida para su nueva aplicación.
PM> Install-Package AspNetCore.InertiaCoredotnet add package AspNetCore.InertiaCore Debe agregar pocas líneas al archivo Program.cs o Starup.cs .
using InertiaCore . Extensions ;
[ .. . ]
builder . Services . AddInertia ( ) ;
[ .. . ]
app . UseInertia ( ) ; Crea un archivo /Views/App.cshtml .
@using InertiaCore
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title inertia > My App </ title >
</ head >
< body >
@await Inertia.Html(Model)
< script src =" /js/app.js " > </ script >
</ body >
</ html >Puede cambiar el archivo de vista raíz usando:
builder . Services . AddInertia ( options =>
{
options . RootView = "~/Views/Main.cshtml" ;
} ) ; Para pasar datos a un componente de página, use Inertia.Render() .
public async Task < IActionResult > Index ( )
{
var posts = await _context . Posts . ToListAsync ( ) ;
var data = new
{
Posts = posts ,
} ;
return Inertia . Render ( "Posts" , data ) ;
} Para hacer un punto final de formulario, recuerde agregar [FromBody] al parámetro de su modelo, porque los datos de solicitud se pasan usando JSON.
[ HttpPost ]
public async Task < IActionResult > Create ( [ FromBody ] Post post )
{
if ( ! ModelState . IsValid )
{
// The validation errors are passed automatically.
return await Index ( ) ;
}
_context . Add ( post ) ;
await _context . SaveChangesAsync ( ) ;
return RedirectToAction ( "Index" ) ;
} Puede agregar algunos datos compartidos a sus puntos de vista utilizando, por ejemplo, MiddleWares:
using InertiaCore ;
[ .. . ]
app . Use ( async ( context , next ) =>
{
var userId = context . Session . GetInt32 ( "userId" ) ;
Inertia . Share ( "auth" , new
{
UserId = userId
} ) ;
// Or
Inertia . Share ( new Dictionary < string , object ? >
{
[ "auth" ] => new
{
UserId = userId
}
} ) ;
} ) ;Puede usar accesorios perezosos async para cargar datos de forma asincrónica en sus componentes. Esto es útil para cargar datos que no son necesarios para el renderizado inicial de la página.
// simply use the LazyProps the same way you normally would, except pass in an async function
public async Task < IActionResult > Index ( )
{
var posts = new LazyProp ( async ( ) => await _context . Posts . ToListAsync ( ) ) ;
var data = new
{
Posts = posts ,
} ;
return Inertia . Render ( "Posts" , data ) ;
}
Si desea habilitar SSR en su aplicación de inercia, recuerde agregar Inertia.Head() a su diseño:
@using InertiaCore
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title inertia > My App </ title >
@await Inertia.Head(Model)
</ head >
< body >
@await Inertia.Html(Model)
< script src =" /js/app.js " > </ script >
</ body >
</ html >y habilite la opción SSR:
builder . Services . AddInertia ( options =>
{
options . SsrEnabled = true ;
// You can optionally set a different URL than the default.
options . SsrUrl = "http://127.0.0.1:13714/render" ; // default
} ) ; Una clase Vite Helper está disponible para cargar automáticamente sus estilos o scripts generados simplemente usando el ayudante @Vite.Input("src/main.tsx") . También puede habilitar HMR cuando use React usando el ayudante @Vite.ReactRefresh() . Esto se combina bien con el paquete NPM laravel-vite-plugin .
Para comenzar con el Vite Helper, deberá agregar una línea más al archivo Program.cs o Starup.cs .
using InertiaCore . Extensions ;
[ .. . ]
builder . Services . AddViteHelper ( ) ;
// Or with options (default values shown)
builder . Services . AddViteHelper ( options =>
{
options . PublicDirectory = "wwwroot" ;
options . BuildDirectory = "build" ;
options . HotFile = "hot" ;
options . ManifestFilename = "manifest.json" ;
} ) ; Aquí hay un ejemplo para una aplicación TypeScript React con HMR:
@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title inertia > My App </ title >
</ head >
< body >
@* This has to go first, otherwise preamble error *@
@Vite.ReactRefresh()
@await Inertia.Html(Model)
@Vite.Input("src/main.tsx")
</ body >
</ html > Y aquí está el correspondiente vite.config.js
import { defineConfig } from "vite" ;
import react from "@vitejs/plugin-react" ;
import laravel from "laravel-vite-plugin" ;
import path from "path" ;
import { mkdirSync } from "fs" ;
// Auto-initialize the default output directory
const outDir = "../wwwroot/build" ;
mkdirSync ( outDir , { recursive : true } ) ;
// https://vitejs.dev/config/
export default defineConfig ( {
plugins : [
laravel ( {
input : [ "src/main.tsx" ] ,
publicDirectory : outDir ,
} ) ,
react ( ) ,
] ,
resolve : {
alias : {
"@" : path . resolve ( __dirname , "src" ) ,
} ,
} ,
build : {
outDir ,
emptyOutDir : true ,
} ,
} ) ;Aquí hay un ejemplo para una aplicación Vue TypeScript con recarga caliente:
@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title inertia > My App </ title >
</ head >
< body >
@await Inertia.Html(Model)
@Vite.Input("src/app.ts")
</ body >
</ html > Y aquí está el correspondiente vite.config.js
import { defineConfig } from 'vite' ;
import vue from '@vitejs/plugin-vue' ;
import laravel from "laravel-vite-plugin" ;
import path from "path" ;
import { mkdirSync } from "fs" ;
const outDir = "../wwwroot/build" ;
mkdirSync ( outDir , { recursive : true } ) ;
export default defineConfig ( {
plugins : [
laravel ( {
input : [ "src/app.ts" ] ,
publicDirectory : outDir ,
refresh : true ,
} ) ,
vue ( {
template : {
transformAssetUrls : {
base : null ,
includeAbsolute : false ,
} ,
} ,
} ) ,
] ,
resolve : {
alias : {
"@" : path . resolve ( __dirname , "src" ) ,
} ,
} ,
build : {
outDir ,
emptyOutDir : true ,
} ,
} ) ;Aquí hay un ejemplo que solo produce un solo archivo CSS:
@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
</ head >
< body >
@await Inertia.Html(Model)
@Vite.Input("src/main.scss")
</ body >
</ html >
