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 build3. Start server
$ node server/server.js4. 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) => {
// ...create-react-app with server-side topbar & footer
By theneva
