How to use kyt-runtime - 9 common examples

const bundles = getLoadableBundles(modules);

  res.status(200).send(
    template({
      html,
      runtimeJSBundle: clientAssets['runtime~main.js'],
      mainJSBundle: clientAssets['main.js'],
      vendorJSBundle: clientAssets['vendor.js'],
      mainCSSBundle: clientAssets['main.css'],
      bundles,
    })
  );
});

preloadDynamicImports().then(() => {
  app.listen(port, () => {
    console.log(`✅  server started on port: ${port}`); // eslint-disable-line no-console
  });
});

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import dynamic from 'kyt-runtime/dynamic';
import styles from './styles.scss';

export const Home = dynamic(() => import(/* webpackChunkName: "home" */ '../Home'));
export const Tools = dynamic(() => import(/* webpackChunkName: "tools" */ '../Tools'));

function App() {
  return (
    <div>
      <i>
      <ul>
        <li>
          
            Home
          
        </li>
        <li>
          
            Tools
          </li></ul></i></div>

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import dynamic from 'kyt-runtime/dynamic';
import styles from './styles.scss';

const Home = dynamic(() => import(/* webpackChunkName: "home" */ '../Home'));
const Tools = dynamic(() => import(/* webpackChunkName: "tools" */ '../Tools'));

function App() {
  return (
    <div>
      <i>
      <ul>
        <li>
          
            Home
          
        </li>
        <li>
          
            Tools
          </li></ul></i></div>

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import dynamic from 'kyt-runtime/dynamic';
import styles from './styles.scss';

const Home = dynamic(() => import(/* webpackChunkName: "home" */ '../Home'));
const Tools = dynamic(() => import(/* webpackChunkName: "tools" */ '../Tools'));

function App() {
  return (
    <div>
      <i>
      <ul>
        <li>
          
            Home
          
        </li>
        <li>
          
            Tools
          
        </li></ul></i></div>

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import dynamic from 'kyt-runtime/dynamic';
import styles from './styles.scss';

export const Home = dynamic(() => import(/* webpackChunkName: "home" */ '../Home'));
export const Tools = dynamic(() => import(/* webpackChunkName: "tools" */ '../Tools'));

function App() {
  return (
    <div>
      <i>
      <ul>
        <li>
          
            Home
          
        </li>
        <li>
          
            Tools
          
        </li></ul></i></div>

module: {
      rules: [
        {
          test: /\.css$/,
          use: [...cssStyleLoaders],
          exclude: [publicSrcPath],
        },
        {
          test: isSassAsset,
          use: [...cssStyleLoaders, 'sass-loader'],
          exclude: [publicSrcPath],
        },
      ],
    },

    plugins: [...kytWebpackPlugins(options), new webpack.HotModuleReplacementPlugin()],
  };
};

use: [
          ...cssStyleLoaders,
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
        exclude: [publicSrcPath],
      },
    ],
  },

  plugins: [
    ...kytWebpackPlugins(options),

    new MiniCssExtractPlugin({
      filename: '[name]-[contenthash].css',
      chunkFilename: '[name]-[contenthash].css',
    }),

    new OptimizeCSSAssetsPlugin({}),
  ],

  optimization: {
    moduleIds: 'hashed',
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`,
    },
    splitChunks: {
      cacheGroups: {

import React from 'react';
import { hydrate } from 'react-dom';
import { preloadDynamicImports } from 'kyt-runtime/client';
import Root from './Root';

preloadDynamicImports().then(() => {
  hydrate(, document.querySelector('#root'));
});

);

  if (context.status && context.status.code) {
    let message = context.status.message || 'Error!';
    if (!context.status.message && Number(context.status.code) === 404) {
      message = 'Not found';
    }
    res.status(context.status.code).send(message);
  } else if (context.redirect && context.redirect.url) {
    res.redirect(context.redirect.code || 302, context.redirect.url);
  }

  const bundles = getLoadableBundles(modules);

  res.status(200).send(
    template({
      html,
      runtimeJSBundle: clientAssets['runtime~main.js'],
      mainJSBundle: clientAssets['main.js'],
      vendorJSBundle: clientAssets['vendor.js'],
      mainCSSBundle: clientAssets['main.css'],
      bundles,
    })
  );
});