Reconfigured the dev tooling for the node.js server to have better su…

…pport for ssr WRT to a 'watched' workflow. the ssr, and transpiled js now lives outside the server source code (#4 #5)

.gitignore

@@ -259,6 +259,9 @@ typings/
 .nuxt
 dist
 
+# SSR
+.ssr
+
 # Gatsby files
 .cache/
 # Comment in the public line in if your project uses Gatsby and *not* Next.js

.vscode/settings.json

@@ -40,6 +40,7 @@
     "Parens",
     "pgdata",
     "pgsql",
+    "Pipeable",
     "pipenv",
     "pipfile",
     "POSTGIS",

web/chompfile.toml

@@ -26,15 +26,17 @@ name = 'server'
 env = { TZ='UTC', NODE_ENV='development', NODE_LOADER_CONFIG='loaders/config.js' }
 serial = true
 deps = [
-  'server/ssr/index.js',
-  'node.importmap'
+  'rollup:ssr',
+  'node.importmap',
+  'server/**/*.js',
 ]
 run = """
 prettier \
   --loglevel warn \
   --cache \
   --cache-strategy metadata \
   --ignore-path ../.prettierignore \
+  --write "ssr/**/*.@(js|json|geojson|cjs|mjs|graphql|ts|tsx|jsx)" \
   --write "server/**/*.@(js|json|geojson|cjs|mjs|graphql|ts|tsx|jsx)" \
   --write "loaders/**/*.js" && \
     node \
@@ -45,8 +47,7 @@ prettier \
 
 [[task]]
 name = 'rollup:ssr'
-target = 'server/ssr/#.js'
-dep = 'server/ssr/src/#.jsx'
+deps = ['ssr/**/*.jsx']
 run = 'rollup -c rollup/server.config.js'
 
 ############################# 
@@ -104,7 +105,7 @@ name = 'clear-cache'
 run = """
 rimraf node.importmap
 rimraf .cache
-rimraf server/ssr/*.js
+rimraf .ssr
 """
 
 ############################# 

web/rollup/server.config.js

@@ -7,14 +7,14 @@ import extensions from './plugins/extensions.js'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
-rimraf.sync(join(__dirname, '../server/ssr/index.js'))
+rimraf.sync(join(__dirname, '../.ssr/index.js'))
 
 export default {
-  input: [join(__dirname, '../server/ssr/src/index.jsx')],
+  input: [join(__dirname, '../ssr/index.jsx')],
   output: [
     {
       exports: 'auto',
-      dir: join(__dirname, '../server/ssr'),
+      dir: join(__dirname, '../.ssr'),
       format: 'esm',
       compact: false,
     },

web/server/index.js

@@ -11,7 +11,7 @@ import restrictCors from './middleware/restrict-cors.js'
 // import openCors from './middleware/open-cors.js'
 import blacklist from './middleware/blacklist.js'
 import whitelist from './middleware/whitelist.js'
-import ssr from './ssr/index.js'
+import ssr from '../.ssr/index.js'
 import graphql from './graphql/index.js'
 import createRequestCtx from './middleware/ctx.js'
 

web/server/ssr/src/_layout.jsx → web/ssr/_layout.jsx

@@ -1,7 +1,7 @@
 import { StaticRouter } from 'react-router-dom/server'
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
 import fetch from 'make-fetch-happen'
-import App from '../../../common/app'
+import App from '../common/app'
 
 export default ({ children, ctx, emotionCache }) => {
   const cookie = ctx.get('Cookie') || ''

web/server/ssr/src/index.jsx → web/ssr/index.jsx

@@ -1,22 +1,23 @@
-import { renderToString } from 'react-dom/server'
 import { join, normalize } from 'path'
 import fs from 'fs/promises'
-import dirname from '../../lib/dirname.js'
+import dirname from '../server/lib/dirname.js'
 import { createReadStream } from 'fs'
-import { createEmotionCache } from '../../../common/app'
+import { createEmotionCache } from '../common/app'
 import emotionServer from '@emotion/server/create-instance'
 import Layout from './_layout.jsx'
 
-const { default: createEmotionServer } = emotionServer
-
-const __dirname = dirname(import.meta)
-
-const files = normalize(join(__dirname, '../../.cache'))
+/**
+ * Emotion doesn't support stream-rendering yet
+ * Once it does, please update
+ */
+import { renderToString } from 'react-dom/server'
 
 const INDEX_NAME = 'somisana'
-
+const { default: createEmotionServer } = emotionServer
+const __dirname = dirname(import.meta)
+const files = normalize(join(__dirname, '../.cache'))
 const APP_ENTRIES = await fs
-  .readdir(normalize(join(__dirname, '../../client/html')))
+  .readdir(normalize(join(__dirname, '../client/html')))
   .then(files => files.filter(f => f.includes('.html')))
   .then(files => files.map(f => f.replace('.html', '')))
 
@@ -39,13 +40,10 @@ export default async ctx => {
     ctx.set('Content-type', 'text/html')
 
     const entry = ctx.request.url.replace('.html', '').replace('/', '')
-
     const page = entry ? (APP_ENTRIES.includes(entry) ? entry : INDEX_NAME) : INDEX_NAME
-
     const htmlUtf8 = await fs.readFile(normalize(join(files, `${page}.html`)), {
       encoding: 'utf-8',
     })
-
     const SsrEntry = await import(normalize(join(files, `ssr.${page}.js`))).then(
       ({ default: C }) => C
     )