underpost 2.7.7 → 2.7.81

package/src/client/ssr/common/SsrCore.js

@@ -0,0 +1,91 @@
+const s = (el) => document.querySelector(el);
+
+const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
+
+const htmls = (el, html) => (s(el).innerHTML = html);
+
+const s4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+
+const range = (start, end) => {
+  return end < start
+    ? range(end, start).reverse()
+    : Array.apply(0, Array(end - start + 1)).map((element, index) => index + start);
+};
+
+const timer = (ms) => new Promise((res) => setTimeout(res, ms));
+
+const newInstance = (obj) => {
+  // structuredClone() 2022 ES6 feature
+  try {
+    return JSON.parse(JSON.stringify(obj));
+  } catch (error) {
+    return { error: error.message };
+  }
+};
+
+const fullScreenIn = () => {
+  const elem = document.documentElement;
+  if (elem.requestFullscreen) {
+    elem.requestFullscreen();
+  } else if (elem.mozRequestFullScreen) {
+    /* Firefox */
+    elem.mozRequestFullScreen();
+  } else if (elem.webkitRequestFullscreen) {
+    /* Chrome, Safari & Opera */
+    elem.webkitRequestFullscreen();
+  } else if (elem.msRequestFullscreen) {
+    /* IE/Edge */
+    elem = window.top.document.body; //To break out of frame in IE
+    elem.msRequestFullscreen();
+  }
+};
+
+const borderChar = (px, color, selectors) => {
+  if (selectors) {
+    return selectors
+      .map(
+        (selector) => html`
+          <style>
+            ${selector} {
+              text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color},
+                -${px}px -${px}px ${px}px ${color}, ${px}px ${px}px ${px}px ${color};
+            }
+          </style>
+        `,
+      )
+      .join('');
+  }
+  return html`
+    text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color}, -${px}px -${px}px ${px}px
+    ${color}, ${px}px ${px}px ${px}px ${color};
+  `;
+};
+const getLang = () =>
+  localStorage.getItem('lang') ? localStorage.getItem('lang') : navigator.language || navigator.userLanguage;
+
+const loggerFactory = (meta) => {
+  meta = meta.url.split('/').pop();
+  const types = ['error', 'warn', 'info', 'debug'];
+  const logger = {
+    log: function (type, args) {
+      if (location.hostname !== 'localhost' && console.log() !== null) {
+        console.log = () => null;
+        console.error = () => null;
+        console.info = () => null;
+        console.warn = () => null;
+      }
+      return location.hostname === 'localhost'
+        ? console[type](`[${meta}] ${new Date().toISOString()} ${type}:`, ...args)
+        : null;
+    },
+  };
+  types.map(
+    (type) =>
+      (logger[type] = function (...args) {
+        return this.log(type, args);
+      }),
+  );
+  return logger;
+};
+
+export { getLang, s, append, s4, range, timer, htmls, newInstance, fullScreenIn, borderChar, loggerFactory };

package/src/client/ssr/common/Translate.js

@@ -0,0 +1,26 @@
+const TranslateCore = {
+  ['server-maintenance']: {
+    en: "The server is under maintenance <br> we'll be back soon.",
+    es: 'El servidor está en mantenimiento <br> volveremos pronto.',
+  },
+  ['no-internet-connection']: {
+    en: 'No internet connection <br> verify your network',
+    es: 'Sin conexión a internet <br> verifica tu red',
+  },
+  ['page-not-found']: {
+    en: 'Page not found',
+    es: 'Página no encontrada',
+  },
+  ['page-broken']: {
+    es: 'Algo salio mal',
+    en: 'Something went wrong',
+  },
+  ['back']: {
+    en: 'Back to <br>  homepage',
+    es: 'Volver a  <br> la pagina principal',
+  },
+};
+
+const Translate = (key) => TranslateCore[key][getLang().match('es') ? 'es' : 'en'];
+
+export { Translate };

package/src/client/ssr/common/Worker.js

@@ -0,0 +1,28 @@
+const Worker = {
+  instance: async function (options = { render: async () => {} }) {
+    window.serviceWorkerReady = true;
+    append(
+      'body',
+      html`
+        <style>
+          body {
+            background-color: #dcdcdc;
+            color: #303030;
+            font-family: arial;
+            font-size: 16px;
+          }
+          .page-render {
+            min-height: 100vh;
+          }
+          a {
+            color: #000000;
+          }
+        </style>
+        <div class="in page-render"></div>
+      `,
+    );
+    await options.render();
+  },
+};
+
+export { Worker };

