add minimal example for shared interface code

jonas-pietzsch · May 5, 2019 · 4bb8f97 · 4bb8f97
1 parent 4aae6be
commit 4bb8f97
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/resources/views/index.ejs b/resources/views/index.ejs
@@ -15,6 +15,9 @@
 </head>
 <body>
 <div id="app"></div>
+<script type="text/javascript">
+    window.config = <%- JSON.stringify(config) %>
+</script>
 <script type="text/javascript" src="/static/app-bundle.js" async></script>
 </body>
 </html>
diff --git a/service/frontend/index.ts b/service/frontend/index.ts
@@ -1 +1,4 @@
-console.log('index.ts')
+const welcomePhrases = window.config.welcomePhrases
+
+const app: HTMLElement = document.getElementById('app')!
+app.innerHTML = welcomePhrases.map(phrase => `<h2>${phrase}</h2>`).join('')
diff --git a/service/server/ExpressServer.ts b/service/server/ExpressServer.ts
@@ -12,6 +12,7 @@ import { CatEndpoints } from './cats/CatEndpoints'
 import { RequestServices } from './types/CustomRequest'
 import { addServicesToRequest } from './middlewares/ServiceDependenciesMiddleware'
 import { Environment } from './Environment'
+import { FrontendContext } from '../shared/FrontendContext'
 
 /**
  * Abstraction around the raw Express.js server and Nodes' HTTP server.
@@ -76,8 +77,14 @@ export class ExpressServer {
         this.prepareAssets()
         this.configureStaticAssets(server)
 
-        const renderPage = (template: string) => async (req: Request, res: Response, next: NextFunction) => {
-            res.type('text/html').render(template, { cssFiles: this.cssFiles })
+        const context: FrontendContext = {
+            cssFiles: this.cssFiles,
+            config: {
+                welcomePhrases: [ 'Bienvenue', 'Welcome', 'Willkommen', 'Welkom', 'Hoş geldin', 'Benvenuta', 'Bienvenido' ]
+            }
+        }
+        const renderPage = (template: string) => async (req: Request, res: Response, _: NextFunction) => {
+            res.type('text/html').render(template, context)
         }
 
         server.get('/', noCache, renderPage('index'))

diff --git a/service/shared/FrontendContext.d.ts b/service/shared/FrontendContext.d.ts
@@ -0,0 +1,8 @@
+export interface FrontendConfig {
+    welcomePhrases: string[]
+}
+
+export interface FrontendContext {
+    cssFiles?: string[]
+    config: FrontendConfig
+}
diff --git a/service/shared/Window.d.ts b/service/shared/Window.d.ts
@@ -0,0 +1,7 @@
+import { FrontendConfig } from './FrontendContext'
+
+declare global {
+    interface Window {
+        config: FrontendConfig
+    }
+}