Inertia.js Symfony Adapter

https://github.com/skipthedragon/inertia-bundle
Admin
Inertia.js Symfony Adapter is a server-side adapter for Symfony that enables developers to build...
Tokens:6,087
Snippets:61
Trust Score:5.5
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Install Inertia.js JavaScript dependency

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/installation.md

Install the Inertia.js client-side library using Yarn.

```console
yarn add @inertiajs/inertia
```

--------------------------------

### Install required Symfony packages

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/installation.md

Install the necessary Twig and Serializer packages via Composer.

```console
composer require twig symfony/serializer-pack
```

--------------------------------

### Install Inertia Vue package

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/encore_config_examples/vue.md

Run this command to add the Inertia.js Vue adapter to your project dependencies.

```console
yarn add @inertiajs/inertia-vue
```

--------------------------------

### Example webpack.ssr.config.js

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/ssr.md

Example configuration for the SSR webpack build. It sets the output path to public/build-ssr, enables Vue loader, and configures the target as node with webpack-node-externals.

```js
const Encore = require('@symfony/webpack-encore');
const webpackNodeExternals = require('webpack-node-externals');
const path = require('path');

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore.setOutputPath('public/build-ssr/')
  .setPublicPath('/build-ssr')
  .enableVueLoader(() => {}, { version: 3 })
  .addEntry('ssr', './assets/ssr.js')
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .enableSassLoader();

const config = Encore.getWebpackConfig();
config.target = 'node';
config.externals = [webpackNodeExternals()];

module.exports = config;
```

--------------------------------

### Install webpack-node-externals

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/ssr.md

Install the webpack-node-externals package required for the SSR webpack configuration.

```shell
npm install webpack-node-externals
```

--------------------------------

### Install Inertia Bundle via Composer

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/README.md

Use Composer to add the inertia-bundle to your Symfony project.

```console
composer require skipthedragon/inertia-bundle
```

--------------------------------

### Pass view data using viewData method

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/usage.md

Use the viewData method to pass data to the root template, similar to the share function. The example sets a title in the view data.

```php
$this->inertia->viewData('title', 'Page Title');
```

--------------------------------

### Pass view data as third parameter to render

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/usage.md

Pass data to the root template by providing a third parameter to the render function. The example passes a title to the view data.

```php
return $inertia->render(
  'Dashboard',
  ['prop' => 'propValue'],
  ['title' => 'Page Title']
);
```

--------------------------------

### Share data with all components via EventSubscriber

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/usage.md

Use $inertia->share($key, $data) in an EventSubscriber to share data with all components. The example shares a user object with a synchronous value and a lazy callback for posts.

```php
<?php

namespace App\EventSubscriber;

use Rompetomp\InertiaBundle\Architecture\InertiaInterface;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\HttpKernel\KernelEvents;

class InertiaSubscriber implements EventSubscriberInterface
{
  protected InertiaInterface $inertia;

  /**
   * AppSubscriber constructor.
   */
  public function __construct(InertiaInterface $inertia)
  {
    $this->inertia = $inertia;
  }

  public static function getSubscribedEvents()
  {
    return [
      KernelEvents::CONTROLLER => 'onControllerEvent',
    ];
  }

  public function onControllerEvent($event)
  {
    $this->inertia->share('Auth::user', [
      'name' => 'Hannes', // Synchronously
      'posts' => function () {
        return [1 => 'Post'];
      },
    ]);
  }
}
```

--------------------------------

### Use InertiaTrait in controller

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/usage.md

Use the InertiaTrait to get the InertiaInterface without explicit injection. The trait provides the $inertia property, and the render method returns an Inertia response.

```php
<?php
namespace App\Controller;

use Rompetomp\InertiaBundle\Architecture\InertiaInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Rompetomp\InertiaBundle\Controller\InertiaTrait;

class DashboardController extends AbstractController
{
  use InertiaTrait;

  public function index(): Response
  {
    return $this->inertia->render('Dashboard', ['prop' => 'propValue']);
  }
}
```

--------------------------------

### Use lazy props in render

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/usage.md

Use the lazy method to defer data evaluation for partial reloads. The example shows array, string, and callable forms. When using string or array, the service checks if it is an existing service in the container; if not, it calls the function.