package/src/client/ssr/{body-components → components/body}/CacheControl.js

@@ -109,6 +109,6 @@ SrrComponent = ({ ttiLoadTimeLimit }) => {
       const CacheControl = ${CacheControl};
       CacheControl({ ttiLoadTimeLimit: ${ttiLoadTimeLimit ? ttiLoadTimeLimit : 1000 * 70 * 1} });
     </script>
-    <div class="clean-cache-container">v2.7.7</div>
+    <div class="clean-cache-container">v2.7.81</div>
   `;
 };

package/src/client/ssr/{body-components → components/body}/DefaultSplashScreen.js

@@ -1,8 +1,19 @@
-SrrComponent = ({ base64BackgroundImage }) => html`
+SrrComponent = ({ base64BackgroundImage, metadata }) => html`
+  ${base64BackgroundImage
+    ? html`<style>
+        .ssr-background-image {
+          background-image: url('${base64BackgroundImage}');
+        }
+      </style>`
+    : metadata?.themeColor
+    ? html`<style>
+        .ssr-background-image {
+          background: ${metadata.themeColor};
+        }
+      </style>`
+    : ''}
+
   <style>
-    .ssr-background-image {
-      background-image: url('${base64BackgroundImage}');
-    }
     .ssr-top-bar {
       background: #ffffff;
       height: 100px;

package/src/client/ssr/offline/default.index.js

@@ -0,0 +1,31 @@
+import { htmls, loggerFactory } from '../common/SsrCore.js';
+import { Alert } from '../common/Alert.js';
+import { Translate } from '../common/Translate.js';
+import { Worker } from '../common/Worker.js';
+/*imports*/
+
+const logger = loggerFactory({ url: '/offline.js' });
+
+window.onload = () =>
+  Worker.instance({
+    render: async () => {
+      window.ononline = async () => {
+        location.href = '/';
+      };
+      window.onoffline = async () => {
+        htmls(`.page-render`, html`${await Alert.noInternet({ Translate })}`);
+      };
+      try {
+        if (navigator.onLine) {
+          const maintenance = await fetch(location.origin + '/favicon.ico');
+          if (maintenance.status !== 200) {
+            htmls(`.page-render`, html`${await Alert.maintenance({ Translate })}`);
+          } else window.ononline();
+        }
+        throw new Error(`no internet connection`);
+      } catch (error) {
+        logger.error(error);
+        window.onoffline();
+      }
+    },
+  });

package/src/client/ssr/pages/404.js

@@ -0,0 +1,12 @@
+import { e404 } from '../common/Alert.js';
+import { append } from '../common/SsrCore.js';
+import { Translate } from '../common/Translate.js';
+import { Worker } from '../common/Worker.js';
+/*imports*/
+
+window.onload = () =>
+  Worker.instance({
+    render: async () => {
+      append('.page-render', await e404({ Translate }));
+    },
+  });

package/src/client/ssr/pages/500.js

@@ -0,0 +1,12 @@
+import { e500 } from '../common/Alert.js';
+import { append } from '../common/SsrCore.js';
+import { Translate } from '../common/Translate.js';
+import { Worker } from '../common/Worker.js';
+/*imports*/
+
+window.onload = () =>
+  Worker.instance({
+    render: async () => {
+      append('.page-render', await e500({ Translate }));
+    },
+  });

package/src/client/sw/default.sw.js

@@ -179,15 +179,17 @@ self.addEventListener('fetch', (event) => {
           }
 
           logger.error('Fetch failed; returning offline page instead.', { error, path });
-
-          // const cache = await caches.open(CACHE_NAME);
-          // const cachedResponse = await cache.match(OFFLINE_URL);
-          // return cachedResponse;
-
-          const response = new Response(JSON.stringify({ status: 'error', message: 'offline test response' }));
-          // response.status = 200;
-          response.headers.set('Content-Type', 'application/json');
-          return response;
+          try {
+            const cache = await caches.open('/offline.html');
+            const cachedResponse = await cache.match('/offline.html');
+            return cachedResponse;
+          } catch (error) {
+            logger.error('Error opening cache for offline page', { error, path });
+            const response = new Response(JSON.stringify({ status: 'error', message: 'offline test response' }));
+            // response.status = 200;
+            response.headers.set('Content-Type', 'application/json');
+            return response;
+          }
         }
       })(),
     );

package/src/mailer/EmailRender.js

@@ -59,7 +59,7 @@ const EmailRender = {
     for (const templateKey of Object.keys(options.templates)) {
       const ssrEmailComponent = options.templates[templateKey];
       let SrrComponent;
-      eval(await srcFormatted(fs.readFileSync(`./src/client/ssr/email-components/${ssrEmailComponent}.js`, 'utf8')));
+      eval(await srcFormatted(fs.readFileSync(`./src/client/ssr/components/email/${ssrEmailComponent}.js`, 'utf8')));
       templates[templateKey] = SrrComponent(this, options);
     }
     return templates;

package/src/server/client-build-live.js

@@ -71,6 +71,12 @@ const clientLiveBuild = async () => {
       } else if (srcPath.split('src')[1].startsWith(`\\client\\sw`)) {
         const publicBuildPath = `./public/${baseHost}/sw.js`;
         liveClientBuildPaths.push({ srcBuildPath, publicBuildPath });
+      } else if (
+        srcPath.split('src')[1].startsWith(`\\client\\offline`) &&
+        srcPath.split('src')[1].startsWith(`index.js`)
+      ) {
+        const publicBuildPath = `./public/${baseHost}/offline.js`;
+        liveClientBuildPaths.push({ srcBuildPath, publicBuildPath });
       } else if (srcPath.split('src')[1].startsWith(`\\client`) && srcPath.slice(-9) === '.index.js') {
         for (const view of views) {
           const publicBuildPath = `./public/${baseHost}${view.path === '/' ? '' : view.path}/${clientId}.index.js`;

package/src/server/client-build.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import fs from 'fs-extra';
-import { srcFormatted, componentFormatted, viewFormatted } from './client-formatted.js';
+import { srcFormatted, componentFormatted, viewFormatted, ssrFactory } from './client-formatted.js';
 import { loggerFactory } from './logger.js';
 import { cap, newInstance, orderArrayFromAttrInt, titleFormatted } from '../client/components/core/CommonJs.js';
 import UglifyJS from 'uglify-js';
@@ -112,6 +112,16 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
   const enableLiveRebuild =
     options && options.liveClientBuildPaths && options.liveClientBuildPaths.length > 0 ? true : false;
 
+  // common ssr components
+  let jsSsrCommonComponents = '';
+  {
+    const files = await fs.readdir(`./src/client/ssr/common`);
+    for (const relativePath of files)
+      jsSsrCommonComponents += await srcFormatted(
+        fs.readFileSync(`./src/client/ssr/common/${relativePath}`, 'utf8').split('export')[0],
+      );
+  }
+
   let currentPort = parseInt(process.env.PORT) + 1;
   for (const host of Object.keys(confServer)) {
     const paths = orderArrayFromAttrInt(Object.keys(confServer[host]), 'length', 'asc');
@@ -274,18 +284,14 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
 
       const buildId = `${client}.index`;
       const siteMapLinks = [];
+      let Render = () => '';
+      eval(await srcFormatted(fs.readFileSync(`./src/client/ssr/Render.js`, 'utf8')));
 
       if (views) {
-        // build service worker
-        if (path === '/') {
-          const jsSrcPath = fs.existsSync(`./src/client/sw/${publicClientId}.sw.js`)
-            ? `./src/client/sw/${publicClientId}.sw.js`
-            : `./src/client/sw/default.sw.js`;
-
-          const jsPublicPath = `${rootClientPath}/sw.js`;
-
+        const buildJsSrcPage = async (jsSrcPath, jsPublicPath) => {
           if (!(enableLiveRebuild && !options.liveClientBuildPaths.find((p) => p.srcBuildPath === jsSrcPath))) {
-            const jsSrc = viewFormatted(await srcFormatted(fs.readFileSync(jsSrcPath, 'utf8')), dists, path, baseHost);
+            let jsSrc = viewFormatted(await srcFormatted(fs.readFileSync(jsSrcPath, 'utf8')), dists, path, baseHost);
+            if (jsSrc.split('/*imports*/')[1]) jsSrc = jsSrc.split('/*imports*/')[1];
 
             fs.writeFileSync(
               jsPublicPath,
@@ -293,7 +299,76 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
               'utf8',
             );
           }
+        };
+
+        if (path === '/') {
+          // service woker
+          await buildJsSrcPage(
+            fs.existsSync(`./src/client/sw/${publicClientId}.sw.js`)
+              ? `./src/client/sw/${publicClientId}.sw.js`
+              : `./src/client/sw/default.sw.js`,
+            `${rootClientPath}/sw.js`,
+          );
+        }
+
+        // offline html
+        {
+          await buildJsSrcPage(
+            fs.existsSync(`./src/client/ssr/offline/${publicClientId}.index.js`)
+              ? `./src/client/ssr/offline/${publicClientId}.index.js`
+              : `./src/client/ssr/offline/default.index.js`,
+            `${rootClientPath}/offline.js`,
+          );
+
+          const htmlSrc = Render({
+            title: metadata?.title ? metadata.title : cap(client),
+            ssrPath: '/',
+            ssrHeadComponents: '',
+            ssrBodyComponents: '',
+            baseSsrLib: jsSsrCommonComponents + fs.readFileSync(`${rootClientPath}/offline.js`, 'utf8'),
+          });
+
+          fs.writeFileSync(
+            `${rootClientPath}offline.html`,
+            minifyBuild || process.env.NODE_ENV === 'production'
+              ? await minify(htmlSrc, {
+                  minifyCSS: true,
+                  minifyJS: true,
+                  collapseBooleanAttributes: true,
+                  collapseInlineTagWhitespace: true,
+                  collapseWhitespace: true,
+                })
+              : htmlSrc,
+            'utf8',
+          );
         }
+        // ssr pages
+        for (const page of await fs.readdir('./src/client/ssr/pages')) {
+          await buildJsSrcPage(`./src/client/ssr/pages/${page}`, `${rootClientPath}/${page}`);
+
+          const htmlSrc = Render({
+            title: metadata?.title ? metadata.title : cap(client),
+            ssrPath: '/',
+            ssrHeadComponents: '',
+            ssrBodyComponents: '',
+            baseSsrLib: jsSsrCommonComponents + fs.readFileSync(`${rootClientPath}/${page}`, 'utf8'),
+          });
+
+          fs.writeFileSync(
+            `${rootClientPath}${page.slice(0, -3)}.html`,
+            minifyBuild || process.env.NODE_ENV === 'production'
+              ? await minify(htmlSrc, {
+                  minifyCSS: true,
+                  minifyJS: true,
+                  collapseBooleanAttributes: true,
+                  collapseInlineTagWhitespace: true,
+                  collapseWhitespace: true,
+                })
+              : htmlSrc,
+            'utf8',
+          );
+        }
+
         if (
           !(
             enableLiveRebuild &&
@@ -345,11 +420,9 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
                 confSSR[view.ssr].head.unshift('Production');
 
               for (const ssrHeadComponent of confSSR[view.ssr].head) {
-                let SrrComponent;
-                eval(
-                  await srcFormatted(
-                    fs.readFileSync(`./src/client/ssr/head-components/${ssrHeadComponent}.js`, 'utf8'),
-                  ),
+                const SrrComponent = await ssrFactory(
+                  `./src/client/ssr/components/head/${ssrHeadComponent}.js`,
+                  jsSsrCommonComponents,
                 );
 
                 switch (ssrHeadComponent) {
@@ -431,11 +504,9 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
               }
 
               for (const ssrBodyComponent of confSSR[view.ssr].body) {
-                let SrrComponent;
-                eval(
-                  await srcFormatted(
-                    fs.readFileSync(`./src/client/ssr/body-components/${ssrBodyComponent}.js`, 'utf8'),
-                  ),
+                const SrrComponent = await ssrFactory(
+                  `./src/client/ssr/components/body/${ssrBodyComponent}.js`,
+                  jsSsrCommonComponents,
                 );
                 switch (ssrBodyComponent) {
                   case 'UnderpostDefaultSplashScreen':
@@ -448,7 +519,10 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
                           .readFileSync(backgroundImage)
                           .toString('base64')}`,
                       });
