DEV Community

Cover image for Laravel and Svelte with Inertia
dan
dan

Posted on • Updated on • Originally published at ngodwin.netlify.app

Laravel and Svelte with Inertia

#laravel #svelte #inertia #framework

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

  1. Prepare the Laravel application, or use what you already have. 
laravel new application
application cd
Enter fullscreen mode Exit fullscreen mode
  1. Add inertia using a composer. 
composer require inertiajs/inertia-laravel
Enter fullscreen mode Exit fullscreen mode
  1. 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>
Enter fullscreen mode Exit fullscreen mode
  1. 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'));
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Client Side

  1. Add the required packages 
npm install @inertiajs/inertia @inertiajs/inertia-svelte
npm install @babel/plugin-syntax-dynamic-import laravel-mix-svelte
Enter fullscreen mode Exit fullscreen mode
  1. Code splitting is commonly used by frameworks, you need babel for this.

create the .babelrc file it contains

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
Enter fullscreen mode Exit fullscreen mode
  1. 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),
  },
})
Enter fullscreen mode Exit fullscreen mode
  1. 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 ();
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

--- edit
I forgot to mention a ready to use my repository: https://github.com/dansvel/laravel-svelte

Top comments (6)

Collapse
 
faridsa profile image
farid •

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

npm install @ inertiajs/inertia @ inertiajs/inertia-svelte
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@": Tags may not have any characters that encodeURIComponent encodes.
Enter fullscreen mode Exit fullscreen mode

Any idea on how to solve it? Cheers.

Collapse
 
dansvel profile image
dan •

this post is really old, i very recommen you check official documentation here

inertiajs.com/server-side-setup
inertiajs.com/client-side-setup

Collapse
 
faridsa profile image
farid •

Thank you for your advise. Really appreciate it! Cheers.

Collapse
 
dansvel profile image
dan •

there is no space after @

pardon my post,,

Collapse
 
clsource profile image
Camilo •

Thank you for this post.
I'm learning both Laravel and Svelte and Inertia seems like a good fit.

Collapse
 
dansvel profile image
dan •

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 :)

Read next

darioprazeres profile image

PHP, O elefante que não cai!

Dário Prazeres -

sertxudev profile image

Testing Laravel with PHPUnit and PCOV

Sergio Peris -

msnmongare profile image

How to run specific migration in laravel

Sospeter Mong'are -

chinmaymoghe profile image

Minesweeper in Svelte

Chinmay -