Blade to React: My Laravel Journey

Copy link

Diving into Laravel and Embracing Blade

Fresh out of college in 2020, with a shiny degree in computer science and engineering, I found myself at the crossroads of countless programming languages and platforms. Amidst this overwhelming array, Laravel beckoned. Its MVC architecture provided the structured yet flexible entry point I sought. With Laravel, each step felt like a guided tour, and soon, I was building applications with its native templating engine: Blade. The ease of embedding PHP within HTML, combined with Laravel's seamless integration, made Blade an obvious choice for my projects.

Facing the Blade's Edge: Challenges

Yet, as with all tools, there were nuances to navigate. While Blade made many tasks straightforward, some challenges became hard to overlook:

Dynamic Data Rendering: Refreshing data on a page meant continually seeking workarounds. Real-time updates, a staple in modern web apps, felt constrained.
Interactivity with JavaScript: Crafting dynamic interactions often meant intertwining with plain JavaScript. With the rising prominence of interactive frameworks like Vue and React, this approach began to feel outmoded.

A Fresh Start at Hoyo Tech: Meeting Inertia.js

Joining Hoyo Tech marked a new chapter. Here, a decision to transition from the familiar terrain of Laravel with Blades to the uncharted waters of Laravel with React + Inertia was underway. Initially, the shift felt daunting. React was an enigma, and Inertia was alien. However, as the contours of this new landscape began to take shape, I found myself captivated. Gone were the struggles with data updates and interactivity. With Inertia.js bridging Laravel and React, the synergy was palpable.

Setting Up Inertia.js: A Detailed Guide

Embarking on the Inertia journey requires a clear understanding of both its server-side and client-side configurations. Here's a comprehensive setup guide:

Server-Side Configuration:

Installing Dependencies:
Begin by using Composer to incorporate the Inertia server-side adapter into your Laravel project.

composer require inertiajs/inertia-laravel

Root Template Setup:
Establish a foundational template. This will be responsible for loading your application's assets, including stylesheets and scripts.
Ensure you include the necessary Inertia directives. Here's a basic structure:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Middleware Configuration:
The middleware plays a pivotal role in setting up Inertia, managing shared data, and handling asset versioning.
Activate the Inertia middleware by publishing it:

php artisan inertia:middleware

Subsequently, register the middleware in your App\Http\Kernel, ensuring its placement as the concluding item in your web middleware group.
Crafting Responses:
With the foundational components in place, you're primed to start constructing Inertia pages.
These pages will be rendered through responses, facilitated by your controllers.

Client-Side Configuration:

Framework Selection:
Inertia provides official client-side adapters for React, Vue, and Svelte.
For this guide, we're adopting React. Install its corresponding Inertia adapter:

npm install @inertiajs/react

App Initialization
Your central JavaScript file should now be configured to boot the Inertia app.
This process involves initializing your selected client-side framework (React, in this instance) with the fundamental Inertia component.

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    return pages[`./Pages/${name}.jsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

This script initiates the client-side framework with the core Inertia component, readying it for action.
Page Component Resolution:
The resolution callback in the initialization script you just added plays a pivotal role. It instructs Inertia on how to locate a page component, given its name.
Root Element Definition:
By default, Inertia presumes your root element in the app's primary template is identified as app. If your configuration deviates, ensure you specify the correct ID within the initialization script.

Reflections on the Journey

Having integrated Inertia.js into our Laravel-React ecosystem, several observations stand out:

Seamlessness: The process, though intricate in steps, led to a cohesive blend of server-side and client-side frameworks. Transitioning from Blade approach to Inertia's client-side rendering felt like unlocking a new chapter in web development.
The Power of React: Introducing React into our applications broadened our capabilities, giving us more tools to design interactive and responsive web experiences.
Continuous Learning: The world of web development is ever-evolving. While setting up Inertia.js was an enlightening experience, it was also a reminder of the importance of continuous learning. The robust documentation provided by Inertia.js was invaluable in this regard.

Diving Deeper

For those keen on exploring the intricate details and potential of Inertia.js, the official Inertia.js documentation is a comprehensive resource. It's meticulously curated and provides insights into everything from basic setups to advanced features.

While this post offers a glimpse into my personal journey with Inertia.js, the landscape of web development is vast and varied. My colleague is gearing up to present a detailed exploration of the advantages and nuances of Inertia.js in our tech stack. So, stay tuned for that insightful dive!

In the meantime, I invite fellow developers to share their experiences, challenges, and insights with Inertia.js. Every story adds a new dimension to our collective knowledge.

Stefan Jakovcheski

Full-Stack Developer

Oct 10, 2023