Commit 54bab7b0 authored by jnsone11's avatar jnsone11
Browse files

add renderine hot reload

parent c24d5f85
webpackJsonp([0],{16:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const l=n(0),o=n(18),r=n(28);o.hydrate(l.createElement(()=>l.createElement(r.default,null),null),document.getElementById("react-root"))},28:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const l=n(0),o=n(0);t.default=class extends o.Component{render(){return l.createElement("div",null,"Hello World !!!")}}},5:function(e,t,n){n(6),e.exports=n(16)}},[5]);
\ No newline at end of file
This diff is collapsed.
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = require("react");
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("webpack");
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const express = __webpack_require__(3);
const serverRender_1 = __webpack_require__(4);
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
const PORT = parseInt(process.env.PORT) || 8080;
const HOST = 'localhost';
const server = express();
if (!IS_PRODUCTION) {
const webpackDevMiddleware = __webpack_require__(6);
const webpack = __webpack_require__(1);
const webpackConfig = __webpack_require__(7);
const compiler = webpack(webpackConfig);
server.use(webpackDevMiddleware(compiler, {
publicPath: "/",
noInfo: true
}));
server.use(__webpack_require__(13)(compiler));
}
server.get('*', (req, res) => {
serverRender_1.default(req.url).then((html) => {
res.status(200);
res.end(html);
}).catch((e) => {
console.log('Error rendering: ', e);
res.status(500);
res.end();
});
});
server.listen(PORT, HOST, () => {
console.log(`listening on: ${HOST}:${PORT}`);
});
;(function register() { /* react-hot-loader/webpack */ if (process.env.NODE_ENV !== 'production') { if (typeof __REACT_HOT_LOADER__ === 'undefined') { return; } /* eslint-disable camelcase, no-undef */ var webpackExports = typeof __webpack_exports__ !== 'undefined' ? __webpack_exports__ : module.exports; /* eslint-enable camelcase, no-undef */ if (typeof webpackExports === 'function') { __REACT_HOT_LOADER__.register(webpackExports, 'module.exports', "/Users/jnsone11/repos/react-workshop/front-end/renderine/src/server/server.tsx"); return; } /* eslint-disable no-restricted-syntax */ for (var key in webpackExports) { /* eslint-enable no-restricted-syntax */ if (!Object.prototype.hasOwnProperty.call(webpackExports, key)) { continue; } var namedExport = void 0; try { namedExport = webpackExports[key]; } catch (err) { continue; } __REACT_HOT_LOADER__.register(namedExport, key, "/Users/jnsone11/repos/react-workshop/front-end/renderine/src/server/server.tsx"); } } })();
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("express");
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = __webpack_require__(0);
//import {renderToString} from "react-dom/server"
const routes_1 = __webpack_require__(5);
function default_1(url) {
const App = (React.createElement("div", null,
React.createElement(routes_1.default, null)));
//const applicationHTML = renderToString(App);
return new Promise((resolve, reject) => {
resolve(`<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon" sizes="57x57" href="/icon.png" />
</head>
<body>
<div id="react-root"></div>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/client.js"></script>
</body>
</html>`);
});
}
exports.default = default_1;
;(function register() { /* react-hot-loader/webpack */ if (process.env.NODE_ENV !== 'production') { if (typeof __REACT_HOT_LOADER__ === 'undefined') { return; } /* eslint-disable camelcase, no-undef */ var webpackExports = typeof __webpack_exports__ !== 'undefined' ? __webpack_exports__ : module.exports; /* eslint-enable camelcase, no-undef */ if (typeof webpackExports === 'function') { __REACT_HOT_LOADER__.register(webpackExports, 'module.exports', "/Users/jnsone11/repos/react-workshop/front-end/renderine/src/server/serverRender.tsx"); return; } /* eslint-disable no-restricted-syntax */ for (var key in webpackExports) { /* eslint-enable no-restricted-syntax */ if (!Object.prototype.hasOwnProperty.call(webpackExports, key)) { continue; } var namedExport = void 0; try { namedExport = webpackExports[key]; } catch (err) { continue; } __REACT_HOT_LOADER__.register(namedExport, key, "/Users/jnsone11/repos/react-workshop/front-end/renderine/src/server/serverRender.tsx"); } } })();
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = __webpack_require__(0);
const react_1 = __webpack_require__(0);
class Routes extends react_1.Component {
render() {
return (React.createElement("div", null, "Hello World !!!"));
}
}
exports.default = Routes;
;(function register() { /* react-hot-loader/webpack */ if (process.env.NODE_ENV !== 'production') { if (typeof __REACT_HOT_LOADER__ === 'undefined') { return; } /* eslint-disable camelcase, no-undef */ var webpackExports = typeof __webpack_exports__ !== 'undefined' ? __webpack_exports__ : module.exports; /* eslint-enable camelcase, no-undef */ if (typeof webpackExports === 'function') { __REACT_HOT_LOADER__.register(webpackExports, 'module.exports', "/Users/jnsone11/repos/react-workshop/front-end/renderine/src/common/routes.tsx"); return; } /* eslint-disable no-restricted-syntax */ for (var key in webpackExports) { /* eslint-enable no-restricted-syntax */ if (!Object.prototype.hasOwnProperty.call(webpackExports, key)) { continue; } var namedExport = void 0; try { namedExport = webpackExports[key]; } catch (err) { continue; } __REACT_HOT_LOADER__.register(namedExport, key, "/Users/jnsone11/repos/react-workshop/front-end/renderine/src/common/routes.tsx"); } } })();
/***/ }),
/* 6 */
/***/ (function(module, exports) {
module.exports = require("webpack-dev-middleware");
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(__dirname) {const path = __webpack_require__(8);
const webpack = __webpack_require__(1);
const UglifyJSPlugin = __webpack_require__(9);
const ExtractTextPlugin = __webpack_require__(10);
const StatsWriterPlugin = __webpack_require__(11).StatsWriterPlugin;
const BundleAnalyzerPlugin = __webpack_require__(12).BundleAnalyzerPlugin;
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
console.log('IS_PRODUCTION: ',IS_PRODUCTION);
let plugins = [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks: function (module, count) {
return module.context && module.context.indexOf("node_modules") !== -1;
}
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
}
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new UglifyJSPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
/*new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|html|css)$/,
threshold: 0,
minRatio: 0.8
})*/
];
if (IS_PRODUCTION) {
plugins.push(new BundleAnalyzerPlugin({
analyzerMode: 'static'
}));
} else {
plugins.push(new webpack.HotModuleReplacementPlugin());
plugins.push(new webpack.NoEmitOnErrorsPlugin());
}
const loaders = IS_PRODUCTION ?
[
{
loader: 'awesome-typescript-loader'
}
] :
[
{
loader: 'react-hot-loader/webpack'
},
{
loader: 'awesome-typescript-loader'
}
];
module.exports = {
entry: IS_PRODUCTION ? [
'./src/client/client.tsx'
] : [
'webpack-hot-middleware/client',
'./src/client/client.tsx'
],
output: {
filename: 'client.js',
path: path.resolve(__dirname, 'dist/client'),
publicPath: '/'
},
// Enable sourcemaps for debugging webpack's output.
devtool: "cheap-module-source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
plugins,
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
exclude: /(node_modules|bower_components)/,
use: loaders
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{enforce: "pre", test: /\.js$/, loader: "source-map-loader"}
]
}
};
/* WEBPACK VAR INJECTION */}.call(exports, "/"))
/***/ }),
/* 8 */
/***/ (function(module, exports) {
module.exports = require("path");
/***/ }),
/* 9 */
/***/ (function(module, exports) {
module.exports = require("uglifyjs-webpack-plugin");
/***/ }),
/* 10 */
/***/ (function(module, exports) {
module.exports = require("extract-text-webpack-plugin");
/***/ }),
/* 11 */
/***/ (function(module, exports) {
module.exports = require("webpack-stats-plugin");
/***/ }),
/* 12 */
/***/ (function(module, exports) {
module.exports = require("webpack-bundle-analyzer");
/***/ }),
/* 13 */
/***/ (function(module, exports) {
module.exports = require("webpack-hot-middleware");
/***/ })
/******/ ]);
//# sourceMappingURL=server.js.map
\ No newline at end of file
{"version":3,"sources":["webpack:///webpack/bootstrap 1d9952996ad01693733f","webpack:///external \"react\"","webpack:///external \"webpack\"","webpack:///./src/server/server.tsx","webpack:///external \"express\"","webpack:///./src/server/serverRender.tsx","webpack:///./src/common/routes.tsx","webpack:///external \"webpack-dev-middleware\"","webpack:///./webpack.client.config.js","webpack:///external \"path\"","webpack:///external \"uglifyjs-webpack-plugin\"","webpack:///external \"extract-text-webpack-plugin\"","webpack:///external \"webpack-stats-plugin\"","webpack:///external \"webpack-bundle-analyzer\"","webpack:///external \"webpack-hot-middleware\""],"names":[],"mappings":"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","file":"server.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 1d9952996ad01693733f","module.exports = require(\"react\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"react\"\n// module id = 0\n// module chunks = 0","module.exports = require(\"webpack\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"webpack\"\n// module id = 1\n// module chunks = 0","import * as express from 'express'\n\nimport render from './serverRender'\n\nconst IS_PRODUCTION: boolean = process.env.NODE_ENV === 'production';\nconst PORT: number = parseInt(process.env.PORT) || 8080;\nconst HOST: string = 'localhost';\n\nconst server = express();\n\nif (!IS_PRODUCTION){\n\n const webpackDevMiddleware = require(\"webpack-dev-middleware\");\n const webpack = require(\"webpack\");\n const webpackConfig = require(\"../../webpack.client.config\");\n const compiler = webpack(webpackConfig);\n \n server.use(webpackDevMiddleware(compiler, {\n publicPath: \"/\",\n noInfo: true\n }));\n\n server.use(require(\"webpack-hot-middleware\")(compiler));\n}\n\nserver.get('*', (req: express.Request, res: express.Response) => {\n render(req.url).then((html: string) => {\n res.status(200);\n res.end(html);\n }).catch((e: Error)=> {\n console.log('Error rendering: ',e);\n res.status(500);\n res.end();\n });\n});\n\nserver.listen(PORT,HOST,() => {\n console.log(`listening on: ${HOST}:${PORT}`);\n});\n\n\n// WEBPACK FOOTER //\n// ./src/server/server.tsx","module.exports = require(\"express\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"express\"\n// module id = 3\n// module chunks = 0","import * as React from \"react\";\n//import {renderToString} from \"react-dom/server\"\n\nimport Routes from '../common/routes'\n\nexport default function(url: string) : Promise<string> {\n\n \n const App = (\n <div>\n <Routes/>\n </div>\n );\n\n //const applicationHTML = renderToString(App);\n \n return new Promise((resolve,reject) => {\n resolve(`<!DOCTYPE html>\n <html>\n <head>\n <link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"/icon.png\" />\n </head>\n <body>\n <div id=\"react-root\"></div>\n <script type=\"text/javascript\" src=\"/vendor.js\"></script>\n <script type=\"text/javascript\" src=\"/client.js\"></script>\n </body>\n </html>`);\n });\n}\n\n\n// WEBPACK FOOTER //\n// ./src/server/serverRender.tsx","import * as React from 'react'\nimport {Component} from 'react'\n\nclass Routes extends Component {\n render(){\n return (\n <div>Hello World !!!</div>\n )\n }\n}\n\nexport default Routes;\n\n\n// WEBPACK FOOTER //\n// ./src/common/routes.tsx","module.exports = require(\"webpack-dev-middleware\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"webpack-dev-middleware\"\n// module id = 6\n// module chunks = 0","const path = require('path');\nconst webpack = require(\"webpack\");\n\nconst UglifyJSPlugin = require('uglifyjs-webpack-plugin');\nconst ExtractTextPlugin = require('extract-text-webpack-plugin');\nconst StatsWriterPlugin = require(\"webpack-stats-plugin\").StatsWriterPlugin;\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nconst IS_PRODUCTION = process.env.NODE_ENV === 'production';\n\nconsole.log('IS_PRODUCTION: ',IS_PRODUCTION);\n\nlet plugins = [\n new webpack.optimize.CommonsChunkPlugin({\n name: 'vendor',\n filename: 'vendor.js',\n minChunks: function (module, count) {\n return module.context && module.context.indexOf(\"node_modules\") !== -1;\n }\n }),\n new webpack.DefinePlugin({\n 'process.env': {\n 'NODE_ENV': JSON.stringify('production'),\n }\n }),\n new webpack.optimize.AggressiveMergingPlugin(),\n new webpack.optimize.OccurrenceOrderPlugin(),\n new UglifyJSPlugin(),\n new webpack.LoaderOptionsPlugin({\n minimize: true,\n debug: false\n }),\n /*new CompressionPlugin({\n asset: \"[path].gz[query]\",\n algorithm: \"gzip\",\n test: /\\.(js|html|css)$/,\n threshold: 0,\n minRatio: 0.8\n })*/\n];\n\nif (IS_PRODUCTION) {\n plugins.push(new BundleAnalyzerPlugin({\n analyzerMode: 'static'\n }));\n} else {\n plugins.push(new webpack.HotModuleReplacementPlugin());\n plugins.push(new webpack.NoEmitOnErrorsPlugin());\n}\n\nconst loaders = IS_PRODUCTION ?\n [\n {\n loader: 'awesome-typescript-loader'\n }\n ] :\n [\n {\n loader: 'react-hot-loader/webpack'\n },\n {\n loader: 'awesome-typescript-loader'\n }\n ];\n\nmodule.exports = {\n entry: IS_PRODUCTION ? [\n './src/client/client.tsx'\n ] : [\n 'webpack-hot-middleware/client',\n './src/client/client.tsx'\n ],\n output: {\n filename: 'client.js',\n path: path.resolve(__dirname, 'dist/client'),\n publicPath: '/'\n },\n\n // Enable sourcemaps for debugging webpack's output.\n devtool: \"cheap-module-source-map\",\n\n resolve: {\n // Add '.ts' and '.tsx' as resolvable extensions.\n extensions: [\".ts\", \".tsx\", \".js\", \".json\"]\n },\n\n plugins,\n\n module: {\n rules: [\n // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.\n {\n test: /\\.tsx?$/,\n exclude: /(node_modules|bower_components)/,\n use: loaders\n },\n\n // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.\n {enforce: \"pre\", test: /\\.js$/, loader: \"source-map-loader\"}\n ]\n }\n};\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./webpack.client.config.js\n// module id = 7\n// module chunks = 0","module.exports = require(\"path\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"path\"\n// module id = 8\n// module chunks = 0","module.exports = require(\"uglifyjs-webpack-plugin\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"uglifyjs-webpack-plugin\"\n// module id = 9\n// module chunks = 0","module.exports = require(\"extract-text-webpack-plugin\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"extract-text-webpack-plugin\"\n// module id = 10\n// module chunks = 0","module.exports = require(\"webpack-stats-plugin\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"webpack-stats-plugin\"\n// module id = 11\n// module chunks = 0","module.exports = require(\"webpack-bundle-analyzer\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"webpack-bundle-analyzer\"\n// module id = 12\n// module chunks = 0","module.exports = require(\"webpack-hot-middleware\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"webpack-hot-middleware\"\n// module id = 13\n// module chunks = 0"],"sourceRoot":""}
\ No newline at end of file
This diff is collapsed.
......@@ -4,8 +4,35 @@
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"build-server": "webpack --config webpack.server.config.js --progress",
"build-client": "webpack --config webpack.client.config.js --progress",
"start": "node ./dist/server/server.js"
},
"author": "",
"license": "ISC"
"license": "ISC",
"dependencies": {
"@types/react": "^16.0.35",
"@types/react-dom": "^16.0.3",
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"typescript": "^2.6.2"
},
"devDependencies": {
"@types/express": "^4.11.0",
"@types/node": "^9.4.0",
"@types/systemjs": "^0.20.6",
"@types/webpack-env": "^1.13.4",
"awesome-typescript-loader": "^3.4.1",
"extract-text-webpack-plugin": "^3.0.2",
"react-hot-loader": "^3.1.3",
"source-map-loader": "^0.2.3",
"uglifyjs-webpack-plugin": "^1.1.8",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.2",
"webpack-dev-middleware": "^2.0.4",
"webpack-hot-middleware": "^2.21.0",
"webpack-stats-plugin": "^0.1.5"
}
}
import * as React from 'react'
import {Component} from 'react'
import {hydrate} from 'react-dom'
import Routes from '../common/routes'
const reactRoot: HTMLElement = document.getElementById('react-root');
declare let module: {
hot: {
accept: (path: any,fn: ()=>any) => any
}
}
const render = (Routings: React.ComponentClass) => {
return (
<div>
<Routings/>
</div>
)
}
if (module.hot) {
module.hot.accept('../common/routes',() => {
import('../common/routes').then((module:any) => {
hydrate(render(module.default),reactRoot)
})
})
}
hydrate(render(Routes),reactRoot)
\ No newline at end of file
import * as React from 'react'
import {Component} from 'react'
class Routes extends Component {
render(){
return (
<div>
<div>Hello World!!</div>
<div>OK OK</div>
</div>
)
}
}
export default Routes;
\ No newline at end of file
import * as express from 'express'
import render from './serverRender'
const IS_PRODUCTION: boolean = process.env.NODE_ENV === 'production';
const PORT: number = parseInt(process.env.PORT) || 8080;
const HOST: string = 'localhost';
const server = express();
if (!IS_PRODUCTION){
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpack = require("webpack");
const webpackConfig = require("../../webpack.client.config");
const compiler = webpack(webpackConfig);
server.use(webpackDevMiddleware(compiler, {
publicPath: "/",
noInfo: true
}));
server.use(require("webpack-hot-middleware")(compiler));
}
server.get('*', (req: express.Request, res: express.Response) => {
render(req.url).then((html: string) => {
res.status(200);
res.end(html);
}).catch((e: Error)=> {
console.log('Error rendering: ',e);
res.status(500);
res.end();
});
});
server.listen(PORT,HOST,() => {
console.log(`listening on: ${HOST}:${PORT}`);
});
\ No newline at end of file
import * as React from "react";
//import {renderToString} from "react-dom/server"
import Routes from '../common/routes'
export default function(url: string) : Promise<string> {
const App = (
<div>
<Routes/>
</div>
);
//const applicationHTML = renderToString(App);
return new Promise((resolve,reject) => {
resolve(`<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon" sizes="57x57" href="/icon.png" />
</head>
<body>
<div id="react-root"></div>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/client.js"></script>
</body>
</html>`);
});
}
\ No newline at end of file
const path = require('path');
const webpack = require("webpack");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
console.log('IS_PRODUCTION: ',IS_PRODUCTION);
let plugins = [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks: function (module, count) {
return module.context && module.context.indexOf("node_modules") !== -1;
}
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
}
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new UglifyJSPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
/*new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|html|css)$/,
threshold: 0,
minRatio: 0.8
})*/
];
if (IS_PRODUCTION) {
plugins.push(new BundleAnalyzerPlugin({
analyzerMode: 'static'
}));
} else {
plugins.push(new webpack.HotModuleReplacementPlugin());
plugins.push(new webpack.NoEmitOnErrorsPlugin());
}
const loaders = IS_PRODUCTION ?
[
{
loader: 'awesome-typescript-loader'
}
] :
[
{
loader: 'react-hot-loader/webpack'
},
{
loader: 'awesome-typescript-loader'
}
];
module.exports = {
entry: IS_PRODUCTION ? [
'./src/client/client.tsx'
] : [
'webpack-hot-middleware/client',
'./src/client/client.tsx'
],
output: {
filename: 'client.js',
path: path.resolve(__dirname, 'dist/client'),
publicPath: '/'
},
// Enable sourcemaps for debugging webpack's output.
devtool: "cheap-module-source-map",
resolve: {