Adonis, Inertia and Svelte (Updated)

The basic setup to start exploring AdonisJs-InertiaJS-Svelte stack.

Jyrki Gröhn
4 min readApr 4, 2021

Edit 7.11.2021: This article has been updated to work with current versions.

I couldn’t find any instructions for setting up the Adonis-framework with InertiaJs that uses Svelte as frontend. Here you can find the instructions for basic setup and to get your system running. I believe this stack is the most modern full stack available. It’s lean and fast.

NPM installations

First you need to install Adonis and all the needed dependencies. You need to have node.js and npm package manager installed. You can check these by giving following commands in terminal (I use vscode as my code editor):

node -v
npm -v

These should print out the version numbers of each software and they also tell they are installed and working.

Install Adonis5

npm init adonis-ts-app@latest myapp

and choose web application, myapp and false . Installation will take a few minutes. When installation is finished change the working directory, restart vscode and start a web server to serve the created application:

cd myapp
code . -r
node ace serve --watch

Open the browser and goto:

http://127.0.0.1:3333/

Install Inertiajs for Adonisjs

Eidellev has portedthe Inertiajs-server side adapter for Adonisjs (thank you very much). Install adapter:

npm i @eidellev/inertia-adonisjs
node ace configure @eidellev/inertia-adonisjs

First line will install the adapter and configure will create a couple of necessary files in order to Inertia to work.

Install the rest of dependencies

We will need a few more dependencies before we are ready

npm i svelte
npm i svelte-loader
npm i laravel-mix
npm i adonis-mix-asset

Create new files and modify some

webpack.mix.js

Create webpack.mix.js file in to the root folder:

const mix = require('laravel-mix')
const path = require('path')
//this is needed at least in windows 10
mix.setPublicPath("./public")
mix.js('resources/js/app.js', 'public/js')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
extensions: ['.js', '.svelte'],
mainFields: ['svelte', 'browser', 'module', 'main'],
alias: {
'@': path.resolve('resources/js'),
},
},
module: {
rules: [
{
test: /\.(svelte)$/,
use: {
loader: 'svelte-loader',
options: {
emitCss: true,
hotReload: true,
},
},
},
],
},
})
.version()
.sourceMaps()

ace-manifest.json

Modify ace-manifest.json . The file has "commands”:{} -block, add following to the inside of the commands-block ie. add , after the last command and then paste following. After the command-block the file has "aliases":{} -block (at least at the moment), these additions comes before that.

"mix:build": {
"settings": {
"stayAlive": true
},
"commandPath": "adonis-mix-asset/build/commands/Mix/Build",
"commandName": "mix:build",
"description": "Compile Mix",
"args": [],
"flags": [
{
"name": "production",
"propertyName": "production",
"type": "boolean",
"description": "Build assets for production",
"default": false
},
{
"name": "analyze",
"propertyName": "analyze",
"type": "boolean",
"description": "Open bundle analyzer",
"default": false
},
{
"name": "mix-config",
"propertyName": "mixConfig",
"type": "string",
"description": "The path to your Mix configuration file. The default is your root 'webpack.mix.js'",
"default": "webpack.mix.js"
}
]
},
"mix:watch": {
"settings": {
"stayAlive": true
},
"commandPath": "adonis-mix-asset/build/commands/Mix/Watch",
"commandName": "mix:watch",
"description": "Build and watch files for changes",
"args": [],
"flags": [
{
"name": "hot",
"propertyName": "hot",
"type": "boolean",
"description": "Enable hot reloading",
"default": false
},
{
"name": "mix-config",
"propertyName": "mixConfig",
"type": "string",
"description": "The path to your Mix configuration file. The default is your root 'webpack.mix.js'",
"default": "webpack.mix.js"
}
]
}

Create and modify some folders and files

Create js folder under the resources folder and create there Pages folder and app.js file. Create a couple of svelte-files under the Pages-folder Home.svelte and Second.svelte

File structure

app.js:

import { App } from '@inertiajs/inertia-svelte'let el = document.getElementById('app')
new App({
target: el,
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => import(`@/Pages/${name}.svelte`),
},
})

Home.svelte:

<script>
export let mydata;
</script>
<h1>Hello {mydata}</h1>

app.edge (add this right before ending </head> ):

<script src="/js/app.js" defer></script>

routes.ts (replace Route.get ... ):

Route.get('/', async ({inertia}) => {
return inertia.render("Home",{mydata:"World"});
})

Test the website

Finally we are ready to test if everything is working ok. At first we need to build our files by running

node ace mix:watch

if everything went ok, the system is watching our file changes and updates the builds when files change.

Next we serve our files (I don’t know how to do these in one command). Open a new terminal window and run

node ace serve --watch

Browse to http://127.0.0.1:3333/ and you should see:

Hello World

InertiaLink

The last thing in this tutorial is to test the InertiaLink . This is the beauty of the whole stack.

routes.ts (add a second route):

Route.get("/second", async ({ inertia }) => {
const data = {
title: "Second Page",
content: "Some content here."
};
return inertia.render("Second", { data });
});

Home.svelte:

<script>
import { inertia} from "@inertiajs/inertia-svelte";
export let mydata;
</script>
<h1>Hello {mydata}</h1>
<a href="/second" use:inertia>Second</a>

Second.svelte:

<script>
import { inertia } from "@inertiajs/inertia-svelte";
export let data;
</script>
<h1>Title: {data.title}</h1>
<p>{data.content}</p>
<a href="/" use:inertia>Home</a>

When you save the files, the watchers should update files right away. Refresh the browser and you should see a new link in the homepage. The link should take you to the second page. Response time should be really fast, exactly like in a SPA (single page application).

Open the DevTools (Chrome, F12-function key) and network tab. When you click the links you should see there is no page loads, only a small amount of data will be transfered. That’s the reason for a fast page switching and for a great user experience.

I hope this tutorial was helpful to you, thank you.

--

--