❤
npm
Sign UpSign In

razzle-examples-with-jsxstyle

3.0.0 • Public • Published

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>`
      );
    }
  });

/razzle-examples-with-jsxstyle/

    Package Sidebar

    Install

    npm i razzle-examples-with-jsxstyle

    Weekly Downloads

    8

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    41.4 kB

    Total Files

    15

    Last publish

    Collaborators

    • jaredpalmer
    Try on RunKit
    Report malware