[ui-server]: working test of UI server

packages/roleypoly-ui-server/.gitignore

@@ -0,0 +1 @@
+lib

packages/roleypoly-ui-server/README.md

@@ -0,0 +1,3 @@
+# roleypoly ui server
+
+This is a simple server built around the UI itself. It actually has no idea what routes go to where, those are all defined by @roleypoly/ui/mappings.js and next.js itself.

packages/roleypoly-ui-server/package.json

@@ -5,9 +5,17 @@
   "scripts": {
     "build": "tsc",
     "precommit": "lint-staged",
-    "dev": "yarn build --watch"
+    "dev": "yarn build --watch",
+    "start": "node lib/index.js"
+  },
+  "dependencies": {
+    "koa": "^2.7.0",
+    "koa-better-router": "^2.1.1",
+    "kompression": "richard-riverford/kompression#0d4480c",
+    "@roleypoly/ui": "2.0.0",
+    "chalk": "^2.4.2",
+    "dotenv": "^8.0.0"
   },
-  "dependencies": {},
   "devDependencies": {
     "lint-staged": "^8.1.7",
     "tslint": "^5.17.0",

packages/roleypoly-ui-server/src/index.ts

@@ -0,0 +1,62 @@
+import 'dotenv/config'
+import Koa, { Context } from 'koa'
+import mappings from '@roleypoly/ui/mappings'
+import connector from '@roleypoly/ui/connector'
+import betterRouter from 'koa-better-router'
+import compress from 'kompression'
+
+type HTTPHandler = (path: string, handler: (ctx: Context, next: () => void) => any) => void
+export type Router = {
+  get: HTTPHandler,
+  post: HTTPHandler,
+  patch: HTTPHandler,
+  delete: HTTPHandler,
+  put: HTTPHandler,
+  middleware: () => any
+}
+
+const app = new Koa()
+
+async function start () {
+  const router: Router = betterRouter().loadMethods()
+
+  app.use(compress())
+
+  const next = connector({ dev: process.env.NODE_ENV === 'development' })
+  await next.prepare()
+  const nextHandler = next.getRequestHandler()
+
+  // UI dynamic mappings
+  for (let mapping in mappings) {
+    const { path, noAutoFix, custom } = mappings[mapping] as { path: string, noAutoFix?: boolean, custom?: (router: Router) => void }
+
+    // render the path if mapping is GET-ted
+    router.get(mapping, (ctx: Context) => {
+      ctx.status = 200
+      return next.render(ctx.req, ctx.res, path, { ...ctx.query, ...ctx.params })
+    })
+
+    // redirect the inverse path if there isn't a parameter
+    if (!noAutoFix) {
+      router.get(path, (ctx: Context) => ctx.redirect(mapping))
+    }
+
+    // all else, if custom exists, we call it.
+    // this solves edge cases per route.
+    if (custom !== undefined) {
+      custom(router)
+    }
+  }
+
+  // handle all else
+  router.get('*', async (ctx: Context) => {
+    await nextHandler(ctx.req, ctx.res)
+    ctx.respond = false
+  })
+
+  app.listen(process.env.UI_PORT || '6768')
+}
+
+start().catch((e: Error) => {
+  console.error('app failed to start', e)
+})

packages/roleypoly-ui/.lintstagedrc.yml

@@ -1,4 +1,7 @@
 linters:
+  ./**/*.{js,jsx}:
+    - standard --fix
+    - git add
   ./**/*.{ts,tsx}:
     - tslint --fix
     - stylelint --fix

packages/roleypoly-ui/mappings.js

@@ -0,0 +1,21 @@
+module.exports = {
+  '/s/add': {
+    path: '/_internal/_server_add',
+    custom (router) {
+      router.get('/s/', ctx => ctx.redirect('/s/add'))
+    }
+  },
+  '/s/:id': {
+    path: '/_internal/_server',
+    noAutoFix: true,
+    custom (router) {
+      router.get('/_internal/_server', ctx => {
+        if (ctx.query.id) {
+          return ctx.redirect(`/s/${ctx.query.id}`)
+        }
+
+        return ctx.redirect('/s/add')
+      })
+    }
+  }
+}