Styles.

.gitignore

@@ -1,3 +1,4 @@
 *.pyc
 .coverage
+.DS_Store
 node_modules

app.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import {hydrate} from 'react-dom';
-import FormView from './templates/FormView';
+import {setStylesTarget} from "typestyle";
 
+import FormView from './templates/FormView';
 
 const props = (window as any).__PRELOADED_STATE__;
 const CastedFormView = FormView as any;
 
 hydrate(<CastedFormView {...props} />, document.getElementById('root'));
+setStylesTarget(document.getElementById('styles-target')!);

components/Layout.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {style} from 'typestyle';
+import * as csstips from 'csstips';
+
+const bg = (color: string) => ({backgroundColor: color});
+
+interface Props {
+    children?: React.ReactNode;
+}
+
+export const Layout = (props: Props) => <div className={style(csstips.fillParent, csstips.vertical)}>
+  <div className={style(csstips.content,csstips.height(50), bg('lightskyblue'))}>
+    Header
+  </div>
+  <div className={style(csstips.flex, csstips.horizontal)}>
+    <div className={style(csstips.content, csstips.width(100), bg('lightpink'))}>
+      Sidebar
+    </div>
+    <div className={style(csstips.flex, bg('darkorange'))}>
+      {props.children}
+    </div>
+    <div className={style(csstips.content, csstips.width(100), bg('limegreen'))}>
+      Sidebar
+    </div>
+  </div>
+  <div className={style(csstips.content,csstips.height(50), bg('lightskyblue'))}>
+    Footer
+  </div>
+</div>

index.tsx

@@ -5,6 +5,7 @@ import express, {Request, Response} from 'express';
 import ReactDOMServer from 'react-dom/server';
 import middleware from 'webpack-dev-middleware';
 import {IncomingMessage} from 'http';
+import {getStyles} from 'typestyle';
 
 
 import webpackConfig from './webpack.config';
@@ -64,7 +65,11 @@ const ssrProxy = proxy('localhost:8000', {
         const props = responseAsJSON;
         const Template = require(`./templates/${props.template_name}.tsx`).default;
         const rendered = ReactDOMServer.renderToString(<Template {...props} />);
-        return renderPage({html: rendered, css: '', props});
+        return renderPage({
+            html: rendered,
+            css: getStyles(),
+            props,
+        });
     },
 });
 

package.json

@@ -11,6 +11,7 @@
     "@types/webpack": "^4.4.5",
     "@types/webpack-dev-middleware": "^2.0.1",
     "axios": "^0.18.0",
+    "csstips": "^0.3.0",
     "express": "^4.16.3",
     "express-http-proxy": "^1.2.0",
     "nodemon": "^1.17.5",
@@ -20,6 +21,7 @@
     "ts-node": "^7.0.0",
     "tslint": "^5.10.0",
     "typescript": "^2.9.2",
+    "typestyle": "^2.0.1",
     "webpack": "^4.15.1",
     "webpack-dev-middleware": "^3.1.3"
   },

templates/FormView.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import {normalize, setupPage} from "csstips";
 
+import {Layout} from '../components/Layout';
 import {FormType, Form} from '../components/Form';
 
 interface Props {
@@ -8,11 +10,14 @@ interface Props {
     csrf_token: string;
 }
 
-export default (props: Props) => <div>
+normalize();
+setupPage('#root');
+
+export default (props: Props) => <Layout>
     <ul>
         {props.widget_list.map(widget =>
         <li key={widget}>{widget}</li>
         )}
     </ul>
     <Form csrf_token={props.csrf_token} form={props.form} />
-</div>;
+</Layout>;