```php
<?php
namespace App\Controller;

use Rompetomp\InertiaBundle\Architecture\InertiaInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class DashboardController extends AbstractController
{
    public function index(InertiaInterface $inertia)
    {
        return $inertia->render('Dashboard', [
            // using array
            'usingArray' => $inertia->lazy(['SomeClass', 'someMethod']),
            // using string
            'usingString' => $inertia->lazy('SomeClass::someMethod'),
            // using callable
            'usingCallable' => $inertia->lazy(function () { return [...]; }),
        ]);
    }
}
```

--------------------------------

### Custom CSRF error response service implementation

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/csrf.md

Example PHP service that implements the DefaultInertiaErrorResponseInterface. The getResponse method returns a custom Response with a 400 status code. This service is referenced by the service override in services.yaml.

```php
namespace App\Service;

use Symfony\Component\HttpFoundation\Response;

/**
 * @author  Tudorache Leonard Valentin <tudorache.leonard@wyverr.com>
 */
final class MyCustomInertiaErrorResponse implements
  DefaultInertiaErrorResponseInterface
{
  public function getResponse(): Response
  {
    return new Response('Something went wrong with Inertia!', 400);
  }
}
```

--------------------------------

### Build client and server bundles

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/ssr.md

Run two build processes: one for the client-side bundle and one for the server-side bundle using the SSR config.

```shell
encore build
encore build -- -c ./webpack.ssr.config.js
```

--------------------------------

### Initialize Inertia in assets/app.js

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/encore_config_examples/vue.md

Set up the Inertia application instance within your main JavaScript entry point.

```javascript
//assets/app.js
import { createInertiaApp } from '@inertiajs/inertia-vue';
import Vue from 'vue';

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  setup({ el, app, props }) {
    new Vue({
      render: (h) => h(app, props),
    }).$mount(el);
  },
});
```

--------------------------------

### Create webpack.ssr.mix.js

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/ssr.md

Create a new file named webpack.ssr.mix.js, which is almost the same as webpack.config.js and must be kept alongside it.

```shell
touch webpack.ssr.mix.js
```

--------------------------------

### Enable SSR in config/packages/skipthedragon_inertia.yaml

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/ssr.md

Configuration to enable SSR and set the render URL.

```yaml
inertia:
  ssr:
    enabled: true
    url: 'http://127.0.0.1:13714/render'
```

--------------------------------

### Configure Encore for Svelte

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/encore_config_examples/svelte.md

Sets up Encore with a Svelte loader, aliases, entry point, and Babel configuration. Adjusts webpack config to resolve Svelte files and extensions.

```javascript
const Encore = require('@symfony/webpack-encore');
const path = require('path');

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore.setOutputPath('public/build/')
  .setPublicPath('/build')
  .addLoader({
    test: /\.(svelte)$/,
    use: {
      loader: 'svelte-loader',
      options: {
        emitCss: true,
        hotReload: true,
      },
    },
  })
  .addAliases({
    '@': path.resolve('assets/js'),
  })
  .addEntry('app', './assets/js/app.js')
  .splitEntryChunks()
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .disableSingleRuntimeChunk()
  .configureBabel(() => {}, {
    useBuiltIns: 'usage',
    corejs: 3,
  })
  .enableSassLoader();

const config = Encore.getWebpackConfig();
config.resolve.mainFields = ['svelte', 'browser', 'module', 'main'];
config.resolve.extensions = [
  '.wasm',
  '.mjs',
  '.js',
  '.json',
  '.jsx',
  '.vue',
  '.ts',
  '.tsx',
  '.svelte',
];

module.exports = config;
```

--------------------------------

### React Encore Configuration

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/encore_config_examples/react.md

Standard webpack.config.js configuration for enabling React, setting aliases, and configuring Babel with core-js.

```javascript
const Encore = require('@symfony/webpack-encore');
const path = require('path');

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore.setOutputPath('public/build/')
  .setPublicPath('/build')
  .enableReactPreset()
  .addAliases({
    '@': path.resolve('assets/js'),
  })
  .addEntry('app', './assets/js/app.js')
  .splitEntryChunks()
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .disableSingleRuntimeChunk()
  .configureBabel(() => {}, {
    useBuiltIns: 'usage',
    corejs: 3,
  })
  .enableSassLoader();

module.exports = Encore.getWebpackConfig();
```

--------------------------------

### Configuration to change root view

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/configuration.md

Configuration file to change the root view. Create config/packages/inertia.yaml and set the root_view option to the desired template name.

```yaml
inertia:
  root_view: 'name.html.twig'
```

--------------------------------

### Set asset version using version method

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/usage.md

