Init project.

.eslintrc.js

@@ -0,0 +1,94 @@
+const eslintrc = {
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "mocha": true,
+    "jest": true,
+    "jasmine": true
+  },
+  "plugins": [
+    "react",
+    "import"
+  ],
+  "parserOptions": {
+    parser: 'babel-eslint',
+  },
+  "rules": {
+    "linebreak-style": 0,
+    "lines-between-class-members": 0,
+    "func-names": 0,
+    "sort-imports": 0,
+    "no-else-return": 0,
+    "operator-linebreak": 0,
+    "no-multiple-empty-lines": 0,
+    "arrow-body-style": 0,
+    "prefer-destructuring": 0,
+    "max-len": 0,
+    "consistent-return": 0,
+    "comma-dangle": [
+      "error",
+      "always-multiline"
+    ],
+    "function-paren-newline": 0,
+    "class-methods-use-this": 0,
+    "import/extensions": 0,
+    "import/no-unresolved": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/prefer-default-export": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/anchor-has-content": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "jsx-a11y/mouse-events-have-key-events": 0,
+    "react/sort-comp": 0,
+    "react/prop-types": 0,
+    "react/require-extension": 0,
+    "react/jsx-filename-extension": [1,
+      { "extensions": [".js", ".jsx"] }
+    ],
+    "react/no-unescaped-entities": 0,
+    "react/destructuring-assignment": 0,
+    "react/no-access-state-in-setstate": 0,
+    "react/no-danger": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "react/jsx-tag-spacing": 0,
+    "react/jsx-no-bind": 0,
+    "react/jsx-wrap-multilines": 0,
+    "react/forbid-prop-types": 0,
+    "react/require-default-props": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/no-array-index-key": 0,
+    "react/no-find-dom-node": 0,
+    "react/no-unused-state": 0,
+    "react/no-unused-prop-types": 0,
+    "react/default-props-match-prop-types": 0,
+    "react/jsx-curly-spacing": 0,
+    "react/no-render-return-value": 0,
+    "react/prefer-stateless-function": 0,
+    "object-curly-newline": 0,
+    "no-param-reassign": 0,
+    "no-return-assign": 0,
+    "no-redeclare": 0,
+    "no-restricted-globals": 0,
+    "no-restricted-syntax": 0,
+    "no-underscore-dangle": 0,
+    "no-unused-expressions": 0
+  }
+}
+
+if (process.env.NODE_ENV === 'development') {
+  Object.assign(eslintrc.rules,
+    {
+      'no-console': 0,
+      'no-unused-vars': 0,
+    });
+}
+
+module.exports = eslintrc

.gitignore

@@ -0,0 +1,15 @@
+node_modules
+npm-debug.log*
+dist
+.DS_Store
+.cache
+.rdoc-dist
+.vscode
+.next
+
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*

README.md

@@ -0,0 +1,13 @@
+React SSR
+---
+
+A baseline for server side rendering for your React application.
+
+```bash
+npm i @kkt/ssr
+```
+
+## Example
+
+- [simple](example/simple) A simple for server side rendering for your React application.
+- [dynamic-loadable](example/dynamic-loadable) A dynamic loadable for server side rendering for your React application.

bin/ssr.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+const program = require('commander');
+const pkg = require('../package.json');
+require('colors-cli/toxic');
+
+const logs = console.log; // eslint-disable-line
+
+process.env.HOST = '0.0.0.0';
+process.env.PORT = 3723;
+
+program
+  .description('A baseline for server side rendering for your React application.')
+  .version(pkg.version, '-v, --version')
+  .usage('<command> [options]');
+
+
+program
+  .command('build')
+  .description('Builds the app for production to the dist folder.')
+  .on('--help', () => {
+    logs();
+    logs('  Examples:');
+    logs();
+    logs(`    $ ${'react-ssr build'.green}`);
+    logs();
+  })
+  .action((cmd) => {
+    require('../script/build')(cmd); // eslint-disable-line
+  });
+
+program
+  .command('start')
+  .description('Runs the app in development mode.')
+  .on('--help', () => {
+    logs();
+    logs('  Examples:');
+    logs();
+    logs(`    $ ${'react-ssr start'.green}`);
+    logs();
+  })
+  .action((cmd) => {
+    require('../script/start')(cmd); // eslint-disable-line
+  });
+
+program.on('--help', () => {
+  logs('\n  Examples:');
+  logs();
+  logs(`    $ ${'react-ssr start'.green}`);
+  logs(`    $ ${'react-ssr build'.green}`);
+  logs();
+  logs();
+});
+
+program.parse(process.argv);
+
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+}

