npm run build:client works

.isomorphic-loader-config.json

@@ -0,0 +1,12 @@
+{
+  "valid": true,
+  "version": "2.0.2",
+  "timestamp": 1555792515048,
+  "context": "",
+  "output": {
+    "path": "service/www",
+    "filename": "static/[name]-bundle.js",
+    "publicPath": "/"
+  },
+  "assetsFile": "service/www/static/media/isomorphic-assets.json"
+}

package.json

@@ -12,7 +12,10 @@
     "prettier:check": "prettier --check service/**/*.{ts,tsx,js,jsx}",
     "prettier:write": "prettier --write service/**/*.{ts,tsx,js,jsx}",
     "test": "npm run prettier:check && npm run test:unit && npm audit",
-    "test:unit": "_mocha 'service/**/*Spec.ts' --opts service/mocha.opts"
+    "test:unit": "_mocha 'service/**/*Spec.ts' --opts service/mocha.opts",
+    "copy-service-assets": "cd service && find . -name '*.json' | cpio -pdm ../lib",
+    "build:server": "npm run copy-service-assets && tsc",
+    "build:client": "NODE_ENV=production webpack -p"
   },
   "dependencies": {
     "express": "^4.16.2",
@@ -32,19 +35,32 @@
     "@types/express": "4.11.1",
     "@types/mocha": "5.2.5",
     "@types/sinon-chai": "3.2.2",
+    "@types/webpack": "^4.4.22",
+    "@types/webpack-dev-middleware": "^2.0.2",
+    "@types/webpack-hot-middleware": "^2.16.4",
+    "awesome-typescript-loader": "^5.2.1",
     "chai": "4.2.0",
     "chai-as-promised": "7.1.1",
     "chai-shallow-deep-equal": "1.4.6",
     "chai-string": "1.5.0",
     "chai-subset": "1.6.0",
     "expressmocks": "^0.1.3",
     "mocha": "5.2.0",
+    "isomorphic-loader": "^2.0.2",
     "mocha-better-spec-reporter": "3.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "prettier": "^1.9.2",
     "sinon": "7.2.2",
     "sinon-chai": "3.3.0",
     "ts-node": "6.1.1",
-    "typescript": "3.1.1"
+    "typescript": "3.1.1",
+    "core-js": "2.6.1",
+    "webpack": "^4.30.0",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.2.0",
+    "webpack-dev-middleware": "^3.4.0",
+    "webpack-hot-middleware": "^2.24.3",
+    "webpack-merge": "4.1.5"
   },
   "author": "Jonas Verhoelen <[email protected]>",
   "repository": {

service/frontend/index.ts

@@ -0,0 +1 @@
+console.log('index.ts')

service/www/static/media/isomorphic-assets.json

@@ -0,0 +1,9 @@
+{
+  "marked": {},
+  "chunks": {
+    "app": [
+      "static/app-bundle.js",
+      "static/app-bundle.js.map"
+    ]
+  }
+}

tsconfig-frontend.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "outDir": "./lib",
+        "allowJs": true,
+        "target": "es5",
+        "jsx": "react",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "strictNullChecks": true,
+        "noImplicitAny": true,
+        "noUnusedParameters": true,
+        "experimentalDecorators": true,
+        "noUnusedLocals": true,
+        "importHelpers": true,
+        "lib": [ "es7", "dom" ]
+    },
+    "include": [
+        "./service/frontend/**/*",
+        "./service/shared/**/*"
+    ],
+    "exclude": [
+        "./service/**/*Spec.*"
+    ]
+}

webpack.config.js

@@ -0,0 +1,141 @@
+const merge = require('webpack-merge')
+const path = require('path')
+const webpack = require('webpack')
+const IsomorphicLoaderPlugin = require('isomorphic-loader/lib/webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { CheckerPlugin } = require('awesome-typescript-loader')
+
+const devMode = process.env.NODE_ENV !== 'production'
+
+const PATHS = {
+    frontend: path.join(__dirname, 'service', 'frontend'),
+    shared: path.join(__dirname, 'service', 'shared'),
+    build: path.join(__dirname, 'service', 'www')
+}
+
+console.error('Running webpack in', devMode ? 'development' : 'production', 'mode')
+
+const common = {
+    mode: devMode ? 'development' : 'production',
+    entry: {
+        app: [
+            'core-js',
+            path.join(PATHS.frontend, 'index.ts')
+        ]
+    },
+    output: {
+        path: PATHS.build,
+        publicPath: '/',
+        filename: 'static/[name]-bundle.js'
+    },
+    devtool: 'source-map',
+    resolve: {
+        extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.jsx']
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [
+                    {
+                        loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader
+                    },
+                    {
+                        loader: 'css-loader'
+                    }
+                ]
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    {
+                        loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader
+                    },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1
+                        }
+                    },
+                    {
+                        loader: 'sass-loader'
+                    }
+                ]
+            },
+            {
+                test: /\.(tsx?|jsx?)$/,
+                use: [{
+                    loader: 'awesome-typescript-loader',
+                        options: {
+                            silent: !devMode,
+                            configFileName: 'tsconfig-frontend.json'
+                        }
+                }],
+                include: [
+                    PATHS.frontend,
+                    PATHS.shared
+                ]
+            },
+            {
+                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|mp4|svg|ttf|woff|woff2)(\?.*)?$/,
+                use: [{
+                    loader: 'file-loader',
+                    options: {
+                        name: devMode ? 'static/media/[name].[ext]' : 'static/media/[name].[hash:8].[ext]',
+                        publicPath: '/'
+                    }
+                }, {
+                    loader: 'isomorphic-loader'
+                }]
+            },
+            {
+                test: /\.jsx?$/,
+                loader: 'source-map-loader',
+                enforce: 'pre',
+                include: [
+                    PATHS.frontend,
+                    PATHS.shared
+                ]
+            }
+        ]
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                VERSION: JSON.stringify(require('./package.json').version),
+                NODE_ENV: JSON.stringify(devMode ? 'development' : 'production'),
+                APP_ENV: JSON.stringify('browser')
+            },
+            __DEV__: devMode
+        }),
+        new IsomorphicLoaderPlugin({
+            assetsFile: 'static/media/isomorphic-assets.json',
+            keepExistingConfig: !devMode
+        }),
+        new MiniCssExtractPlugin({
+            filename: devMode ? 'static/media/[name].css' : 'static/media/[name].[contenthash].css',
+            chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
+        }),
+        new CheckerPlugin()
+    ]
+}
+
+if (devMode) {
+    module.exports = merge(common, {
+        entry: {
+            app: [
+                'webpack-hot-middleware/client?reload=true'
+            ]
+        },
+        output: {
+            hotUpdateChunkFilename: 'hot/hot-update.js',
+            hotUpdateMainFilename: 'hot/hot-update.json'
+        },
+        plugins: [
+            new webpack.HotModuleReplacementPlugin()
+        ]
+    })
+} else {
+    // config can be added here for minifying / etc
+    module.exports = merge(common, {})
+}