{"id":13610678,"url":"https://github.com/rompetomp/inertia-bundle","last_synced_at":"2025-10-05T13:30:32.510Z","repository":{"id":35056279,"uuid":"201484253","full_name":"rompetomp/inertia-bundle","owner":"rompetomp","description":"Inertia.js server-side adapter for Symfony","archived":true,"fork":false,"pushed_at":"2024-01-19T10:22:06.000Z","size":66,"stargazers_count":153,"open_issues_count":5,"forks_count":41,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-18T06:27:14.623Z","etag":null,"topics":["inertia","inertiajs","symfony-bundle"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rompetomp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-08-09T14:35:18.000Z","updated_at":"2024-11-20T07:47:45.000Z","dependencies_parsed_at":"2024-01-19T11:58:49.506Z","dependency_job_id":null,"html_url":"https://github.com/rompetomp/inertia-bundle","commit_stats":{"total_commits":53,"total_committers":15,"mean_commits":3.533333333333333,"dds":0.4528301886792453,"last_synced_commit":"889a96e13ad40835d53e848a5c35263b49c519b6"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rompetomp%2Finertia-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rompetomp%2Finertia-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rompetomp%2Finertia-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rompetomp%2Finertia-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rompetomp","download_url":"https://codeload.github.com/rompetomp/inertia-bundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235399012,"owners_count":18983814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inertia","inertiajs","symfony-bundle"],"created_at":"2024-08-01T19:01:46.972Z","updated_at":"2025-10-05T13:30:27.238Z","avatar_url":"https://github.com/rompetomp.png","language":"PHP","funding_links":[],"categories":["PHP","Adapters"],"sub_categories":["Server-side"],"readme":"# Inertia.js Symfony Adapter\n[![CI](https://github.com/rompetomp/inertia-bundle/workflows/CI/badge.svg)](https://github.com/rompetomp/inertia-bundle/actions)\n[![StyleCI](https://github.styleci.io/repos/201484253/shield?style=flat)](https://github.styleci.io/repos/201484253)\n\nThis is a Inertia.js server-side adapter based on [inertia-laravel](https://github.com/inertiajs/inertia-laravel), but\nfor Symfony 5 and 6.\n\n\u003e [!WARNING]\n\u003e ### Looking for a new owner\n\u003e As I don't work with Symfony or PHP anymore, I'm looking for someone who wants to take over the development of this project.\n\u003e As of now the project is unmaintained.\n\n\n## Installation\nFirst, make sure you have the twig, encore and serializer recipe:\n```console\ncomposer require twig encore symfony/serializer-pack\n```\n\nInstall using Composer:\n```console\ncomposer require rompetomp/inertia-bundle\n```\n```console\nyarn add @inertiajs/inertia\n```\n\n## Setup root template\nThe first step to using Inertia is creating a root template. We recommend using `app.html.twig`. This template should\ninclude your assets, as well as the `inertia(page)` function\n\n```twig\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    {% block stylesheets %}\n        {{ encore_entry_link_tags('app') }}\n    {% endblock %}\n    {{ inertiaHead(page) }}\n\u003c/head\u003e\n\u003cbody\u003e\n{{ inertia(page) }}\n{% block javascripts %}\n    {{ encore_entry_script_tags('app') }}\n{% endblock %}\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe `inertia(page)` function is a helper function for creating our base `div`. It includes a `data-page` attribute which\ncontains the initial page information. This is what it looks like:\n```php\n\u003cdiv id=\"app\" data-page=\"\u003c?php echo htmlspecialchars(json_encode($page)); ?\u003e\"\u003e\u003c/div\u003e\n```\n\nIf you'd like a different root view, you can change it by creating a `config/packages/rompetomp_inertia.yaml` file\nand including this config:\n```yaml\nrompetomp_inertia:\n  root_view: 'name.html.twig'\n```\n\n## Set up the frontend adapter\nFind a frontend adapter that you wish to use here https://github.com/inertiajs. The README's are using Laravel's Webpack\nMix. It's not hard translating this to Webpack Encore, just follow the documentation here: https://symfony.com/doc/current/frontend.html.\n\n### Webpack Encore Examples\nFor Vue:\n```console\nyarn add @inertiajs/inertia-vue\n```\n\n```javascript\nconst Encore = require('@symfony/webpack-encore')\nconst path = require('path')\n\nif (!Encore.isRuntimeEnvironmentConfigured()) {\n  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')\n}\n\nEncore\n  .setOutputPath('public/build/')\n  .setPublicPath('/build')\n  .enableVueLoader()\n  .addAliases({\n    vue$: 'vue/dist/vue.runtime.esm.js',\n    '@': path.resolve('assets/js')\n  })\n  .addEntry('app', './assets/js/app.js')\n  .splitEntryChunks()\n  .cleanupOutputBeforeBuild()\n  .enableSourceMaps(!Encore.isProduction())\n  .enableVersioning(Encore.isProduction())\n  .disableSingleRuntimeChunk()\n  .configureBabel(() =\u003e {}, {\n    useBuiltIns: 'usage',\n    corejs: 3\n  })\n  .enableSassLoader()\n\nmodule.exports = Encore.getWebpackConfig()\n```\n\n```javascript\n//assets/app.js\nimport { createInertiaApp } from '@inertiajs/inertia-vue'\nimport Vue from \"vue\";\n\ncreateInertiaApp({\n    resolve: name =\u003e require(`./Pages/${name}`),\n    setup({ el, app, props }) {\n        new Vue({\n            render: h =\u003e h(app, props),\n        }).$mount(el)\n    },\n})\n```\n\nFor React:\n```javascript\nconst Encore = require('@symfony/webpack-encore')\nconst path = require('path')\n\nif (!Encore.isRuntimeEnvironmentConfigured()) {\n  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')\n}\n\nEncore\n  .setOutputPath('public/build/')\n  .setPublicPath('/build')\n  .enableReactPreset()\n  .addAliases({\n    '@': path.resolve('assets/js')\n  })\n  .addEntry('app', './assets/js/app.js')\n  .splitEntryChunks()\n  .cleanupOutputBeforeBuild()\n  .enableSourceMaps(!Encore.isProduction())\n  .enableVersioning(Encore.isProduction())\n  .disableSingleRuntimeChunk()\n  .configureBabel(() =\u003e {}, {\n    useBuiltIns: 'usage',\n    corejs: 3\n  })\n  .enableSassLoader()\n\nmodule.exports = Encore.getWebpackConfig()\n```\n\nFor Svelte:\n```javascript\nconst Encore = require('@symfony/webpack-encore')\nconst path = require('path')\n\nif (!Encore.isRuntimeEnvironmentConfigured()) {\n  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')\n}\n\nEncore\n  .setOutputPath('public/build/')\n  .setPublicPath('/build')\n  .addLoader({\n    test: /\\.(svelte)$/,\n    use: {\n      loader: 'svelte-loader',\n      options: {\n        emitCss: true,\n        hotReload: true,\n      },\n    },\n  })\n  .addAliases({\n    '@': path.resolve('assets/js')\n  })\n  .addEntry('app', './assets/js/app.js')\n  .splitEntryChunks()\n  .cleanupOutputBeforeBuild()\n  .enableSourceMaps(!Encore.isProduction())\n  .enableVersioning(Encore.isProduction())\n  .disableSingleRuntimeChunk()\n  .configureBabel(() =\u003e {}, {\n    useBuiltIns: 'usage',\n    corejs: 3\n  })\n  .enableSassLoader()\n\nconst config = Encore.getWebpackConfig()\nconfig.resolve.mainFields = ['svelte', 'browser', 'module', 'main']\nconfig.resolve.extensions =  ['.wasm', '.mjs', '.js', '.json', '.jsx', '.vue', '.ts', '.tsx', '.svelte']\n\nmodule.exports = config\n```\n\n## Making Inertia responses\nTo make an Inertia response, inject the `Rompetomp\\InertiaBundle\\Service\\InertiaInterface $inertia` typehint in your \ncontroller, and use the render function on that Service:\n```php\n\u003c?php\nnamespace App\\Controller;\n\nuse Rompetomp\\InertiaBundle\\Service\\InertiaInterface;\nuse Symfony\\Bundle\\FrameworkBundle\\Controller\\AbstractController;\n\nclass DashboardController extends AbstractController\n{\n    public function index(InertiaInterface $inertia)\n    {\n        return $inertia-\u003erender('Dashboard', ['prop' =\u003e 'propValue']);\n    }\n}\n```\n\n## Sharing data\nTo share data with all your components, use `$inertia-\u003eshare($key, $data)`. This can be done in an EventSubscriber:\n```php\n\u003c?php\n\nnamespace App\\EventSubscriber;\n\nuse Rompetomp\\InertiaBundle\\Service\\InertiaInterface;\nuse Symfony\\Component\\EventDispatcher\\EventSubscriberInterface;\nuse Symfony\\Component\\HttpKernel\\KernelEvents;\n\nclass InertiaSubscriber implements EventSubscriberInterface\n{\n    /** @var \\Rompetomp\\InertiaBundle\\Service\\InertiaInterface */\n    protected $inertia;\n\n    /**\n     * AppSubscriber constructor.\n     *\n     * @param \\Rompetomp\\InertiaBundle\\Service\\InertiaInterface $inertia\n     */\n    public function __construct(InertiaInterface $inertia)\n    {\n        $this-\u003einertia = $inertia;\n    }\n\n    public static function getSubscribedEvents()\n    {\n        return [\n            KernelEvents::CONTROLLER =\u003e 'onControllerEvent',\n        ];\n    }\n\n    public function onControllerEvent($event)\n    {\n        $this-\u003einertia-\u003eshare(\n            'Auth::user', \n            [\n                'name' =\u003e 'Hannes', // Synchronously\n                'posts' =\u003e function () {\n                    return [1 =\u003e 'Post'];\n                }   \n            ]\n        );\n    }\n}\n```\n\n## View data\nIf you want to pass data to your root template, you can do that by passing a third parameter to the render function:\n```php\nreturn $inertia-\u003erender('Dashboard', ['prop' =\u003e 'propValue'], ['title' =\u003e 'Page Title']);\n```\n\nYou can also pass these with the function `viewData`, just like you would pass data to the `share` function:\n```php\n$this-\u003einertia-\u003eviewData('title', 'Page Title');\n```\n\nYou can access this data in your layout file under the `viewData` variable.\n\n## Asset versioning\nLike in Laravel, you can also pass a version to the Inertia services by calling\n```php\n$inertia-\u003eversion($version);\n```\n\n## Lazy Prop\n\nIt's more efficient to use lazy data evaluation server-side you are using partial reloads.\n\nTo use lazy data you need to use `Rompetomp\\InertiaBundle\\Service\\Inertia::lazy`\n\nSample usage:\n```php\n\u003c?php\nnamespace App\\Controller;\n\nuse Rompetomp\\InertiaBundle\\Service\\InertiaInterface;\nuse Symfony\\Bundle\\FrameworkBundle\\Controller\\AbstractController;\n\nclass DashboardController extends AbstractController\n{\n    public function index(InertiaInterface $inertia)\n    {\n        return $inertia-\u003erender('Dashboard', [\n            // using array\n            'usingArray' =\u003e $inertia-\u003elazy(['SomeClass', 'someMethod']),\n            // using string\n            'usingString' =\u003e $inertia-\u003elazy('SomeClass::someMethod'),\n            // using callable\n            'usingCallable' =\u003e $inertia-\u003elazy(function () { return [...]; }),\n        ]);\n    }\n}\n```\n\nThe `lazy` method can accept callable, array and string\nWhen using string or array, the service will try to check if it is existing service in container if not\nit will just proceed to call the function\n\n## Server-side rendering\n\nFor frontend configuration just follow the document https://inertiajs.com/server-side-rendering#setting-up-ssr\n\n### Setting up Encore / webpack\n\nTo run the webpack properly install `webpack-node-externals`\n```shell\nnpm install webpack-node-externals\n```\n\nNext we will create a new file namely `webpack.ssr.config.js` this is almost the same with\nyour `webpack.config.js`. Remember that you need to keep this both config.\n\n```shell\ntouch webpack.ssr.mix.js\n```\n\nHere is an example file for `webpack.ssr.config.js`\n```js\nconst Encore = require('@symfony/webpack-encore')\nconst webpackNodeExternals = require('webpack-node-externals')\nconst path = require('path')\n\nif (!Encore.isRuntimeEnvironmentConfigured()) {\n    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')\n}\n\nEncore\n    .setOutputPath('public/build-ssr/')\n    .setPublicPath('/build-ssr')\n    .enableVueLoader(() =\u003e {}, { version: 3 })\n    .addEntry('ssr', './assets/ssr.js')\n    .cleanupOutputBeforeBuild()\n    .enableSourceMaps(!Encore.isProduction())\n    .enableVersioning(Encore.isProduction())\n    .enableSassLoader()\n\nconst config = Encore.getWebpackConfig();\nconfig.target = 'node';\nconfig.externals = [webpackNodeExternals()];\n\nmodule.exports = config\n```\n\n### Enabling SSR\n\nTo enable the ssr you need to add a configuration for your package `config/packages/rompetomp_inertia.yaml` file\n\n```yaml\nrompetomp_inertia:\n  ssr:\n    enabled: true\n    url: 'http://127.0.0.1:13714/render'\n```\n\n### Building your application\n\nYou now have two build processes you need to run—one for your client-side bundle,\nand another for your server-side bundle:\n\n```shell\nencore build\nencore build -- -c ./webpack.ssr.config.js\n```\n\nThe build folder for the ssr will be located in `public/build-ssr/ssr.js`.\nYou can change the path by changing the output path (setOutputPath) in your `./webpack.ssr.config.js`\n\n### Running the Node.js Service\n\nTo run the ssr service you will need to run it via node.\n\n```shell\nnode public/build-ssr/ssr.js\n```\n\nThis will be available in `http://127.0.0.1:13714` where this is the path we need to put in our `ssr.url`\n\n## Projects using this bundle\n- [Ping CRM on Symfony](https://github.com/aleksblendwerk/pingcrm-symfony) - The official Inertia.js demo app, ported to Symfony\n- [Symfony + Inertia + Vuejs Template](https://github.com/cydrickn/symfony-intertia) - Github template repository that uses Symfony, Webpack/Encore, Inertia and Vuejs\n- [Symfony + Vite + Inertia + Vuejs Template](https://github.com/cydrickn/sviv) - Github template repository uses Symfony, Vite, Inertia and Vuejs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frompetomp%2Finertia-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frompetomp%2Finertia-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frompetomp%2Finertia-bundle/lists"}