It started with getting to know Svelte and her beauty, then fell in love at first sight. Ehm... But I wasn't ready if I had to bring it together with Sapper, which was meant to be.
So after searching here and there, trying all the ways that I found in the virtual universe. I met with Inertia.
What is Inertia?
Inertia allows you to create Single-page Apps (SPA) without the need to build an API. Which means you don't need to bother with complicated things like routing and API.
As far as I am concerned, all APIs and routing will still use server-side, which will be directed to the Inertia adapter. Then Inertia turns it into an XHR request and throws it to the client side.
The wedding
Inertia can be used for almost all back end such as Rails, Symfony, Yii2. Supported front-ends are, React, Vue. And other frameworks whose adapters are developed by the community.
But this time I will only marry Laravel and Svelte off here.
Server Side
- Prepare the Laravel application, or use what you already have.
laravel new application
application cd
- Add inertia using a composer.
composer require inertiajs/inertia-laravel
- Set Laravel Blade to run Inertia.
resources/views/app.blade.php
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0" />
<link href = "{{mix ('/ css/app.css')}}" rel = "stylesheet" />
<script src = "{{mix ('/ js/app.js')}}" defer> </script>
</head>
<body>
@inertia
</body>
</html>
- Asset Versioning
app/Providers/AppServiceProvider.php
<?php
App\Providers namespace;
use Illuminate\Support\ServiceProvider;
use Inertia\Inertia;
the AppServiceProvider class extends ServiceProvider
{
public function register ()
{
//
}
public boot function ()
{
Inertia :: version (function () {
return md5_file (public_path ('mix-manifest.json'));
});
}
}
Client Side
- Add the required packages
npm install @inertiajs/inertia @inertiajs/inertia-svelte
npm install @babel/plugin-syntax-dynamic-import laravel-mix-svelte
- Code splitting is commonly used by frameworks, you need babel for this.
create the .babelrc file it contains
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
- Initialize main JavaScript
resources/js/app.js
import {InertiaApp} from '@inertiajs/inertia-svelte'
const app = document.getElementById ('app')
new InertiaApp ({
target: app,
props: {
initialPage: JSON.parse (app.dataset.page),
resolveComponent: name => import (`./Pages/$ {name} .svelte`) .then (module => module.default),
},
})
- Configure script building I use laravel-mix plus laravel-mix-svelte
webpack.mix.js
const mix = require ('laravel-mix');
require ('laravel-mix-svelte');
mix.js ('resources/js/app.js', 'public/js')
.sass ('resources/sass/app.scss', 'public/css')
.svelte ({
dev:! mix.inProduction ()
})
.webpackConfig ({
output: {chunkFilename: 'js/[name]. js? id = [chunkhash]'},
})
.version ();
Use Laravel and Svelte
For the Svelte section, you can create a view with the extension .svelte in theresources/js/Pages directory according to what was set in the initialization. Such as resources/js/Pages/Books/Show.svelte
resources/js/Pages/Index.svelte
<script>
let name = 'world';
</script>
<style>
h1 {
color: indigo;
font-family: 'Calibri', cursive;
font-size: 3em;
}
</style>
<h1> Svelte greets {name} through inertia </h1>
Then in the Laravel section, you can create a router to render its view or process data in the controller as usual. Don't forget to add use Inertia\Inertia; at the top of the controller
routes/web.php
Route :: get ('/', function () {
return Inertia\Inertia :: render ('Index');
}
--- edit
I forgot to mention a ready to use my repository: https://github.com/dansvel/laravel-svelte
Top comments (6)
Hi, I like laravel and recently I give a try to svelte and I really like it, but now, trying to follow your setup I'm facing npm errors
Any idea on how to solve it? Cheers.
this post is really old, i very recommen you check official documentation here
inertiajs.com/server-side-setup
inertiajs.com/client-side-setup
Thank you for your advise. Really appreciate it! Cheers.
there is no space after @
pardon my post,,
Thank you for this post.
I'm learning both Laravel and Svelte and Inertia seems like a good fit.
actually, i have a sample project,, it's just proof of concept though,,
github.com/dansvel/epilketos-larav...
something like voting app, but the readme and content in Bahasa Indonesia,, however you can just copy-paste to google translate :)