Skip to content

Latest commit

 

History

History
 
 

with-jsxstyle

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package.json
package.json
 
 

README.md

Razzle JSXStyle Example

How to use

Download the example or clone the whole project:

curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-jsxstyle
cd with-jsxstyle

Install it and run:

yarn install
yarn start

Idea behind the example

This is demo shows how to use JSXXtyle and the new server rendering API with Razzle. On each request, JSXStyle will extract out styles into a variable called styles will all the critical CSS in the render tree that we can then just drop into our <head>

import { injectAddRule, resetCache } from 'jsxstyle/lib/styleCache';

// ..

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    resetCache();
    let styles = '';
    const context = {};
    injectAddRule(rule => (styles += rule + '\n'));

    const markup = renderToString(
      <StaticRouter context={context} location={req.url}>
        <App />
      </StaticRouter>
    );

    if (context.url) {
      res.redirect(context.url);
    } else {
      res.send(
        `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">${styles || ''}</style>
        ${assets.client.css
          ? `<link rel="stylesheet" href="${assets.client.css}">`
          : ''}
        <script src="${assets.client.js}" defer></script>
    </head>
    <body>
        <div id="root">${markup}</div>
    </body>
</html>`
      );
    }
  });