React helmet

config/run.js

@@ -6,10 +6,10 @@ const statsFile = path.resolve('build/server/loadable-stats.json')
 const extractor = new lServer.ChunkExtractor({ statsFile })
 const fs = require('fs');
 
-
 const express = require('express');
 
 const PORT = 3000;
+const helmetExtractorRegex = /<title data-react-helmet="true">(.+)<\/title>/
 
 // const routes = ['/', '/page'];
 
@@ -34,9 +34,21 @@ const all = (req, res)=>{
           res.writeHead(200, { 'Content-Type': 'text/html' })
           console.log(`SSR of ${req.path}`);
 
-        const reactDom = moduleWithfault.default(extractor,location )
+        const [reactDom, helmet] = moduleWithfault.default(extractor,location )
+        const helmetTitle= helmet.title.toString()
+        const hasHelmetTitle = helmetTitle ? helmetTitle.match(helmetExtractorRegex): null 
+
+        if(hasHelmetTitle){
+          htmlData= htmlData
+          .replace(
+            /\s*<title>(.+)<\/title>\s*/,
+            helmetTitle
+          )
+        }
+
         return res.end(
-          htmlData.replace(
+          htmlData
+          .replace(
             '<div id="root"></div>',
             `<div id="root">${reactDom}</div>`
           )

package.json

@@ -60,6 +60,7 @@
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "^11.0.1",
     "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0",
     "react-refresh": "^0.8.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
@@ -82,7 +83,7 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "builds": "node scripts/buildserver.js",
-    "b": "npm run build && npm run builds",
+    "b": "npm run build && npm run builds && npm run dr",
     "test": "node scripts/test.js",
     "d": "node --inspect-brk scripts/build.js",
     "ds": "node --inspect-brk scripts/buildserver.js",
@@ -173,6 +174,7 @@
     "@loadable/webpack-plugin": "^5.14.0",
     "@types/loadable__component": "^5.13.1",
     "@types/loadable__server": "^5.12.3",
+    "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.1.7",
     "copyfiles": "^2.4.1",
     "patch-package": "^6.2.2"

src/App.tsx

@@ -3,6 +3,8 @@ import './App.css';
 import { BrowserRouter, StaticRouter, Route, Link } from "react-router-dom";
 import Home from "./Home"
 import { ChunkExtractorManager } from '@loadable/server'
+import {Helmet} from "react-helmet";
+
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import loadable from '@loadable/component'
@@ -12,6 +14,9 @@ const A = loadable(() =>{
 
 const Category = () => (
   <div>
+    <Helmet>
+        <title>Category title</title>
+    </Helmet>
     <h2>Category</h2>
     <h1>under Category</h1>
     <A/>
@@ -20,6 +25,9 @@ const Category = () => (
 
 const Products = () => (
   <div>
+    <Helmet>
+        <title>Products title</title>
+    </Helmet>
     <h2>Products</h2>
   </div>
 );

src/Home.tsx

@@ -2,10 +2,15 @@
 import React from 'react';
 import logo from './logo.svg';
 import Sebas from 'component-sebas'
+import {Helmet} from "react-helmet";
+
 
 const Home =() =>{
     return (
     <div className="App">
+        <Helmet>
+            <title>Home title</title>
+        </Helmet>
         <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>

src/server/index.tsx

@@ -1,12 +1,14 @@
 import  React from 'react'
 import  {renderToString} from 'react-dom/server'
 import  App from '../App' ;
+import Helmet from 'react-helmet'
 
 
 
 const renderK = (extractor: any, location?: string) =>{
 
     const reactDom = renderToString(<App extractor={extractor} location={location}/>)
+    const helmet = Helmet.renderStatic();
     console.log("🚀 ------------------------------------------------------------")
     console.log("🚀 ~ file: index.tsx ~ line 10 ~ renderK ~ reactDom", reactDom)
     console.log("🚀 ------------------------------------------------------------")
@@ -18,7 +20,7 @@ const renderK = (extractor: any, location?: string) =>{
         // // And you can even collect your style tags (if you use "mini-css-extract-plugin")
         // const styleTags = extractor.getStyleTags() // or extractor.getStyleElements();
 
-    return reactDom
+    return [reactDom, helmet]
 }