Call the version method on the Inertia service to set an asset version, similar to Laravel's versioning.

```php
$inertia->version($version);
```

--------------------------------

### Base root template with inertia(page) and inertiaHead(page)

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/configuration.md

Recommended root template for Inertia. Includes assets and the inertia(page) and inertiaHead(page) functions. The inertia(page) function creates the base div with a data-page attribute containing initial page information.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inertia powered page</title>
    {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %}
    {{ inertiaHead(page) }}
  </head>
  <body>
    {{ inertia(page) }} {% block javascripts %} {{
    encore_entry_script_tags('app') }} {% endblock %}
  </body>
</html>
```

--------------------------------

### Run the Node.js SSR service

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/ssr.md

Run the SSR service via node. The service will be available at http://127.0.0.1:13714, which should be used as the ssr.url.

```shell
node public/build-ssr/ssr.js
```

--------------------------------

### Inject InertiaInterface via constructor in controller

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/usage.md

Use constructor injection to make the InertiaInterface available in a controller class. The render method returns an Inertia response with the component name and props.

```php
<?php
namespace App\Controller;

use Rompetomp\InertiaBundle\Architecture\InertiaInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;

class DashboardController extends AbstractController
{
  public function __construct(private InertiaInterface $inertia)
  {
  }

  public function index(): Response
  {
    return $this->inertia->render('Dashboard', ['prop' => 'propValue']);
  }
}
```

--------------------------------

### Configure Webpack Encore for Vue

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/encore_config_examples/vue.md

Update your webpack.config.js to enable the Vue loader and configure necessary aliases and build settings.

```javascript
const Encore = require('@symfony/webpack-encore');
const path = require('path');

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore.setOutputPath('public/build/')
  .setPublicPath('/build')
  .enableVueLoader()
  .addAliases({
    vue$: 'vue/dist/vue.runtime.esm.js',
    '@': path.resolve('assets/js'),
  })
  .addEntry('app', './assets/js/app.js')
  .splitEntryChunks()
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .disableSingleRuntimeChunk()
  .configureBabel(() => {}, {
    useBuiltIns: 'usage',
    corejs: 3,
  })
  .enableSassLoader();

module.exports = Encore.getWebpackConfig();
```

--------------------------------

### Configure CSRF settings in inertia.yaml

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/csrf.md

Default CSRF configuration values. Adjust these in config/packages/inertia.yaml. The cookie_name and header_name must match axios's xsrfCookieName and xsrfHeaderName if you changed axios credentials. Cookie settings match the Cookie class except httpOnly and partialCookie are always false.

```yaml
inertia:
  # The rest of your configuration here.....

  csrf:
    enabled: true
    # Be careful; when changing these values, they must match the values inside axios.
    # If you didn't mess with axios credential configuration, you can ignore cookie_name (xsrfCookieName) and header_name (xsrfHeaderName)
    cookie_name: XSRF-TOKEN
    header_name: X-XSRF-TOKEN

    # Cookie settings match the Cookie class. Except for: httpOnly which is always false and partialCookie which is always false.
    expire: 0
    path: /
    domain: null
    secure: false
    raw: false
    samesite: Lax
```

--------------------------------

### Inject InertiaInterface via method parameter in controller

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/usage.md

Use method injection to receive the InertiaInterface directly in the controller action. The render method returns an Inertia response with the component name and props.

```php
<?php
namespace App\Controller;

use Rompetomp\InertiaBundle\Architecture\InertiaInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;

class DashboardController extends AbstractController
{
  public function index(InertiaInterface $inertia): Response
  {
    return $inertia->render('Dashboard', ['prop' => 'propValue']);
  }
}
```

--------------------------------

### Generated div with data-page attribute

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/configuration.md

Shows the HTML output of the inertia(page) function. It includes a data-page attribute containing the initial page information as JSON-encoded and HTML-escaped.

```html
<div
  id="app"
  data-page="<?php echo htmlspecialchars(json_encode($page)); ?>"
></div>
```

--------------------------------

### Override error response service in services.yaml

Source: https://github.com/skipthedragon/inertia-bundle/blob/master/docs/csrf.md

Configuration to replace the default CSRF error response service. The custom service must implement the InertiaErrorResponseInterface. Place this in your config/services.yaml file.

```yaml
services:
  # The rest of your services here.....

  # Your custom service
  rompetomp_inertia.inertia_error_response:
    class: App\Service\MyCustomInertiaErrorResponse
```
Tokens:
Raw