conf/env.js

@@ -0,0 +1,95 @@
+const fs = require('fs');
+const path = require('path');
+const paths = require('./');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  `${paths.dotenv}.local`,
+  paths.dotenv,
+];
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.
+// https://github.com/motdotla/dotenv
+dotenvFiles.forEach((dotenvFile) => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv').config({ // eslint-disable-line
+      path: dotenvFile,
+    });
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+const nodePath = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and KKT_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const KKT = /^KKT_/i;
+
+function getClientEnvironment(target) {
+  const raw = Object.keys(process.env)
+    .filter(key => KKT.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        PORT: process.env.PORT || 3000,
+        HOST: process.env.HOST || 'localhost',
+        KKT_ASSETS_MANIFEST: paths.appManifest,
+        BUILD_TARGET: target === 'web' ? 'client' : 'server',
+        // only for production builds. Useful if you need to serve from a CDN
+        PUBLIC_PATH: process.env.PUBLIC_PATH || '/',
+        // CLIENT_PUBLIC_PATH is a PUBLIC_PATH for NODE_ENV === 'development' && BUILD_TARGET === 'client'
+        // It's useful if you're running KKT in a non-localhost container. Ends in a /
+        CLIENT_PUBLIC_PATH: process.env.CLIENT_PUBLIC_PATH,
+        // The public dir changes between dev and prod, so we use an environment
+        // variable available to users.
+        KKT_PUBLIC_DIR:
+          process.env.NODE_ENV === 'production'
+            ? paths.appBuildPublic
+            : paths.appPublic,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = Object.keys(raw).reduce((env, key) => {
+    env[`process.env.${key}`] = JSON.stringify(raw[key]);
+    return env;
+  }, {});
+
+  return { raw, stringified };
+}
+
+module.exports = {
+  getClientEnv: getClientEnvironment,
+  nodePath,
+};

conf/index.js

@@ -0,0 +1,74 @@
+const PATH = require('path');
+const FS = require('fs');
+const url = require('url');
+
+// 确保在项目文件夹中的任何符号都解决了：
+const appDirectory = FS.realpathSync(process.cwd());
+const resolveApp = relativePath => PATH.resolve(appDirectory, relativePath);
+
+const envPublicUrl = process.env.PUBLIC_URL;
+const getPublicUrl = appPackageJson => envPublicUrl || require(appPackageJson).homepage; // eslint-disable-line
+
+
+function ensureSlash(inputPath, needsSlash) {
+  const hasSlash = inputPath.endsWith('/');
+  if (hasSlash && !needsSlash) {
+    return inputPath.substr(0, inputPath.length - 1);
+  } else if (!hasSlash && needsSlash) {
+    return `${inputPath}/`;
+  } else {
+    return inputPath;
+  }
+}
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson);
+  const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+  return ensureSlash(servedUrl, true);
+}
+
+const resolveOwn = relativePath => PATH.resolve(__dirname, '..', relativePath);
+
+module.exports = {
+  resolveApp,
+  appDirectory,
+  appPublicPath: '/',
+  appNodeModules: resolveApp('node_modules'),
+  ownNodeModules: resolveOwn('node_modules'),
+  appPublic: resolveApp('public'),
+  appPath: resolveApp('.'),
+  appSrc: resolveApp('src'),
+  appKKTRC: resolveApp('.kktrc.js'),
+  appServerIndexJs: resolveApp('src'),
+  appClientIndexJs: resolveApp('src/client'),
+  appBuildPublic: resolveApp('dist/public'),
+  appManifest: resolveApp('dist/assets.json'),
+  appBuildDist: resolveApp('dist'),
+  appPackageJson: resolveApp('package.json'),
+  appTsConfig: resolveApp('tsconfig.json'),
+  appIndex: resolveApp('src/index.js'),
+  defaultHTMLPath: resolveApp('public/index.html'),
+  defaultFaviconPath: resolveApp('public/favicon.ico'),
+  publicUrl: getPublicUrl(resolveApp('package.json')),
+  servedPath: getServedPath(resolveApp('package.json')),
+};
+
+module.exports.moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx',
+];