+                      break;
                     } else {
+                      ssrHeadComponents += SrrComponent({ metadata });
+                      break;
                       const bufferBackgroundImage = await getBufferPngText({
                         text: ' ',
                         textColor: metadata?.themeColor ? metadata.themeColor : '#ececec',
@@ -459,7 +533,6 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
                         base64BackgroundImage: `data:image/png;base64,${bufferBackgroundImage.toString('base64')}`,
                       });
                     }
-                    break;
 
                   case 'CyberiaSplashScreenLore': {
                     ssrBodyComponents += SrrComponent({
@@ -519,16 +592,13 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
                 }
               }
             }
-
-            let Render = () => '';
-            eval(await srcFormatted(fs.readFileSync(`./src/client/ssr/Render.js`, 'utf8')));
-
             const htmlSrc = Render({
               title,
               buildId,
               ssrPath,
               ssrHeadComponents,
               ssrBodyComponents,
+              baseSsrLib: jsSsrCommonComponents,
             });
 
             /** @type {import('sitemap').SitemapItem} */

package/src/server/client-formatted.js

@@ -1,5 +1,7 @@
 'use strict';
 
+import fs from 'fs-extra';
+
 const srcFormatted = (src) =>
   src
     .replaceAll(' html`', '`')
@@ -45,4 +47,12 @@ const viewFormatted = (src, dists, proxyPath, baseHost = '') => {
   return src.replaceAll(`from './`, componentFromFormatted).replaceAll(`from '../`, componentFromFormatted);
 };
 
