Skip to content

Commit 3e0275a

Browse files
skryukovskryukov
committed
Install inertia_rails
bundle add inertia_rails bin/rails g inertia:install --tailwind --typescript --framework=svelte
1 parent b25531b commit 3e0275a

File tree

20 files changed

+1924
-191
lines changed

20 files changed

+1924
-191
lines changed

‎Gemfile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ gem "thruster", require: false
3939
# Use Vite in Rails and bring joy to your JavaScript experience
4040
gem "vite_rails", "~> 3.0"
4141

42+
# The Rails adapter for Inertia.js [https://inertia-rails.dev]
43+
gem "inertia_rails", "~> 3.10"
44+
4245
group :development, :test do
4346
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
4447
gem "debug", platforms: %i[ mri windows ], require: "debug/prelude"

‎Gemfile.lock‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,8 @@ GEM
122122
activesupport (>= 6.1)
123123
i18n (1.14.7)
124124
concurrent-ruby (~> 1.0)
125+
inertia_rails (3.10.0)
126+
railties (>= 6)
125127
io-console (0.8.1)
126128
irb (1.15.2)
127129
pp (>= 0.6.0)
@@ -395,6 +397,7 @@ DEPENDENCIES
395397
capybara
396398
debug
397399
factory_bot_rails
400+
inertia_rails (~> 3.10)
398401
jbuilder
399402
kamal
400403
propshaft

‎app/controllers/inertia_example_controller.rb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# frozen_string_literal: true
2+
3+
class InertiaExampleController < ApplicationController
4+
def index
5+
render inertia: 'InertiaExample', props: {
6+
name: params.fetch(:name, 'World'),
7+
}
8+
end
9+
end

‎app/frontend/assets/inertia.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎app/frontend/assets/svelte.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎app/frontend/assets/vite_ruby.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎app/frontend/entrypoints/application.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "tailwindcss";
2+
3+
@plugin "@tailwindcss/typography";
4+
@plugin "@tailwindcss/forms";

‎app/frontend/entrypoints/inertia.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
2+
import { mount } from 'svelte'
3+
4+
createInertiaApp({
5+
// Set default page title
6+
// see https://inertia-rails.dev/guide/title-and-meta
7+
//
8+
// title: title => title ? `${title} - App` : 'App',
9+
10+
// Disable progress bar
11+
//
12+
// see https://inertia-rails.dev/guide/progress-indicators
13+
// progress: false,
14+
15+
resolve: (name) => {
16+
const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.svelte', {
17+
eager: true,
18+
})
19+
const page = pages[`../pages/${name}.svelte`]
20+
if (!page) {
21+
console.error(`Missing Inertia page component: '${name}.svelte'`)
22+
}
23+
24+
// To use a default layout, import the Layout component
25+
// and use the following line.
26+
// see https://inertia-rails.dev/guide/pages#default-layouts
27+
//
28+
// return { default: page.default, layout: page.layout || Layout }
29+
30+
return page
31+
},
32+
33+
setup({ el, App, props }) {
34+
if (el) {
35+
mount(App, { target: el, props })
36+
} else {
37+
console.error(
38+
'Missing root element.\n\n' +
39+
'If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n' +
40+
'Consider moving <%= vite_typescript_tag "inertia" %> to the Inertia-specific layout instead.',
41+
)
42+
}
43+
},
44+
})

‎app/frontend/pages/InertiaExample.svelte‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script lang="ts">
2+
import svelteSvg from '/assets/svelte.svg'
3+
import inertiaSvg from '/assets/inertia.svg'
4+
import viteRubySvg from '/assets/vite_ruby.svg'
5+
6+
let { name }: { name: string } = $props()
7+
8+
let count = $state(0)
9+
</script>
10+
11+
<svelte:head>
12+
<title>Inertia + Vite Ruby + Svelte Example</title>
13+
</svelte:head>
14+
15+
<div class="inertia_example">
16+
<h1>Hello {name}!</h1>
17+
18+
<div>
19+
<a href="https://inertia-rails.dev" target="_blank">
20+
<img class="logo" src={inertiaSvg} alt="Inertia logo" />
21+
</a>
22+
<a href="https://vite-ruby.netlify.app" target="_blank">
23+
<img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
24+
</a>
25+
<a href="https://svelte.dev" target="_blank">
26+
<img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
27+
</a>
28+
</div>
29+
30+
<h2>Inertia + Vite Ruby + Svelte</h2>
31+
32+
<div class="card">
33+
<button onclick={() => count++}>
34+
count is {count}
35+
</button>
36+
<p>
37+
Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
38+
HMR
39+
</p>
40+
</div>
41+
<p class="read-the-docs">
42+
Click on the Inertia, Vite Ruby, and Svelte logos to learn more
43+
</p>
44+
</div>
45+
46+
<style>
47+
.inertia_example {
48+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
49+
line-height: 1.5;
50+
font-weight: 400;
51+
color: #213547;
52+
background-color: #ffffff;
53+
max-width: 1280px;
54+
margin: 0 auto;
55+
padding: 2rem;
56+
text-align: center;
57+
}
58+
59+
h1 {
60+
font-size: 3.2em;
61+
line-height: 1.1;
62+
}
63+
64+
h2 {
65+
font-size: 2.6em;
66+
line-height: 1.1;
67+
}
68+
69+
button {
70+
border-radius: 8px;
71+
border: 1px solid transparent;
72+
padding: 0.6em 1.2em;
73+
font-size: 1em;
74+
font-weight: 500;
75+
font-family: inherit;
76+
background-color: #f9f9f9;
77+
cursor: pointer;
78+
transition: border-color 0.25s;
79+
}
80+
button:hover {
81+
border-color: #646cff;
82+
}
83+
button:focus,
84+
button:focus-visible {
85+
outline: 4px auto -webkit-focus-ring-color;
86+
}
87+
88+
.logo {
89+
display: inline-block;
90+
height: 6em;
91+
padding: 1.5em;
92+
will-change: filter;
93+
transition: filter 300ms;
94+
}
95+
.logo:hover {
96+
filter: drop-shadow(0 0 2em #646cffaa);
97+
}
98+
.logo.vite:hover {
99+
filter: drop-shadow(0 0 2em #e4023baa);
100+
}
101+
.logo.svelte:hover {
102+
filter: drop-shadow(0 0 2em #ff3e00aa);
103+
}
104+
105+
.card {
106+
padding: 2em;
107+
}
108+
109+
.read-the-docs {
110+
color: #888;
111+
}
112+
</style>

‎app/frontend/vite-env.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="svelte" />
2+
/// <reference types="vite/client" />

0 commit comments

Comments
 (0)