import App from "./App";
import React from "react";
import express from "express";
import { renderToString } from "react-dom/server";

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const scripts = Object.keys(assets).reduce((scripts, key) => {
  return (
    scripts + `<script src="${assets[key].js}" defer crossorigin></script>`
  );
}, "");

console.log(scripts);

const server = express();

server
  .disable("x-powered-by")
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get("/*", (req, res) => {
    const markup = renderToString(<App />);
    res.send(
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${scripts}
    </head>
    <body>
        <div id="root">${markup}</div>
    </body>
</html>`
    );
  });

export default server;

@@ -228,36 +228,127 @@
 ets)
-.reduce((scripts, key) =%3E
+%0A  .map((key) =%3E %7B%0A    const script = assets%5Bkey%5D.js;%0A%0A    if (typeof script === 'undefined' %7C%7C script === null)
  %7B%0A
+    
   re
@@ -356,74 +356,223 @@
 urn 
-(%0A    scripts + %60%3Cscript src=%22$%7Bassets%5Bkey%5D.js%7D%22 defer crossorigin
+null;%0A    %7D%0A%0A    if (Array.isArray(script)) %7B%0A      return script%0A        .map((item) =%3E %7B%0A          return %60%3Cscript src=%22$%7Bitem%7D%22%3E%3C/script%3E%60;%0A        %7D)%0A        .join('');%0A    %7D%0A%0A    return %60%3Cscript src=%22$%7Bscript%7D%22
 %3E%3C/s
@@ -582,46 +582,75 @@
 pt%3E%60
+;
 %0A  
-);%0A%7D, %22%22);%0A%0Aconsole.log(scripts
+%7D)%0A  .filter((a) =%3E typeof a !== 'undefined' %7C%7C a !== null
 );%0A%0A
+%0A
 cons
@@ -1132,18 +1132,31 @@
 %7Bscripts
-%7D%0A
+.join('%5Cn')%7D%0A  
     %3C/he

load all client assets