Install Inertia

Author: douglara

Gemfile

@@ -128,3 +128,5 @@ gem 'tailwindcss-rails', '~> 2.0'
 gem 'opentelemetry-exporter-otlp', '~> 0.26.1'
 gem 'opentelemetry-instrumentation-all', '~> 0.50.1'
 gem 'opentelemetry-sdk', '~> 1.3'
+
+gem "inertia_rails", "~> 3.17"

Gemfile.lock

@@ -300,6 +300,8 @@ GEM
     image_processing (1.13.0)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
+    inertia_rails (3.17.0)
+      railties (>= 6)
     io-console (0.8.0)
     irb (1.14.3)
       rdoc (>= 4.0.0)
@@ -835,6 +837,7 @@ DEPENDENCIES
   html2text
   htmlbeautifier
   image_processing
+  inertia_rails (~> 3.17)
   jbuilder (~> 2.7)
   json_csv
   jsonb_accessor (= 1.3.2)

app/controllers/inertia_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class InertiaController < ApplicationController
+  # Share data with all Inertia responses
+  # see https://inertia-rails.dev/guide/shared-data
+  #   inertia_share user: -> { Current.user&.as_json(only: [:id, :name, :email]) }
+end

app/controllers/inertia_example_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class InertiaExampleController < InertiaController
+  def index
+    render inertia: {
+      rails_version: Rails.version,
+      ruby_version: RUBY_DESCRIPTION,
+      rack_version: Rack.release,
+      inertia_rails_version: InertiaRails::VERSION,
+    }
+  end
+end

app/javascript/assets/inertia.svg

@@ -0,0 +1,66 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+void createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.dev/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.dev/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob<{default: ResolvedComponent}>('../pages/**/*.tsx', {
+      eager: true,
+    })
+    const page = pages[`../pages/${name}.tsx`]
+    if (!page) {
+      console.error(`Missing Inertia page component: '${name}.tsx'`)
+    }
+
+    // To use a default layout, import the Layout component
+    // and use the following line.
+    // see https://inertia-rails.dev/guide/pages#default-layouts
+    //
+    // page.default.layout ||= (page: ReactNode) => (<Layout>{page}</Layout>)
+
+    return page
+  },
+
+  setup({ el, App, props }) {
+    createRoot(el).render(
+      <StrictMode>
+        <App {...props} />
+      </StrictMode>
+    )
+  },
+
+  defaults: {
+    form: {
+      forceIndicesArrayFormatInFormData: false,
+    },
+    future: {
+      useScriptElementForInitialPage: true,
+      useDataInertiaHeadAttribute: true,
+      useDialogForErrorModal: true,
+      preserveEqualProps: true,
+    },
+  },
+}).catch((error) => {
+  // This ensures this entrypoint is only loaded on Inertia pages
+  // by checking for the presence of the root element (#app by default).
+  // Feel free to remove this `catch` if you don't need it.
+  if (document.getElementById("app")) {
+    throw error
+  } else {
+    console.error(
+      "Missing root element.\n\n" +
+      "If you see this error, it probably means you loaded Inertia.js on non-Inertia pages.\n" +
+      'Consider moving <%= vite_typescript_tag "inertia.tsx" %> to the Inertia-specific layout instead.',
+    )
+  }
+})

app/javascript/assets/rails.svg

@@ -0,0 +1,102 @@
+.root {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  background-color: #F0E7E9;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: #261B23;
+  display: flex;
+  flex-direction: column;
+  font-family: Sans-Serif;
+  font-size: calc(0.9em + 0.5vw);
+  font-style: normal;
+  font-weight: 400;
+  justify-content: center;
+  line-height: 1.25;
+  min-height: 100vh;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .root {
+    background-color: #1a1a1a;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjMzMzIi8+PC9zdmc+);
+    color: #e0e0e0;
+  }
+}
+
+.logo {
+  display: inline-block;
+  height: 9.8vw;
+  min-height: 130px;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
+}
+.logo.inertia:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+.logo.rails:hover  {
+  filter: drop-shadow(0 0 2em rgb(211 0 1 / 0.6));
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo.react {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: drop-shadow(0 20px 13px rgb(255 255 255 / 0.03)) drop-shadow(0 8px 5px rgb(255 255 255 / 0.08));
+  }
+}
+
+.card {
+  padding: 2em;
+  font-size: 0.7em;
+  color: #948e90;
+}
+
+.footer {
+  bottom: 0;
+  left: 0;
+  margin: 0 2rem 2rem 2rem;
+  position: absolute;
+  right: 0;
+}
+
+.footer ul {
+  list-style: none;
+}
+
+.footer ul li {
+  display: inline;
+}
+
+.footer ul ul li:after {
+  content: " | ";
+  font-weight: 300;
+  color: #948e90;
+}
+
+.footer ul ul li:last-child:after {
+  content: "";
+}