https://github.com/cherifGsoul/inertia-psr15

PSR-15 Adapter for InertiaJS
https://github.com/cherifGsoul/inertia-psr15

hack hacktoberfest inertiajs inertiajs-adapter mezzio psr15 psr7 slim-framework

Last synced: 3 months ago
JSON representation

PSR-15 Adapter for InertiaJS

• Host: GitHub
• URL: https://github.com/cherifGsoul/inertia-psr15
• Owner: cherifGsoul
• License: mit
• Created: 2021-03-09T08:25:39.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-07-25T00:24:00.000Z (4 months ago)
• Last Synced: 2024-07-26T01:27:53.891Z (4 months ago)
• Topics: hack, hacktoberfest, inertiajs, inertiajs-adapter, mezzio, psr15, psr7, slim-framework
• Language: PHP
• Homepage: https://github.com/cherifGsoul/inertia-psr15
• Size: 44.9 KB
• Stars: 34
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-inertiajs - PSR-15

README

        
# inertia-psr15

Before using this library, is important to know [what is Inertia.js](https://inertiajs.com/#top), [what is it for](https://inertiajs.com/who-is-it-for) and [how it works](https://inertiajs.com/how-it-works), in the [official Inertia.js website](https://inertiajs.com/)

PHP PSR-15 [InertiaJS](https://inertiajs.com/) server-side adapter, it can be used with [Mezzio](https://mezzio.dev/), [Slim](https://www.slimframework.com/) or any framework that implements PSR-15 interfaces.

The adapter is a PSR-15 middleware to detect InertiaJS requests and prepare and send Response to be read and rendered 

by InertiaJS front-end components, the usage after installation and configuration can be easy as: 

```php

// In some RequestHandlerInterface class

$inertia = $request->getAttribute(InertiaMiddleware::INERTIA_ATTRIBUTE);

return $inertia->render('MyFrontEndComponent', [

    'someProp' => 'someProp Prop Value',

    'ohterProp' => 'ohterProp Prop Value'

]);

```

## Usage:

A [small application](https://github.com/cherifGsoul/mezzio-inertia-demo) was made to demonstrate how this adapter can be used in Mezzio application.

The adapter is designed to work with [Mezzio](https://mezzio.dev/) with little effort, in the following we assume that 

a Mezzio application was generated using [Mezzio Skeleton](https://github.com/mezzio/mezzio-skeleton) and Twig

was selected as the template engine:

### Installation:

1- Install the adapter:

```shell

composer require cherif/inertia-psr15

```

2- Add the inertia middleware to the middlewares pipeline:

```php

pipe('/files', $filesMiddleware);

$app->pipe(\Cherif\InertiaPsr15\Middleware\InertiaMiddleware::class);

// Register the routing middleware in the middleware pipeline.

// This middleware registers the Mezzio\Router\RouteResult request attribute.

$app->pipe(RouteMiddleware::class);

// ...

```

3- Please refer to [InertiaJS](https://inertiajs.com/client-side-setup) to install a client-side adapter.

4- Using Webpack is recommended in order to build the front-end application, however, to render the built JS/CSS

assets in a Twig template the following extension can be used:

```shell

composer require fullpipe/twig-webpack-extension

```

>> a factory might be needed to configure the Webpack extension 

5- Configure the templte to use Webpack extension and the Inertia Twig extension shipped with the adapter

by apdating `config/autoload/template.global.php` and `webpack.global.php` like the following:

```php

 [

        'paths' => [

            'error' => [dirname(__DIR__, 2) . '/templates/error'],

            '__main__' => [dirname(__DIR__, 2) . '/templates']

        ]

    ],

    'twig' => [

        'extensions' => [

            WebpackExtension::class,

            InertiaExtension::class

        ]

    ]

];

```

```php

 [

        'manifest_file' => dirname(__DIR__, 2) . '/public/build/manifest.json',

        'public_dir' => dirname(__DIR__, 2) . '/build',

    ]

];

```

6- The adapter needs just one backend template to render the application and by default it will look for 

`templates/app.html.twig` if a default template is not configured, the app template can be like the following:

```html

    

        

        

        {% webpack_entry_css 'build/app' %}

    

    

        {{ inertia(page) }}

        {% webpack_entry_js 'build/runtime' %}

        {% webpack_entry_js 'build/app' defer %}

    

```

>> The template uses Webpack extension (webpack_entry_css, webpack_entry_js) to render the assets and Inertia extension 

> `inertia(page)` to mount the front-end application.

After successful configuration the adapter can be used to render the front-end component instead of the HTML templates:

```php

declare(strict_types=1);

namespace App\Handler;

use Cherif\InertiaPsr15\Middleware\InertiaMiddleware;

use Cherif\InertiaPsr15\Service\InertiaInterface;

use Mezzio\LaminasView\LaminasViewRenderer;

use Mezzio\Plates\PlatesRenderer;

use Psr\Http\Message\ResponseInterface;

use Psr\Http\Message\ServerRequestInterface;

use Psr\Http\Server\RequestHandlerInterface;

class HomePageHandler implements RequestHandlerInterface

{

    public function handle(ServerRequestInterface $request): ResponseInterface

    {

        /** @var InertiaInterface $inertia */

        $inertia = $request->getAttribute(InertiaMiddleware::INERTIA_ATTRIBUTE);

        return $inertia->render('Home', [

            'greeting' => 'Hello Inertia PSR-15'

        ]);

    }

}

```

# Copyright

Mohammed Cherif BOUCHELAGHEM 2021