CRA with server-side topbar & footer

Framsieforum 2017-04-27 / Martin Lehmann

Wait, wait. "CRA"?

So why are we here?

Steps

Put invisible stuff in index.html
Build app
Start server
Split index.html on invisible stuff
Get token & set up topbar & footer clients
Replace invisible stuff with topbar & footer on reqs

1. Invisible stuff

<body>
<div id="topbar"></div>
<div id="root"></div>
<div id="footer"></div>
</body>

2. Build app

$ yarn build

3. Start server

$ node server/server.js

4. Split index.html on invisible stuff (on startup)

const fs = require('fs');

const index = fs.readFileSync('./build/index.html', 'utf8');

function splitParts(html) {
  const splitByTopbar = html.split('<div id="topbar"></div>');
  const beforeTopbar = splitByTopbar[0];
  const afterTopbar = splitByTopbar[1];
  const afterTopbarSplitByFooter = afterTopbar.split('<div id="footer"></div>');
  const middle = afterTopbarSplitByFooter[0];
  const afterFooter = afterTopbarSplitByFooter[1];

  return { beforeTopbar, middle, afterFooter };
}

const { beforeTopbar, middle, afterFooter } = splitParts(index);

5. Get token & set up topbar & footer client

const cookieParser = require('cookie-parser')
const userTokenMiddleware = require('@finn-no/express-user-token-middleware');

app.use(cookieParser());
const environment = process.env.FIAAS_ENVIRONMENT || 'dev';
app.use(userTokenMiddleware.middleware(environment));

const fetchTopbar = require('finnlet-topbar-client').create({
  finnletServerUrl: `http://finnlet-server.svc.${environment}.finn.no`,
  env: environment,
});

const fetchFooter = require('finnlet-footer-client').create({
  finnletServerUrl: `http://finnlet-server.svc.${environment}.finn.no`,
  env: environment,
});

6. Replace invisible stuff

app.use('/static', express.static('build/static'));

app.get('/', async (req, res) => {
  const token = req.userToken;
  const eventualTopbar = fetchTopbar(token);
  const eventualFooter = fetchFooter(token);

  const html = [
    beforeTopbar,
    await eventualTopbar,
    middle,
    await eventualFooter,
    afterFooter,
  ].join('\n');

  return res.type('text/html').send(html);
});

app.get('/ads/:userId', (req, res) => {
  // ...