-export { srcFormatted, JSONweb, componentFormatted, viewFormatted };
+const ssrFactory = async (componentPath = '', jsSsrCommonComponents) => {
+  let SrrComponent = () => {};
+  let render = await srcFormatted(fs.readFileSync(componentPath, 'utf8'));
+  if (render.split('/*imports*/')[1]) render = render.split('/*imports*/')[1];
+  eval(jsSsrCommonComponents + render);
+  return SrrComponent;
+};
+
+export { srcFormatted, JSONweb, componentFormatted, viewFormatted, ssrFactory };

package/src/server/client-icons.js

@@ -140,7 +140,7 @@ const buildIcons = async ({
     for (const file of response.files)
       fs.writeFileSync(`./src/client/public/${publicClientId}/${file.name}`, file.contents, 'utf8');
 
-    const ssrPath = `./src/client/ssr/head-components/Pwa${getCapVariableName(publicClientId)}.js`;
+    const ssrPath = `./src/client/ssr/components/head/Pwa${getCapVariableName(publicClientId)}.js`;
     if (!fs.existsSync(ssrPath))
       fs.writeFileSync(ssrPath, 'SrrComponent = () => html`' + response.html.join(`\n`) + '`;', 'utf8');
   } catch (error) {

package/src/server/conf.js

@@ -240,8 +240,8 @@ const buildClientSrc = async (
   }
 
   fs.writeFileSync(
-    `./src/client/ssr/head-components/${toClientVariableName}Scripts.js`,
-    formattedSrc(fs.readFileSync(`./src/client/ssr/head-components/${fromClientVariableName}Scripts.js`, 'utf8')),
+    `./src/client/ssr/components/head/${toClientVariableName}Scripts.js`,
+    formattedSrc(fs.readFileSync(`./src/client/ssr/components/head/${fromClientVariableName}Scripts.js`, 'utf8')),
     'utf8',
   );
 
@@ -560,7 +560,7 @@ const validateTemplatePath = (absolutePath = '') => {
   const confServer = DefaultConf.server[host][path];
   const confClient = DefaultConf.client[client];
   const confSsr = DefaultConf.ssr[ssr];
-  const clients = Object.keys(confClient).concat(['core', 'test']);
+  const clients = Object.keys(confClient).concat(['core', 'test', 'default']);
 
   if (absolutePath.match('src/api') && !confServer.apis.find((p) => absolutePath.match(`src/api/${p}/`))) {
     return false;
@@ -584,14 +584,14 @@ const validateTemplatePath = (absolutePath = '') => {
     return false;
   }
   if (
-    absolutePath.match('src/client/ssr/body-components') &&
-    !confSsr.body.find((p) => absolutePath.match(`src/client/ssr/body-components/${p}.js`))
+    absolutePath.match('src/client/ssr/components/body') &&
+    !confSsr.body.find((p) => absolutePath.match(`src/client/ssr/components/body/${p}.js`))
   ) {
     return false;
   }
   if (
-    absolutePath.match('src/client/ssr/head-components') &&
-    !confSsr.head.find((p) => absolutePath.match(`src/client/ssr/head-components/${p}.js`))
+    absolutePath.match('src/client/ssr/components/head') &&
+    !confSsr.head.find((p) => absolutePath.match(`src/client/ssr/components/head/${p}.js`))
   ) {
     return false;
   }
@@ -599,6 +599,7 @@ const validateTemplatePath = (absolutePath = '') => {
   if (
     absolutePath.match('/client') &&
     absolutePath.match('.index.js') &&
+    !absolutePath.match('/offline') &&
     !clients.find((p) => absolutePath.match(`src/client/${capFirst(p)}.index.js`))
   ) {
     return false;
@@ -695,6 +696,7 @@ const execDeploy = async (options = { deployId: 'default' }) => {
 const deployRun = async (dataDeploy, reset) => {
   if (!fs.existsSync(`./tmp`)) fs.mkdirSync(`./tmp`, { recursive: true });
   if (reset) fs.writeFileSync(`./tmp/runtime-router.json`, '{}', 'utf8');
+  await fixDependencies();
   for (const deploy of dataDeploy) await execDeploy(deploy);
   const { failed } = await deployTest(dataDeploy);
   if (failed.length > 0) {

package/src/server/runtime.js

@@ -1,4 +1,4 @@
-import fs from 'fs';
+import fs from 'fs-extra';
 import express from 'express';
 import cors from 'cors';
 import dotenv from 'dotenv';
@@ -114,10 +114,10 @@ export PATH=$PATH:/opt/lampp/bin`,
         Listen ${port}
 
         <VirtualHost *:${port}>    
-            DocumentRoot "${directory ? directory.replace(path, '/') : `${getRootDirectory()}${rootHostPath}`}"
+            DocumentRoot "${directory ? directory : `${getRootDirectory()}${rootHostPath}`}"
             ServerName ${host}:${port}
 
-            <Directory "${directory ? directory.replace(path, '/') : `${getRootDirectory()}${rootHostPath}`}">
+            <Directory "${directory ? directory : `${getRootDirectory()}${rootHostPath}`}">
               Options Indexes FollowSymLinks MultiViews
               AllowOverride All
               Require all granted
@@ -134,6 +134,13 @@ export PATH=$PATH:/opt/lampp/bin`,
                   : ''
               }
 
+            ErrorDocument 400 ${path === '/' ? '' : path}/400.html
+            ErrorDocument 404 ${path === '/' ? '' : path}/400.html
+            ErrorDocument 500 ${path === '/' ? '' : path}/500.html
+            ErrorDocument 502 ${path === '/' ? '' : path}/500.html
+            ErrorDocument 503 ${path === '/' ? '' : path}/500.html
+            ErrorDocument 504 ${path === '/' ? '' : path}/500.html
+
           </VirtualHost>
             
                           `);
@@ -196,10 +203,10 @@ export PATH=$PATH:/opt/lampp/bin`,
         Listen ${port}
 
         <VirtualHost *:${port}>    
-            DocumentRoot "${directory ? directory.replace(path, '/') : `${getRootDirectory()}${rootHostPath}`}"
+            DocumentRoot "${directory ? directory : `${getRootDirectory()}${rootHostPath}`}"
             ServerName ${host}:${port}
 
-            <Directory "${directory ? directory.replace(path, '/') : `${getRootDirectory()}${rootHostPath}`}">
+            <Directory "${directory ? directory : `${getRootDirectory()}${rootHostPath}`}">
               Options Indexes FollowSymLinks MultiViews
               AllowOverride All
               Require all granted
@@ -216,6 +223,13 @@ export PATH=$PATH:/opt/lampp/bin`,
                 : ''
             }
 
+            ErrorDocument 400 ${path === '/' ? '' : path}/400.html
+            ErrorDocument 404 ${path === '/' ? '' : path}/400.html
+            ErrorDocument 500 ${path === '/' ? '' : path}/500.html
+            ErrorDocument 502 ${path === '/' ? '' : path}/500.html
+            ErrorDocument 503 ${path === '/' ? '' : path}/500.html
+            ErrorDocument 504 ${path === '/' ? '' : path}/500.html
+
           </VirtualHost>
             
                           `);
@@ -369,13 +383,16 @@ export PATH=$PATH:/opt/lampp/bin`,
                 app.use(`${apiPath}/${api}`, router);
               })();
           }
-
           app.use(function (req, res, next) {
-            res.status(404).send('Sorry cant find that!');
+            const path404 = `${directory ? directory : `${getRootDirectory()}${rootHostPath}`}/404.html`;
+            if (fs.existsSync(path404)) return res.status(404).sendFile(path404);
+            else res.status(404).send('Sorry cant find that!');
           });
 
           app.use(function (err, req, res, next) {
             logger.error(err, err.stack);
+            const path500 = `${directory ? directory : `${getRootDirectory()}${rootHostPath}`}/500.html`;
+            if (fs.existsSync(path500)) return res.status(500).sendFile(path500);
             res.status(500).send('Something broke!');
           });