Office fabric ui Server side rendering in a node server

Question

I'm making a single MERN app for training and i though use Office Frabric UI could be a good idea.

I'm using server side rendering for my app but i am getting this error when i use a single <Fabric> component:

/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/index.js:277
    var head = document.getElementsByTagName('head')[0];
               ^

ReferenceError: document is not defined
    at registerStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:390:33)
    at applyThemableStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:243:7)
    at /home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:183:7
    at measure (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:121:3)
    at Object.loadStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@microsoft/load-themed-styles/lib/..\src/index.ts:167:3)
    at Object.<anonymous> (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/@uifabric/utilities/src/scroll.scss.ts:3:1)
    at Module._compile (module.js:641:30)
    at Module._extensions..js (module.js:652:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:560:32)
[nodemon] app crashed - waiting for file changes before starting...

This is the problem.

Ok, i see in the "documentation" steps for server-side rendering:

1. I put this in my serverRender file:

   import React from 'react'; import ReactDOMServer from 'react-dom/server'; import axios from 'axios'; import { configureLoadStyles } from '@microsoft/load-themed-styles';

   import App from './src/components/app'; import config from './config';

   const getApiUrl = contestId => { if (contestId) { return ${config.serverUrl}/api/contests/${contestId}; } return ${config.serverUrl/api/contests}; };

   const getInitialData = (contestId, apiData) => { if (contestId) { return { currentContestId: apiData.id, contests: { [apiData.id]: apiData } }; } return { contests: apiData.contests }; };

   const serverRender = (contestId) => axios.get(getApiUrl(contestId)) .then(resp => { let _allStyles = ''; const initialData = getInitialData(contestId, resp.data); configureLoadStyles((styles: string) => { _allStyles += styles; });

     return {
       initialMarkup: ReactDOMServer.renderToString(
         <App initialData={initialData} />
       ),
       initialData,
       styles: _allStyles
     };
   });
   

   export default serverRender;

2. And this for my server file:

   import config from './config'; import apiRouter from './api'; import serverRender from './serverRender';

   // import sassMiddleware from 'node-sass-middleware'; import path from 'path'; import express from 'express';

   const server = express();

   /* server.use(sassMiddleware({ src: path.join(__dirname, 'sass'), dest: path.join(__dirname, 'public') })); */

   server.set('view engine', 'ejs');

   server.get(['/', '/contests/:contestId'], (req, res) => { serverRender(req.params.contestId) .then(({ initialMarkup, initialData, styles }) => { res.render('index', { initialMarkup, initialData }); red.render('header', { styles }); }) .catch(console.error); });

   server.use('/api', apiRouter); server.use(express.static('public'));

   server.listen(config.port, config.host, () => { console.info('Express listening on port: ', config.port); });

3. And finally in my header file:

   Naming Contests

   <%- styles -%>

And it still doesn't works.

Which is the properly from to SSR with Office Fabric UI?