fix issues with Karma, webpack config building, undefined vars, remov…

…e require server bundle hack

app/components/App.jsx

@@ -9,13 +9,6 @@ Meteor.call('sayHello', function(err, res) {
   console.log(res);
 });
 
-if (Meteor.isServer) {
-  // Template does not support server side
-  var Template = {
-    loginButtons: 'any'
-  };
-}
-
 @reactMixin.decorate(ReactMeteorData)
 export default class App extends Component {
   getMeteorData() {
@@ -29,7 +22,7 @@ export default class App extends Component {
     let postsCount = Posts.find().fetch().length;
     return (
       <div className="App">
-        <BlazeTemplate template={Template.loginButtons} />
+        {Meteor.isClient && <BlazeTemplate template={Template.loginButtons} />}
         <h1>Hello Webpack!</h1>
         <p>There are {userCount} users in the Minimongo  (login to change)</p>
         <p>There are {postsCount} posts in the Minimongo  (autopublish removed)</p>

app/components/tests/app_spec.js

@@ -8,7 +8,8 @@
 import React from 'react/addons';
 //import App from '../App';
 //import $ from 'jquery'; // you could use jq to make life easier
-const TestUtils = React.addons.TestUtils;
+import TestUtils from 'react-addons-test-utils';
+
 const Simulate = TestUtils.Simulate;
 
 // these should go into a spec helper module

app/main_server.js

@@ -12,11 +12,9 @@ if (!Posts.find().fetch().length) {
   createUsers();
 }
 
-// smoke test that these are present
-Npm.require;
-Assets;
-require('fs').readFile.call;
-
 console.log('\n\nRunning on server only');
 console.log('There are # posts:', Posts.find().fetch().length);
-console.log('React SSR:', React.renderToString(<App/>));
+
+Meteor.startup(() => {
+  console.log('React SSR:', React.renderToString(<App/>));
+});

dev.js

@@ -4,36 +4,22 @@ var path = require('path');
 var dirs = require('./dirs');
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
-var addProgressPlugin = require('./addProgressPlugin');
 var statsOptions = require('./statsOptions');
 
-var serverConfig = require(path.join(dirs.webpack, 'webpack.config.server.dev'));
-var clientConfig = require(path.join(dirs.webpack, 'webpack.config.client.dev'));
+var makeConfig = require(path.join(dirs.webpack, 'make-webpack-config'));
+
+var serverConfig = makeConfig({target: 'server', mode: 'dev'});
+var clientConfig = makeConfig({target: 'client', mode: 'dev'});
 
 if (!clientConfig.devServer) clientConfig.devServer = {};
 if (!clientConfig.devServer.stats) clientConfig.devServer.stats = statsOptions;
 
-addProgressPlugin(serverConfig);
-addProgressPlugin(clientConfig);
-
-serverConfig.plugins.push(new webpack.BannerPlugin(
-  'require("source-map-support/register");\n' +
-  'var Npm = Meteor.__mwrContext__.Npm;\n' +
-  'var Assets = Meteor.__mwrContext__.Assets;\n' +
-  'delete Meteor.__mwrContext__;\n' +
-  'var require = Npm.require;\n',
-  {raw: true}
-));
-
 var serverBundlePath = path.join(dirs.assets, 'server.bundle.js');
-var serverBundleRequirePath = serverBundlePath.replace(/\\/g, '\\\\');
 var serverBundleLink = path.join(dirs.meteor, 'server/server.bundle.min.js');
 var clientBundleLink = path.join(dirs.meteor, 'client/client.bundle.min.js');
 var loadClientBundleHtml = path.join(dirs.webpack, 'loadClientBundle.html');
 var loadClientBundleLink = path.join(dirs.meteor, 'client/loadClientBundle.html');
 
-var requireServerBundleJs = path.join(dirs.meteor, 'server/require.server.bundle.js');
-
 exec('node core-js-custom-build.js');
 
 if (fs.existsSync(clientBundleLink)) rm(clientBundleLink);
@@ -47,7 +33,7 @@ serverCompiler.watch({
   colors: true,
 }, function(err, stats) {
   console.log(stats.toString(statsOptions)) ;
-  updateRequireServerBundleJs(stats);
+  ln('-sf', serverBundlePath, serverBundleLink)
   if (!serverBundleReady) {
     serverBundleReady = true;
     compileClient();
@@ -68,10 +54,3 @@ function runMeteor() {
   cd(dirs.meteor);
   exec('meteor --settings ../settings/devel.json', {async: true});
 }
-
-function updateRequireServerBundleJs(stats) {
-  var jsonStats = stats.toJson({hash: true});
-  ('//' + jsonStats.hash + '\n' +
-  'Meteor.__mwrContext__ = {Npm: Npm, Assets: Assets};\n' +
-  'Npm.require("' + serverBundleRequirePath + '");').to(requireServerBundleJs);
-}

karma.conf.js

@@ -1,5 +1,6 @@
 var path = require('path');
-var webpackConfig = require('./webpack/webpack.config.client.js');
+
+process.env.NODE_ENV = 'production';
 
 module.exports = function (config) {
   config.set({
@@ -21,15 +22,11 @@ module.exports = function (config) {
       './test/karma.bundle.js': [ 'webpack', 'sourcemap' ]
     },
     // use our own webpack config to mirror test setup
-    webpack: {
-      entry: [
-        './webpack/lib/core-js-no-number',
-        'regenerator/runtime',
-      ],
-      devtool: 'eval-source-map',
-      resolve: webpackConfig.resolve,
-      module: { loaders: webpackConfig.module.loaders },
-    },
+    webpack: require('./webpack/make-webpack-config')({
+      target: 'client',
+      mode: 'production',
+      karma: true,
+    }),
     webpackMiddleware: {
       noInfo: true,
     }

package.json

@@ -20,6 +20,8 @@
     "karma-webpack": "^1.7.0",
     "node-libs-browser": "^0.5.2",
     "null-loader": "^0.1.1",
+    "progress-bar-webpack-plugin": "^1.4.1",
+    "react-addons-test-utils": "^0.14.7",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.0",
     "redbox-react": "^1.0.1",
@@ -28,7 +30,8 @@
     "source-map-support": "^0.3.2",
     "style-loader": "^0.12.3",
     "webpack": "^1.10.1",
-    "webpack-dev-server": "^1.10.1"
+    "webpack-dev-server": "^1.10.1",
+    "webpack-merge": "^0.7.3"
   },
   "dependencies": {
     "classnames": "^2.1.3",
@@ -38,7 +41,8 @@
     "react-mixin": "^2.0.1"
   },
   "scripts": {
-    "lint": "eslint app"
+    "lint": "eslint app",
+    "karma": "karma start"
   },
   "author": "",
   "license": "MIT"

predeploy.js

@@ -4,24 +4,18 @@ var fs = require('fs');
 var path = require('path');
 var dirs = require('./dirs');
 var webpack = require('webpack');
-var addProgressPlugin = require('./addProgressPlugin');
 var statsOptions = require('./statsOptions');
 
-var serverConfig = require(path.join(dirs.webpack, 'webpack.config.server.prod'));
-var clientConfig = require(path.join(dirs.webpack, 'webpack.config.client.prod'));
+var makeConfig = require(path.join(dirs.webpack, 'make-webpack-config'));
 
-addProgressPlugin(serverConfig);
-addProgressPlugin(clientConfig);
-
-serverConfig.plugins.push(new webpack.BannerPlugin('var require = Npm.require;\n', {raw: true}));
+var serverConfig = makeConfig({target: 'server', mode: 'production'});
+var clientConfig = makeConfig({target: 'client', mode: 'production'});
 
 var serverBundlePath = path.join(dirs.assets, 'server.bundle.js');
 var clientBundlePath = path.join(dirs.assets, 'client.bundle.js');
 var serverBundleLink = path.join(dirs.meteor, 'server/server.bundle.min.js');
 var clientBundleLink = path.join(dirs.meteor, 'client/client.bundle.min.js');
-var loadClientBundleHtml = path.join(dirs.webpack, 'loadClientBundle.html');
 var loadClientBundleLink = path.join(dirs.meteor, 'client/loadClientBundle.html');
-var requireServerBundleJs = path.join(dirs.meteor, 'server/require.server.bundle.js');
 
 module.exports = function(callback) {
   exec('node core-js-custom-build.js');
@@ -31,7 +25,7 @@ module.exports = function(callback) {
   }
 
   if (fs.existsSync(loadClientBundleLink)) rm(loadClientBundleLink);
-  if (fs.existsSync(requireServerBundleJs)) rm(requireServerBundleJs);
+  if (fs.existsSync(serverBundleLink)) rm(serverBundleLink);
 
   var serverCompiler = webpack(serverConfig);
 

prod.js

@@ -7,29 +7,23 @@ var fs = require('fs');
 var path = require('path');
 var dirs = require('./dirs');
 var webpack = require('webpack');
-var addProgressPlugin = require('./addProgressPlugin');
 var statsOptions = require('./statsOptions');
 
-var serverConfig = require(path.join(dirs.webpack, 'webpack.config.server.prod'));
-var clientConfig = require(path.join(dirs.webpack, 'webpack.config.client.prod'));
+var makeConfig = require(path.join(dirs.webpack, 'make-webpack-config'));
 
-addProgressPlugin(serverConfig);
-addProgressPlugin(clientConfig);
-
-serverConfig.plugins.push(new webpack.BannerPlugin('var require = Npm.require;\n', {raw: true}));
+var serverConfig = makeConfig({target: 'server', mode: 'production'});
+var clientConfig = makeConfig({target: 'client', mode: 'production'});
 
 var serverBundlePath = path.join(dirs.assets, 'server.bundle.js');
 var clientBundlePath = path.join(dirs.assets, 'client.bundle.js');
 var serverBundleLink = path.join(dirs.meteor, 'server/server.bundle.min.js');
 var clientBundleLink = path.join(dirs.meteor, 'client/client.bundle.min.js');
-var loadClientBundleHtml = path.join(dirs.webpack, 'loadClientBundle.html');
 var loadClientBundleLink = path.join(dirs.meteor, 'client/loadClientBundle.html');
-var requireServerBundleJs = path.join(dirs.meteor, 'server/require.server.bundle.js');
 
 exec('node core-js-custom-build.js');
 
 if (fs.existsSync(loadClientBundleLink)) rm(loadClientBundleLink);
-if (fs.existsSync(requireServerBundleJs)) rm(requireServerBundleJs);
+if (fs.existsSync(serverBundleLink)) rm(serverBundleLink);
 
 var serverCompiler = webpack(serverConfig);
 var serverBundleReady = false;

webpack/loadClientBundle.html

@@ -4,7 +4,7 @@
     // so the URL must be created by script like this if we want to test on devices besides localhost.
     var scriptElem = document.createElement('script');
     scriptElem.type = 'text/javascript';
-    scriptElem.src = /https?:\/\/[^:\/]+/.exec(window.location.href)[0] + ':9090/assets/client.bundle.js';
+    scriptElem.src = /https?:\/\/[^:\/]+/.exec(window.location.href)[0] + ':9090/client.bundle.js';
     document.head.appendChild(scriptElem);
   </script>
 </head>