feat: add inertiaHead and add ssr in README.md (#41)

rompetomp · Aug 8, 2022 · a859d02 · a859d02
1 parent ecae408
commit a859d02
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -28,10 +28,10 @@ include your assets, as well as the `inertia(page)` function
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>{% block title %}Welcome!{% endblock %}</title>
     {% block stylesheets %}
         {{ encore_entry_link_tags('app') }}
     {% endblock %}
+    {{ inertiaHead(page) }}
 </head>
 <body>
 {{ inertia(page) }}
@@ -272,6 +272,84 @@ Like in Laravel, you can also pass a version to the Inertia services by calling
 $inertia->version($version);
 ```
 
+## Server-side rendering
+
+
+### Setting up Encore / webpack
+
+To run the webpack properly install `webpack-node-externals`
+```shell
+npm install webpack-node-externals
+```
+
+Next we will create a new file namely `webpack.ssr.config.js` this is almost the same with
+your `webpack.config.js`. Remember that you need to keep this both config.
+
+```shell
+touch webpack.ssr.mix.js
+```
+
+Here is an example file for `webpack.ssr.config.js`
+```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
+```
+
+### Enabling SSR
+
+To enable the ssr you need to add a configuration for your package `config/packages/rompetomp_inertia.yaml` file
+
+```yaml
+rompetomp_inertia:
+  ssr:
+    enabled: true
+    url: 'http://127.0.0.1:13714/render'
+```
+
+### Building your application
+
+You now have two build processes you need to run—one for your client-side bundle,
+and another for your server-side bundle:
+
+```shell
+encore build
+encore build -- -c ./webpack.ssr.config.js
+```
+
+The build folder for the ssr will be located in `public/build-ssr/ssr.js`.
+You can change the path by changing the output path (setOutputPath) in your `./webpack.ssr.config.js`
+
+### Running the Node.js Service
+
+To run the ssr service you will need to run it via node.
+
+```shell
+node public/build-ssr/ssr.js
+```
+
+This will be available in `http://127.0.0.1:13714` where this is the path we need to put in our `ssr.url`
+
 ## Projects using this bundle
 - [Ping CRM on Symfony](https://github.com/aleksblendwerk/pingcrm-symfony) - The official Inertia.js demo app, ported to Symfony
 - [Symfony + Inertia + Vuejs Template](https://github.com/cydrickn/symfony-intertia) - Github template repository that uses Symfony, Inertia and Vuejs
diff --git a/Twig/InertiaExtension.php b/Twig/InertiaExtension.php
@@ -36,7 +36,10 @@ public function __construct(InertiaInterface $inertia, GatewayInterface $gateway
 
     public function getFunctions(): array
     {
-        return [new TwigFunction('inertia', [$this, 'inertiaFunction'])];
+        return [
+            new TwigFunction('inertia', [$this, 'inertiaFunction']),
+            new TwigFunction('inertiaHead', [$this, 'inertiaHeadFunction']),
+        ];
     }
 
     public function inertiaFunction($page)
@@ -50,4 +53,16 @@ public function inertiaFunction($page)
 
         return new Markup('<div id="app" data-page="'.htmlspecialchars(json_encode($page)).'"></div>', 'UTF-8');
     }
+
+    public function inertiaHeadFunction($page)
+    {
+        if ($this->inertia->isSsr()) {
+            $response = $this->gateway->dispatch($page);
+            if ($response instanceof Response) {
+                return new Markup($response->head, 'UTF-8');
+            }
+        }
+
+        return new Markup('', 'UTF-8');
+    }
 }