Update ReactSpa template to match current patterns

templates/ReactSpa/ClientApp/boot.tsx

@@ -1,5 +1,3 @@
-import 'bootstrap';
-import 'bootstrap/dist/css/bootstrap.css';
 import './css/site.css';
 
 import * as React from 'react';

templates/ReactSpa/package.json

@@ -10,7 +10,6 @@
     "babel-preset-react": "^6.5.0",
     "bootstrap": "^3.3.6",
     "css-loader": "^0.23.1",
-    "extendify": "^1.0.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "isomorphic-fetch": "^2.2.1",

templates/ReactSpa/template_gitignore

@@ -28,7 +28,10 @@ Obj/
 
 # Visual Studio 2015 cache/options directory
 .vs/
-/wwwroot/dist/
+/wwwroot/dist/**
+
+# Workaround for https://github.com/aspnet/JavaScriptServices/issues/235
+!/wwwroot/dist/_placeholder.txt
 
 # MSTest test Results
 [Tt]est[Rr]esult*/

templates/ReactSpa/webpack.config.dev.js

@@ -1,8 +0,0 @@
-module.exports = {
-    devtool: 'inline-source-map',
-    module: {
-        loaders: [
-            { test: /\.css/, loader: 'style!css' }
-        ]
-    }
-};

templates/ReactSpa/webpack.config.js

@@ -1,32 +1,34 @@
+var isDevBuild = process.argv.indexOf('--env.prod') < 0;
 var path = require('path');
 var webpack = require('webpack');
-var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var devConfig = require('./webpack.config.dev');
-var prodConfig = require('./webpack.config.prod');
-var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';
 
-module.exports = merge({
+module.exports = {
-    resolve: {
+    devtool: isDevBuild ? 'inline-source-map' : null,
-        extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ]
+    entry: { 'main': './ClientApp/boot.tsx' },
+    resolve: { extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ] },
+    output: {
+        path: path.join(__dirname, './wwwroot/dist'),
+        filename: '[name].js',
+        publicPath: '/dist/'
     },
     module: {
         loaders: [
             { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'babel-loader' },
-            { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader?silent=true' }
+            { test: /\.tsx?$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
+            { test: /\.css$/, loader: isDevBuild ? 'style!css' : ExtractTextPlugin.extract(['css']) },
+            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
         ]
     },
-    entry: {
-        main: ['./ClientApp/boot.tsx'],
-    },
-    output: {
-        path: path.join(__dirname, 'wwwroot', 'dist'),
-        filename: '[name].js',
-        publicPath: '/dist/'
-    },
     plugins: [
         new webpack.DllReferencePlugin({
             context: __dirname,
             manifest: require('./wwwroot/dist/vendor-manifest.json')
         })
-    ]
+    ].concat(isDevBuild ? [] : [
-}, isDevelopment ? devConfig : prodConfig);
+        // Plugins that apply in production builds only
+        new webpack.optimize.OccurenceOrderPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
+        new ExtractTextPlugin('site.css')
+    ])
+};

templates/ReactSpa/webpack.config.prod.js

@@ -1,16 +0,0 @@
-var webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var extractCSS = new ExtractTextPlugin('site.css');
-
-module.exports = {
-    module: {
-        loaders: [
-            { test: /\.css/, loader: extractCSS.extract(['css']) },
-        ]
-    },
-    plugins: [
-        extractCSS,
-        new webpack.optimize.OccurenceOrderPlugin(),
-        new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
-    ]
-};

templates/ReactSpa/webpack.config.vendor.js

@@ -1,8 +1,8 @@
+var isDevBuild = process.argv.indexOf('--env.prod') < 0;
 var path = require('path');
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var extractCSS = new ExtractTextPlugin('vendor.css');
-var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';
 
 module.exports = {
     resolve: {
@@ -10,8 +10,8 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
+            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
-            { test: /\.css/, loader: extractCSS.extract(['css']) }
+            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
         ]
     },
     entry: {
@@ -30,7 +30,7 @@ module.exports = {
             path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
             name: '[name]_[hash]'
         })
-    ].concat(isDevelopment ? [] : [
+    ].concat(isDevBuild ? [] : [
         new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
     ])
 };

templates/ReactSpa/wwwroot/dist/_placeholder.txt

@@ -0,0 +1,9 @@
+------------------------------------------------------------------
+Don't delete this file. Do include it in your source control repo.
+------------------------------------------------------------------
+
+This file exists as a workaround for https://github.com/dotnet/cli/issues/1396
+('dotnet publish' does not publish any directories that didn't exist or were
+empty before the publish script started).
+
+Hopefully, this can be removed after the move to the new MSBuild.