Problems with build
Stalso opened this issue · comments
Hello. I am trying to use this library in this cool template. I made a lot of modifications and attempts. But I am newbie in all this node and webpack stuff and I cannot make this work. I have created webpack\universal-webpack-settings.js
file with code:
module.exports =
{
server:
{
input: './server/index',
output: './build/server.js'
}
}
Then I have modified webpack\webpack.dev.babel.js
and now it is:
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const logger = require('../../server/logger');
const cheerio = require('cheerio');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const dllPlugin = pkg.dllPlugin;
// PostCSS plugins
const cssnext = require('postcss-cssnext');
const postcssFocus = require('postcss-focus');
const postcssReporter = require('postcss-reporter');
const plugins = [
];
module.exports = {
entry: [
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
// Add development plugins
plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
// Load the CSS in a style tag in development
cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
// Process the CSS with PostCSS
postcssPlugins: [
postcssFocus(), // Add a :focus to every :hover
cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
browsers: ['last 2 versions', 'IE > 10'], // ...based on this browser list
}),
postcssReporter({ // Posts messages from plugins to the terminal
clearMessages: true,
}),
],
// Tell babel that we want to hot-reload
babelQuery: {
},
// Emit a source map for easier debugging
devtool: 'cheap-module-eval-source-map',
};
/**
* Select which plugins to use to optimize the bundle's handling of
* third party dependencies.
*
* If there is a dllPlugin key on the project's package.json, the
* Webpack DLL Plugin will be used. Otherwise the CommonsChunkPlugin
* will be used.
*
*/
function dependencyHandlers() {
// Don't do anything during the DLL Build step
if (process.env.BUILDING_DLL) { return []; }
// If the package.json does not have a dllPlugin property, use the CommonsChunkPlugin
if (!dllPlugin) {
return [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),
];
}
const dllPath = path.resolve(process.cwd(), dllPlugin.path || 'node_modules/react-boilerplate-dlls');
/**
* If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json
* Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude
*
* @see https://github.com/mxstbr/react-boilerplate/tree/master/docs/general/webpack.md
*/
if (!dllPlugin.dlls) {
const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');
if (!fs.existsSync(manifestPath)) {
logger.error('The DLL manifest is missing. Please run `npm run build:dll`');
process.exit(0);
}
return [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
}),
];
}
// If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.
const dllManifests = Object.keys(dllPlugin.dlls).map((name) => path.join(dllPath, `/${name}.json`));
return dllManifests.map((manifestPath) => {
if (!fs.existsSync(path)) {
if (!fs.existsSync(manifestPath)) {
logger.error(`The following Webpack DLL manifest is missing: ${path.basename(manifestPath)}`);
logger.error(`Expected to find it in ${dllPath}`);
logger.error('Please run: npm run build:dll');
process.exit(0);
}
}
return new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
});
});
}
/**
* We dynamically generate the HTML content in development so that the different
* DLL Javascript files are loaded in script tags and available to our application.
*/
function templateContent() {
const html = fs.readFileSync(
path.resolve(process.cwd(), 'app/index.html')
).toString();
if (!dllPlugin) { return html; }
const doc = cheerio(html);
const body = doc.find('body');
const dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);
dllNames.forEach(dllName => body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`));
return doc.toString();
}
Then I have created such webpack\webpack.dev.client.babel.js
:
var client_configuration = require('universal-webpack').clientConfiguration;
var settings = require('./universal-webpack-settings');
var base_configuration = require('./webpack.dev.babel');
const webpack = require('webpack');
const path = require('path');
const fs = require('fs');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const dllPlugin = pkg.dllPlugin;
const logger = require('../../server/logger');
const cheerio = require('cheerio');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const plugins = [
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
templateContent: templateContent(), // eslint-disable-line no-use-before-define
}),
];
/**
* We dynamically generate the HTML content in development so that the different
* DLL Javascript files are loaded in script tags and available to our application.
*/
function templateContent() {
const html = fs.readFileSync(
path.resolve(process.cwd(), 'app/index.html')
).toString();
if (!dllPlugin) { return html; }
const doc = cheerio(html);
const body = doc.find('body');
const dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);
dllNames.forEach(dllName => body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`));
return doc.toString();
}
base_configuration.entry.splice(0,0,'eventsource-polyfill','webpack-hot-middleware/client');
base_configuration.plugins = base_configuration.plugins.concat(plugins);
base_configuration.babelQuery = {
presets: ['react-hmre'],
};
var final_configuration = require('./webpack.base.babel')(base_configuration);
module.exports = client_configuration(final_configuration, settings);
Then I have created webpack\webpack.dev.server.babel.js
:
var server_configuration = require('universal-webpack').server_configuration;
var settings = require('./universal-webpack-settings');
var base_configuration = require('./webpack.dev.babel');
var configuration = require('./webpack.base.babel')(base_configuration);
module.exports = server_configuration(configuration, settings)
Then I have modifyed server\index.js
:
const express = require('express');
const logger = require('./logger');
const argv = require('minimist')(process.argv.slice(2));
const setup = require('./middlewares/frontendMiddleware');
const isDev = process.env.NODE_ENV !== 'production';
const ngrok = (isDev && process.env.ENABLE_TUNNEL) || argv.tunnel ? require('ngrok') : false;
const resolve = require('path').resolve;
// If you need a backend, e.g. an API, add your custom backend-specific middleware here
// app.use('/api', myApi);
// In production we need to pass these values in instead of relying on webpack
const app = setup(express(), {
outputPath: resolve(process.cwd(), 'build'),
publicPath: '/',
});
// get the intended port number, use port 3000 if not provided
const port = argv.port || process.env.PORT || 3000;
// Start your app.
module.exports = function()
{
console.log('server callback');
app.listen(port, (err) => {
console.log('server callback');
if (err) {
return logger.error(err.message);
}
// Connect to ngrok in dev mode
if (ngrok) {
ngrok.connect(port, (innerErr, url) => {
if (innerErr) {
return logger.error(innerErr);
}
logger.appStarted(port, url);
});
} else {
logger.appStarted(port);
}
});
}
Finally I have created server\start-server.js
file:
var server = require('universal-webpack').server;
var settings = require('../internals/webpack/universal-webpack-settings')
var configuration = require('../internals/webpack/webpack.dev.babel');
var final_conf = require('../internals/webpack/webpack.base.babel')(configuration);
server(final_conf, settings)
After this I have modified server\middlewares\frontendMiddleware.js
file and replaced this:
//const webpackConfig = require('../../internals/webpack/webpack.dev.babel');
const webpackConfig = require('../../internals/webpack/webpack.dev.client.babel');
Also I have modified start task in package.json:
"start": "cross-env NODE_ENV=development webpack --config internals/webpack/webpack.dev.server.babel.js && node server/start-server",
After alll this stuff, when I run start task I have following ouput (and server is not started):
cross-env NODE_ENV=development webpack --config internals/webpack/webpack.dev.server.babel.js && node server/start-server
./internals/webpack 160 bytes {0} [built]
./server/middlewares 160 bytes {0} [built]
+ 35 hidden modules
When I have tried to run result bundle file manually, I am getting the following error:
Error: Cannot find module 'components/Img'
If you have time, maybe you will help me. Or maybe it is bug in libarary, I do not know. And by the way, you should remove russian comments from sample application code ))) I am speaking about хз, нужно ли сжатие в node.js: мб лучше поставить впереди nginx'ы,
. Espessialy you shoukd remove хз
))
var base_configuration = require('./webpack.dev.babel');
var configuration = require('./webpack.base.babel')(base_configuration);
I think naming is wrong in that piece of code.
When exactly do you get the error?
Is it when you run node
?
Or is it when you run webpack
?
As I said, when I run node there are no errors, server simply is not starting.
As I said, when I run node there are no errors, server simply is not starting.
.
When exactly do you get the error? Is it when you run node? Or is it when you run webpack?
Hm, I can not understand you. When I run start command (described in initial post) I have the following output in node console
cross-env NODE_ENV=development webpack --config internals/webpack/webpack.dev.server.babel.js && node server/start-server
./internals/webpack 160 bytes {0} [built]
./server/middlewares 160 bytes {0} [built]
+ 35 hidden modules
And that is all, nothing more. But if you will look at command, server is supposed to start . But build is done, and when I run bundling result manually I receive described in start post error. This mistake appears when I am running node.If you have some time I can publish code on github. In fact? I advice you to look at the provided boilerplate ( https://github.com/mxstbr/react-boilerplate ). I am trying to implement ssr in it. If you will be able to do it - it will be cool
This mistake appears when I am running node
What is the exact node
command you're running and what is the exact full console output
Exact Node command which I am running is:
"start": "cross-env NODE_ENV=development webpack --config internals/webpack/webpack.dev.server.babel.js && node server/start-server",
In this case full console output is:
cross-env NODE_ENV=development webpack --config internals/webpack/webpack.dev.server.babel.js && node server/start-server
./internals/webpack 160 bytes {0} [built]
./server/middlewares 160 bytes {0} [built]
+ 35 hidden modules
And command is finished (server is not running for some reason, but it should run according your tutorial). But I can see bundle build in this case in build/server.js
. When I am truing to run bundled server manually using:
node build/server
I am getting following error
module.js:442
throw err;
^
Error: Cannot find module 'components/Img'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (E:\sandbox\node\reactv11\build\server.js:945:19)
at __webpack_require__ (E:\sandbox\node\reactv11\build\server.js:21:30)
at Object.module.exports.module.exports.server.input (E:\sandbox\node\reactv11\build\server.js:330:74)
at __webpack_require__ (E:\sandbox\node\reactv11\build\server.js:21:30)
at Object.<anonymous> (E:\sandbox\node\reactv11\build\server.js:220:79)
at __webpack_require__ (E:\sandbox\node\reactv11\build\server.js:21:30)
If you want, you may close the issue. I understand that it is possibly my mistake. I simply can not figure out what I am doing wrong by myself
Exact Node command which I am running is:
Wrong.
This consists of 2 commands.
node build/server
This one is closer
Error: Cannot find module 'components/Img'
Post your build/server
file
It is bundled server build. Should I post it?
module.exports =
/******/ (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;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 17);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!***********************!*\
!*** external "path" ***!
\***********************/
/***/ function(module, exports) {
module.exports = require("path");
/***/ },
/* 1 */
/*!***************************!*\
!*** ./internals/webpack ***!
\***************************/
/***/ function(module, exports) {
function webpackEmptyContext(req) {
throw new Error("Cannot find module '" + req + "'.");
}
webpackEmptyContext.keys = function() { return []; };
webpackEmptyContext.resolve = webpackEmptyContext;
module.exports = webpackEmptyContext;
webpackEmptyContext.id = 1;
/***/ },
/* 2 */
/*!**************************!*\
!*** external "webpack" ***!
\**************************/
/***/ function(module, exports) {
module.exports = require("webpack");
/***/ },
/* 3 */
/*!**************************!*\
!*** ./server/logger.js ***!
\**************************/
/***/ function(module, exports, __webpack_require__) {
/* eslint-disable no-console */
var chalk = __webpack_require__(/*! chalk */ 24);
var ip = __webpack_require__(/*! ip */ 29);
var divider = chalk.gray('\n-----------------------------------');
/**
* Logger middleware, you can customize it to make messages more personal
*/
var logger = {
// Called whenever there's an error on the server we want to print
error: function error(err) {
console.error(chalk.red(err));
},
// Called when express.js app starts on given port w/o errors
appStarted: function appStarted(port, tunnelStarted) {
console.log('Server started ' + chalk.green('✓'));
// If the tunnel started, log that and the URL it's available at
if (tunnelStarted) {
console.log('Tunnel initialised ' + chalk.green('✓'));
}
console.log('\n' + chalk.bold('Access URLs:') + divider + '\nLocalhost: ' + chalk.magenta('http://localhost:' + port) + '\n LAN: ' + (chalk.magenta('http://' + ip.address() + ':' + port) + (tunnelStarted ? '\n Proxy: ' + chalk.magenta(tunnelStarted) : '')) + divider + '\n' + chalk.blue('Press ' + chalk.italic('CTRL-C') + ' to stop') + '\n ');
}
};
module.exports = logger;
/***/ },
/* 4 */
/*!**************************!*\
!*** external "express" ***!
\**************************/
/***/ function(module, exports) {
module.exports = require("express");
/***/ },
/* 5 */
/*!**************************************!*\
!*** ./~/css-loader/lib/css-base.js ***!
\**************************************/
/***/ function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function() {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for(var i = 0; i < this.length; i++) {
var item = this[i];
if(item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ },
/* 6 */
/*!**************************!*\
!*** external "cheerio" ***!
\**************************/
/***/ function(module, exports) {
module.exports = require("cheerio");
/***/ },
/* 7 */
/*!*********************!*\
!*** external "fs" ***!
\*********************/
/***/ function(module, exports) {
module.exports = require("fs");
/***/ },
/* 8 */
/*!**************************************!*\
!*** external "html-webpack-plugin" ***!
\**************************************/
/***/ function(module, exports) {
module.exports = require("html-webpack-plugin");
/***/ },
/* 9 */
/*!**************************************************!*\
!*** ./server/middlewares/frontendMiddleware.js ***!
\**************************************************/
/***/ function(module, exports, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__app_containers_App__ = __webpack_require__(/*! ../../app/containers/App */ 12);
/* eslint-disable global-require */
var express = __webpack_require__(/*! express */ 4);
var path = __webpack_require__(/*! path */ 0);
var compression = __webpack_require__(/*! compression */ 28);
var pkg = !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }());
// Dev middleware
var addDevMiddlewares = function addDevMiddlewares(app, webpackConfig) {
var webpack = __webpack_require__(/*! webpack */ 2);
var webpackDevMiddleware = __webpack_require__(/*! webpack-dev-middleware */ 35);
var webpackHotMiddleware = __webpack_require__(/*! webpack-hot-middleware */ 36);
var compiler = webpack(webpackConfig);
var middleware = webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath,
silent: true,
stats: 'errors-only'
});
app.use(middleware);
app.use(webpackHotMiddleware(compiler));
// Since webpackDevMiddleware uses memory-fs internally to store build
// artifacts, we use it instead
var fs = middleware.fileSystem;
if (pkg.dllPlugin) {
app.get(/\.dll\.js$/, function (req, res) {
var filename = req.path.replace(/^\//, '');
res.sendFile(path.join(process.cwd(), pkg.dllPlugin.path, filename));
});
}
app.get('*', function (req, res) {
fs.readFile(path.join(compiler.outputPath, 'index.html'), function (err, file) {
if (err) {
res.sendStatus(404);
} else {
res.send(file.toString());
}
});
});
};
// Production middlewares
var addProdMiddlewares = function addProdMiddlewares(app, options) {
var publicPath = options.publicPath || '/';
var outputPath = options.outputPath || path.resolve(process.cwd(), 'build');
// compression middleware compresses your server responses which makes them
// smaller (applies also to assets). You can read more about that technique
// and other good practices on official Express.js docs http://mxs.is/googmy
app.use(compression());
app.use(publicPath, express.static(outputPath));
app.get('*', function (req, res) {
return res.sendFile(path.resolve(outputPath, 'index.html'));
});
};
/**
* Front-end middleware
*/
module.exports = function (app, options) {
var isProd = "development" === 'production';
console.log('sjdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh');
if (isProd) {
addProdMiddlewares(app, options);
} else {
//const webpackConfig = require('../../internals/webpack/webpack.dev.babel');
var webpackConfig = __webpack_require__(/*! ../../internals/webpack/webpack.dev.client.babel */ 16);
addDevMiddlewares(app, webpackConfig);
}
return app;
};
/***/ },
/* 10 */
/*!***************************!*\
!*** external "minimist" ***!
\***************************/
/***/ function(module, exports) {
module.exports = require("minimist");
/***/ },
/* 11 */
/*!************************!*\
!*** external "ngrok" ***!
\************************/
/***/ function(module, exports) {
module.exports = require("ngrok");
/***/ },
/* 12 */
/*!*************************************!*\
!*** ./app/containers/App/index.js ***!
\*************************************/
/***/ function(module, exports, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(/*! react */ 33);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __WEBPACK_IMPORTED_MODULE_0_react__ && __WEBPACK_IMPORTED_MODULE_0_react__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_0_react__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_0_react__; }
/* harmony import */ Object.defineProperty(__WEBPACK_IMPORTED_MODULE_0_react___default, 'a', { get: __WEBPACK_IMPORTED_MODULE_0_react___default });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_sanitize_css_sanitize_css__ = __webpack_require__(/*! sanitize.css/sanitize.css */ 20);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_sanitize_css_sanitize_css___default = __WEBPACK_IMPORTED_MODULE_1_sanitize_css_sanitize_css__ && __WEBPACK_IMPORTED_MODULE_1_sanitize_css_sanitize_css__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_1_sanitize_css_sanitize_css__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_1_sanitize_css_sanitize_css__; }
/* harmony import */ Object.defineProperty(__WEBPACK_IMPORTED_MODULE_1_sanitize_css_sanitize_css___default, 'a', { get: __WEBPACK_IMPORTED_MODULE_1_sanitize_css_sanitize_css___default });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_components_Img__ = __webpack_require__(/*! components/Img */ 27);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_components_Img___default = __WEBPACK_IMPORTED_MODULE_2_components_Img__ && __WEBPACK_IMPORTED_MODULE_2_components_Img__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_2_components_Img__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_2_components_Img__; }
/* harmony import */ Object.defineProperty(__WEBPACK_IMPORTED_MODULE_2_components_Img___default, 'a', { get: __WEBPACK_IMPORTED_MODULE_2_components_Img___default });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_components_Footer__ = __webpack_require__(/*! components/Footer */ 26);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_components_Footer___default = __WEBPACK_IMPORTED_MODULE_3_components_Footer__ && __WEBPACK_IMPORTED_MODULE_3_components_Footer__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_3_components_Footer__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_3_components_Footer__; }
/* harmony import */ Object.defineProperty(__WEBPACK_IMPORTED_MODULE_3_components_Footer___default, 'a', { get: __WEBPACK_IMPORTED_MODULE_3_components_Footer___default });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg__ = __webpack_require__(/*! ./banner-metal.jpg */ 22);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg___default = __WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg__ && __WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg__; }
/* harmony import */ Object.defineProperty(__WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg___default, 'a', { get: __WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg___default });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_components_A__ = __webpack_require__(/*! components/A */ 25);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_components_A___default = __WEBPACK_IMPORTED_MODULE_5_components_A__ && __WEBPACK_IMPORTED_MODULE_5_components_A__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_5_components_A__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_5_components_A__; }
/* harmony import */ Object.defineProperty(__WEBPACK_IMPORTED_MODULE_5_components_A___default, 'a', { get: __WEBPACK_IMPORTED_MODULE_5_components_A___default });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__styles_css__ = __webpack_require__(/*! ./styles.css */ 21);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__styles_css___default = __WEBPACK_IMPORTED_MODULE_6__styles_css__ && __WEBPACK_IMPORTED_MODULE_6__styles_css__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_6__styles_css__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_6__styles_css__; }
/* harmony import */ Object.defineProperty(__WEBPACK_IMPORTED_MODULE_6__styles_css___default, 'a', { get: __WEBPACK_IMPORTED_MODULE_6__styles_css___default });
/**
*
* App.react.js
*
* This component is the skeleton around the actual pages, and should only
* contain code that should be seen on all pages. (e.g. navigation bar)
*/
// Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
function App(props) {
return /* harmony import */__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: /* harmony import */__WEBPACK_IMPORTED_MODULE_6__styles_css___default.a.wrapper },
/* harmony import */__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
/* harmony import */__WEBPACK_IMPORTED_MODULE_5_components_A___default.a,
{ className: /* harmony import */__WEBPACK_IMPORTED_MODULE_6__styles_css___default.a.logoWrapper, href: 'https://twitter.com/mxstbr' },
/* harmony import */__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(/* harmony import */__WEBPACK_IMPORTED_MODULE_2_components_Img___default.a, { className: /* harmony import */__WEBPACK_IMPORTED_MODULE_6__styles_css___default.a.logo, src: /* harmony import */__WEBPACK_IMPORTED_MODULE_4__banner_metal_jpg___default.a, alt: 'react-boilerplate - Logo' })
),
props.children,
/* harmony import */__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(/* harmony import */__WEBPACK_IMPORTED_MODULE_3_components_Footer___default.a, null)
);
}
App.propTypes = {
children: /* harmony import */__WEBPACK_IMPORTED_MODULE_0_react___default.a.PropTypes.node
};
/* unused harmony default export */ var _unused_webpack_default_export = App;
/***/ },
/* 13 */
/*!*********************************************************!*\
!*** ./internals/webpack/universal-webpack-settings.js ***!
\*********************************************************/
/***/ function(module, exports) {
/**
* Created by Denis on 6/16/2016.
*/
//require('../../server/index')
module.exports = {
server: {
input: './server/index',
output: './build/server.js'
}
};
/***/ },
/* 14 */
/*!*************************************************!*\
!*** ./internals/webpack/webpack.base.babel.js ***!
\*************************************************/
/***/ function(module, exports, __webpack_require__) {
/**
* COMMON WEBPACK CONFIGURATION
*/
var path = __webpack_require__(/*! path */ 0);
var webpack = __webpack_require__(/*! webpack */ 2);
module.exports = function (options) {
return {
context: process.cwd(),
entry: options.entry,
output: Object.assign({ // Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/'
}, options.output), // Merge with env dependent settings
module: {
loaders: [{
test: /\.js$/, // Transform all .js files required somewhere with Babel
loader: 'babel',
exclude: /node_modules/,
query: options.babelQuery
}, {
// Transform our own .css files with PostCSS and CSS-modules
test: /\.css$/,
exclude: /node_modules/,
loader: options.cssLoaders
}, {
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader']
}, {
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
}, {
test: /\.(jpg|png|gif)$/,
loaders: ['file-loader', 'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}']
}, {
test: /\.html$/,
loader: 'html-loader'
}, {
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.mp4$/,
loader: 'url?limit=10000&mimetype=video/mp4'
}, {
test: /\.webm$/,
loader: 'url?limit=10000&mimetype=video/webm'
}]
},
plugins: options.plugins.concat([new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports?self.fetch!whatwg-fetch'
}),
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify("development")
}
})]),
postcss: function postcss() {
return options.postcssPlugins;
},
resolve: {
modules: ['app', 'node_modules'],
extensions: ['', '.js', '.jsx', '.react.js'],
packageMains: ['jsnext:main', 'main']
},
devtool: options.devtool,
//target: 'web', // Make web variables accessible to webpack, e.g. window
stats: false, // Don't show stats in the console
progress: true
};
};
/***/ },
/* 15 */
/*!************************************************!*\
!*** ./internals/webpack/webpack.dev.babel.js ***!
\************************************************/
/***/ function(module, exports, __webpack_require__) {
/**
* DEVELOPMENT WEBPACK CONFIGURATION
*/
var path = __webpack_require__(/*! path */ 0);
var fs = __webpack_require__(/*! fs */ 7);
var webpack = __webpack_require__(/*! webpack */ 2);
var HtmlWebpackPlugin = __webpack_require__(/*! html-webpack-plugin */ 8);
var logger = __webpack_require__(/*! ../../server/logger */ 3);
var cheerio = __webpack_require__(/*! cheerio */ 6);
var pkg = !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }());
var dllPlugin = pkg.dllPlugin;
// PostCSS plugins
var cssnext = __webpack_require__(/*! postcss-cssnext */ 30);
var postcssFocus = __webpack_require__(/*! postcss-focus */ 31);
var postcssReporter = __webpack_require__(/*! postcss-reporter */ 32);
var plugins = [
// new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
// new webpack.NoErrorsPlugin(),
// new HtmlWebpackPlugin({
// inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
// templateContent: templateContent(), // eslint-disable-line no-use-before-define
// }),
];
// module.exports = require('./webpack.base.babel')({
// // Add hot reloading in development
// entry: [
// //'eventsource-polyfill', // Necessary for hot reloading with IE
// //'webpack-hot-middleware/client',
// path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
// ],
//
// // Don't use hashes in dev mode for better performance
// output: {
// filename: '[name].js',
// chunkFilename: '[name].chunk.js',
// },
//
// // Add development plugins
// plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
//
// // Load the CSS in a style tag in development
// cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
//
// // Process the CSS with PostCSS
// postcssPlugins: [
// postcssFocus(), // Add a :focus to every :hover
// cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
// browsers: ['last 2 versions', 'IE > 10'], // ...based on this browser list
// }),
// postcssReporter({ // Posts messages from plugins to the terminal
// clearMessages: true,
// }),
// ],
//
// // Tell babel that we want to hot-reload
// babelQuery: {
// //presets: ['react-hmre'],
// },
//
// // Emit a source map for easier debugging
// devtool: 'cheap-module-eval-source-map',
// });
/////////////////////////////////
module.exports = {
// Add hot reloading in development
entry: [
//'eventsource-polyfill', // Necessary for hot reloading with IE
//'webpack-hot-middleware/client',
path.join(process.cwd(), 'app/app.js')],
// Start with js/app.js
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
// Add development plugins
plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
// Load the CSS in a style tag in development
cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
// Process the CSS with PostCSS
postcssPlugins: [postcssFocus(), // Add a :focus to every :hover
cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
browsers: ['last 2 versions', 'IE > 10'] }), // ...based on this browser list
postcssReporter({ // Posts messages from plugins to the terminal
clearMessages: true
})],
// Tell babel that we want to hot-reload
babelQuery: {
//presets: ['react-hmre'],
},
// Emit a source map for easier debugging
devtool: 'cheap-module-eval-source-map'
};
////////////////////////////////
/**
* Select which plugins to use to optimize the bundle's handling of
* third party dependencies.
*
* If there is a dllPlugin key on the project's package.json, the
* Webpack DLL Plugin will be used. Otherwise the CommonsChunkPlugin
* will be used.
*
*/
function dependencyHandlers() {
// Don't do anything during the DLL Build step
if ({"NODE_ENV":"development"}.BUILDING_DLL) {
return [];
}
// If the package.json does not have a dllPlugin property, use the CommonsChunkPlugin
if (!dllPlugin) {
return [new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true
})];
}
var dllPath = path.resolve(process.cwd(), dllPlugin.path || 'node_modules/react-boilerplate-dlls');
/**
* If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json
* Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude
*
* @see https://github.com/mxstbr/react-boilerplate/tree/master/docs/general/webpack.md
*/
if (!dllPlugin.dlls) {
var manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');
if (!fs.existsSync(manifestPath)) {
logger.error('The DLL manifest is missing. Please run `npm run build:dll`');
process.exit(0);
}
return [new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()) })];
}
// If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.
// eslint-disable-line global-require
var dllManifests = Object.keys(dllPlugin.dlls).map(function (name) {
return path.join(dllPath, '/' + name + '.json');
});
return dllManifests.map(function (manifestPath) {
if (!fs.existsSync(path)) {
if (!fs.existsSync(manifestPath)) {
logger.error('The following Webpack DLL manifest is missing: ' + path.basename(manifestPath));
logger.error('Expected to find it in ' + dllPath);
logger.error('Please run: npm run build:dll');
process.exit(0);
}
}
return new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()) });
});
}
/**
* We dynamically generate the HTML content in development so that the different
* DLL Javascript files are loaded in script tags and available to our application.
*/
// eslint-disable-line global-require
function templateContent() {
var html = fs.readFileSync(path.resolve(process.cwd(), 'app/index.html')).toString();
if (!dllPlugin) {
return html;
}
var doc = cheerio(html);
var body = doc.find('body');
var dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);
dllNames.forEach(function (dllName) {
return body.append('<script data-dll=\'true\' src=\'/' + dllName + '.dll.js\'></script>');
});
return doc.toString();
}
/***/ },
/* 16 */
/*!*******************************************************!*\
!*** ./internals/webpack/webpack.dev.client.babel.js ***!
\*******************************************************/
/***/ function(module, exports, __webpack_require__) {
/**
* Created by Denis on 6/16/2016.
*/
var client_configuration = __webpack_require__(/*! universal-webpack */ 34).clientConfiguration;
var settings = __webpack_require__(/*! ./universal-webpack-settings */ 13);
var base_configuration = __webpack_require__(/*! ./webpack.dev.babel */ 15);
var webpack = __webpack_require__(/*! webpack */ 2);
var path = __webpack_require__(/*! path */ 0);
var fs = __webpack_require__(/*! fs */ 7);
var pkg = !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }());
var dllPlugin = pkg.dllPlugin;
var logger = __webpack_require__(/*! ../../server/logger */ 3);
var cheerio = __webpack_require__(/*! cheerio */ 6);
var HtmlWebpackPlugin = __webpack_require__(/*! html-webpack-plugin */ 8);
var plugins = [new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
templateContent: templateContent() })];
/**
* We dynamically generate the HTML content in development so that the different
* DLL Javascript files are loaded in script tags and available to our application.
*/
// eslint-disable-line no-use-before-define
function templateContent() {
var html = fs.readFileSync(path.resolve(process.cwd(), 'app/index.html')).toString();
if (!dllPlugin) {
return html;
}
var doc = cheerio(html);
var body = doc.find('body');
var dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);
dllNames.forEach(function (dllName) {
return body.append('<script data-dll=\'true\' src=\'/' + dllName + '.dll.js\'></script>');
});
return doc.toString();
}
base_configuration.entry.splice(0, 0, 'eventsource-polyfill', 'webpack-hot-middleware/client');
base_configuration.plugins = base_configuration.plugins.concat(plugins);
base_configuration.babelQuery = {
presets: ['react-hmre']
};
var final_configuration = __webpack_require__(/*! ./webpack.base.babel */ 14)(base_configuration);
//module.exports = final_configuration;
module.exports = client_configuration(final_configuration, settings);
//export default client_configuration(configuration, settings)
/***/ },
/* 17 */
/*!*************************!*\
!*** ./server/index.js ***!
\*************************/
/***/ function(module, exports, __webpack_require__) {
/* eslint consistent-return:0 */
var express = __webpack_require__(/*! express */ 4);
var logger = __webpack_require__(/*! ./logger */ 3);
var argv = __webpack_require__(/*! minimist */ 10)(process.argv.slice(2));
var setup = __webpack_require__(/*! ./middlewares/frontendMiddleware */ 9);
var isDev = "development" !== 'production';
var ngrok = isDev && {"NODE_ENV":"development"}.ENABLE_TUNNEL || argv.tunnel ? __webpack_require__(/*! ngrok */ 11) : false;
var resolve = __webpack_require__(/*! path */ 0).resolve;
// If you need a backend, e.g. an API, add your custom backend-specific middleware here
// app.use('/api', myApi);
// In production we need to pass these values in instead of relying on webpack
var app = setup(express(), {
outputPath: resolve(process.cwd(), 'build'),
publicPath: '/'
});
// get the intended port number, use port 3000 if not provided
var port = argv.port || {"NODE_ENV":"development"}.PORT || 3000;
// Start your app.
module.exports = function () {
console.log('server callback');
app.listen(port, function (err) {
console.log('server callback');
if (err) {
return logger.error(err.message);
}
// Connect to ngrok in dev mode
if (ngrok) {
ngrok.connect(port, function (innerErr, url) {
if (innerErr) {
return logger.error(innerErr);
}
logger.appStarted(port, url);
});
} else {
logger.appStarted(port);
}
});
};
/***/ },
/* 18 */
/*!****************************************************!*\
!*** ./~/css-loader!./~/sanitize.css/sanitize.css ***!
\****************************************************/
/***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ./../css-loader/lib/css-base.js */ 5)();
// imports
// module
exports.push([module.i, "/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */\n\n/* Latest tested: Android 6, Chrome 48, Edge 13, Firefox 44, Internet Explorer 11, iOS 9, Opera 35, Safari 9, Windows Phone 8.1 */\n\n/*\n * Normalization\n */\n\nabbr[title] {\n\ttext-decoration: underline; /* Chrome 48+, Edge 12+, Internet Explorer 11-, Safari 9+ */\n\ttext-decoration: underline dotted; /* Firefox 40+ */\n}\n\naudio:not([controls]) {\n\tdisplay: none; /* Chrome 44-, iOS 8+, Safari 9+ */\n}\n\nb,\nstrong {\n\tfont-weight: bolder; /* Edge 12+, Safari 6.2+, and Chrome 18+ */\n}\n\nbutton {\n\t-webkit-appearance: button; /* iOS 8+ */\n\toverflow: visible; /* Internet Explorer 11- */\n}\n\nbutton,\ninput {\n}\n\nbutton::-moz-focus-inner, input::-moz-focus-inner {\n\tborder: 0;/* Firefox 4+ */\n\tpadding: 0;/* Firefox 4+ */\n}\n\nbutton:-moz-focusring, input:-moz-focusring {\n\toutline: 1px dotted ButtonText;/* Firefox 4+ */\n}\n\nbutton,\nselect {\n\ttext-transform: none; /* Firefox 40+, Internet Explorer 11- */\n}\n\ndetails {\n\tdisplay: block; /* Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */\n}\n\nhtml {\n\t-ms-overflow-style: -ms-autohiding-scrollbar; /* Edge 12+, Internet Explorer 11- */\n\toverflow-y: scroll; /* All browsers without overlaying scrollbars */\n\t-webkit-text-size-adjust: 100%; /* iOS 8+, Windows Phone 8.1+ */\n}\n\nhr {\n\toverflow: visible; /* Internet Explorer 11-, Edge 12+ */\n}\n\ninput {\n\t-webkit-border-radius: 0 /* iOS 8+ */\n}\n\ninput[type=\"button\"],\n\tinput[type=\"reset\"],\n\tinput[type=\"submit\"] {\n\t-webkit-appearance: button;/* iOS 8+ */\n}\n\ninput[type=\"number\"] {\n\twidth: auto;/* Firefox 36+ */\n}\n\ninput[type=\"search\"] {\n\t-webkit-appearance: textfield;/* Chrome 45+, Safari 9+ */\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\n\t\tinput[type=\"search\"]::-webkit-search-decoration {\n\t-webkit-appearance: none;/* Chrome 45+, Safari 9+ */\n}\n\nmain {\n\tdisplay: block; /* Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+ */\n}\n\npre {\n\toverflow: auto; /* Internet Explorer 11- */\n}\n\nprogress {\n\tdisplay: inline-block; /* Internet Explorer 11-, Windows Phone 8.1+ */\n}\n\nsummary {\n\tdisplay: block; /* Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */\n}\n\nsvg:not(:root) {\n\toverflow: hidden; /* Internet Explorer 11- */\n}\n\ntemplate {\n\tdisplay: none; /* Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+ */\n}\n\ntextarea {\n\toverflow: auto; /* Edge 12+, Internet Explorer 11- */\n}\n\n[hidden] {\n\tdisplay: none; /* Internet Explorer 10- */\n}\n\n/*\n * Universal inheritance\n */\n\n*,\n:before,\n:after {\n\tbox-sizing: inherit;\n}\n\n* {\n\tfont-size: inherit;\n\tline-height: inherit;\n}\n\n:before,\n:after {\n\ttext-decoration: inherit;\n\tvertical-align: inherit;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n\tfont-family: inherit;\n\tfont-style: inherit;\n\tfont-weight: inherit;\n}\n\n\n\n/*\n * Opinionated defaults\n */\n\n/* specify the margin and padding of all elements */\n\n* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\n/* specify the border style and width of all elements */\n\n*,\n:before,\n:after {\n\tborder-style: solid;\n\tborder-width: 0;\n}\n\n/* remove the tapping delay from clickable elements */\n\na,\narea,\nbutton,\ninput,\nlabel,\nselect,\ntextarea,\n[tabindex] {\n\t-ms-touch-action: manipulation;\n\t touch-action: manipulation;\n}\n\n/* specify the standard appearance of selects */\n\nselect {\n\t-moz-appearance: none; /* Firefox 40+ */\n\t-webkit-appearance: none /* Chrome 45+ */\n}\n\nselect::-ms-expand {\n\tdisplay: none;/* Edge 12+, Internet Explorer 11- */\n}\n\nselect::-ms-value {\n\tcolor: currentColor;/* Edge 12+, Internet Explorer 11- */\n}\n\n/* use current current as the default fill of svg elements */\n\nsvg {\n\tfill: currentColor;\n}\n\n/* specify the progress cursor of updating elements */\n\n[aria-busy=\"true\"] {\n\tcursor: progress;\n}\n\n/* specify the pointer cursor of trigger elements */\n\n[aria-controls] {\n\tcursor: pointer;\n}\n\n/* specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */\n\n[aria-disabled] {\n\tcursor: default;\n}\n\n/* specify the style of visually hidden yet accessible elements */\n\n[hidden][aria-hidden=\"false\"] {\n\tclip: rect(0 0 0 0);\n\tdisplay: inherit;\n\tposition: absolute\n}\n\n[hidden][aria-hidden=\"false\"]:focus {\n\tclip: auto;\n}\n\n\n\n/*\n * Configurable defaults\n */\n\n/* specify the background repeat of all elements */\n\n* {\n\tbackground-repeat: no-repeat;\n}\n\n/* specify the root styles of the document */\n\n:root {\n\tbackground-color: #ffffff;\n\tbox-sizing: border-box;\n\tcolor: #000000;\n\tcursor: default;\n\tfont: 100%/1.5 sans-serif;\n}\n\n/* specify the text decoration of anchors */\n\na {\n\ttext-decoration: none;\n}\n\n/* specify the alignment of media elements */\n\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n\tvertical-align: middle;\n}\n\n/* specify the coloring of form elements */\n\nbutton,\ninput,\nselect,\ntextarea {\n\tbackground-color: transparent;\n\tcolor: inherit;\n}\n\n/* specify the minimum height of form elements */\n\nbutton,\n[type=\"button\"],\n[type=\"date\"],\n[type=\"datetime\"],\n[type=\"datetime-local\"],\n[type=\"email\"],\n[type=\"month\"],\n[type=\"number\"],\n[type=\"password\"],\n[type=\"reset\"],\n[type=\"search\"],\n[type=\"submit\"],\n[type=\"tel\"],\n[type=\"text\"],\n[type=\"time\"],\n[type=\"url\"],\n[type=\"week\"],\nselect,\ntextarea {\n\tmin-height: 1.5em;\n}\n\n/* specify the font family of code elements */\n\ncode,\nkbd,\npre,\nsamp {\n\tfont-family: monospace, monospace;\n}\n\n/* specify the list style of nav lists */\n\nnav ol,\nnav ul {\n\tlist-style: none;\n}\n\n/* specify the font size of small elements */\n\nsmall {\n\tfont-size: 75%;\n}\n\n/* specify the border styling of tables */\n\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\n/* specify the resizability of textareas */\n\ntextarea {\n\tresize: vertical;\n}\n\n/* specify the background color, font color, and drop shadow of text selections */\n\n::-moz-selection {\n\tbackground-color: #b3d4fc; /* required when declaring ::selection */\n\tcolor: #ffffff;\n\ttext-shadow: none;\n}\n\n::selection {\n\tbackground-color: #b3d4fc; /* required when declaring ::selection */\n\tcolor: #ffffff;\n\ttext-shadow: none;\n}\n", ""]);
// exports
/***/ },
/* 19 */
/*!*****************************************************************************************************************************************************************!*\
!*** ./~/css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!./~/postcss-loader!./app/containers/App/styles.css ***!
\*****************************************************************************************************************************************************************/
/***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ./../../../~/css-loader/lib/css-base.js */ 5)();
// imports
// module
exports.push([module.i, "/* Global styles */\r\n\r\nhtml,\r\nbody {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n\r\nbody {\r\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n}\r\n\r\nbody.fontLoaded__app-containers-App-styles__JIg_X {\r\n font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n}\r\n\r\n#app {\r\n background-color: #FAFAFA;\r\n min-height: 100%;\r\n min-width: 100%;\r\n}\r\n\r\n.wrapper__app-containers-App-styles__3jlCh {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n display: -ms-flexbox;\r\n display: flex;\r\n min-height: 100%;\r\n padding: 0 16px;\r\n -ms-flex-direction: column;\r\n flex-direction: column;\r\n}\r\n\r\n.logoWrapper__app-containers-App-styles__27cHX {\r\n padding: 2em 0;\r\n}\r\n\r\n.logo__app-containers-App-styles__32EV1 {\r\n width: 100%;\r\n margin: 0 auto;\r\n display: block;\r\n}\r\n", "", {"version":3,"sources":["/./app/containers/App/styles.css"],"names":[],"mappings":"AAAA,mBAAmB;;AAEnB;;EAEE,aAAa;EACb,YAAY;CACb;;AAED;EACE,4DAA4D;CAC7D;;AAED;EACE,yEAAyE;CAC1E;;AAED;EACE,0BAA0B;EAC1B,iBAAiB;EACjB,gBAAgB;CACjB;;AAED;EACE,iBAAkC;EAClC,eAAe;EACf,qBAAc;EAAd,cAAc;EACd,iBAAiB;EACjB,gBAAgB;EAChB,2BAAuB;MAAvB,uBAAuB;CACxB;;AAED;EACE,eAAe;CAChB;;AAED;EACE,YAAY;EACZ,eAAe;EACf,eAAe;CAChB","file":"styles.css","sourcesContent":["/* Global styles */\r\n\r\nhtml,\r\nbody {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n\r\nbody {\r\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n}\r\n\r\nbody.fontLoaded {\r\n font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n}\r\n\r\n:global(#app) {\r\n background-color: #FAFAFA;\r\n min-height: 100%;\r\n min-width: 100%;\r\n}\r\n\r\n.wrapper {\r\n max-width: calc(768px + 16px * 2);\r\n margin: 0 auto;\r\n display: flex;\r\n min-height: 100%;\r\n padding: 0 16px;\r\n flex-direction: column;\r\n}\r\n\r\n.logoWrapper {\r\n padding: 2em 0;\r\n}\r\n\r\n.logo {\r\n width: 100%;\r\n margin: 0 auto;\r\n display: block;\r\n}\r\n"],"sourceRoot":"webpack://"}]);
// exports
exports.locals = {
"fontLoaded": "fontLoaded__app-containers-App-styles__JIg_X",
"wrapper": "wrapper__app-containers-App-styles__3jlCh",
"logoWrapper": "logoWrapper__app-containers-App-styles__27cHX",
"logo": "logo__app-containers-App-styles__32EV1"
};
/***/ },
/* 20 */
/*!*************************************!*\
!*** ./~/sanitize.css/sanitize.css ***!
\*************************************/
/***/ function(module, exports, __webpack_require__) {
// fake-style-loader: Loads css
var content = __webpack_require__(/*! !./../css-loader!./sanitize.css */ 18);
if (typeof content === "string") content = [[module.i, content, ""]];
module.exports = content.locals || {}
module.exports.source = content
/***/ },
/* 21 */
/*!***************************************!*\
!*** ./app/containers/App/styles.css ***!
\***************************************/
/***/ function(module, exports, __webpack_require__) {
// fake-style-loader: Loads css
var content = __webpack_require__(/*! !./../../../~/css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!./../../../~/postcss-loader!./styles.css */ 19);
if (typeof content === "string") content = [[module.i, content, ""]];
module.exports = content.locals || {}
module.exports.source = content
/***/ },
/* 22 */
/*!*********************************************!*\
!*** ./app/containers/App/banner-metal.jpg ***!
\*********************************************/
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "f3b26cc54fe4588671576d6b115a2a1d.jpg";
/***/ },
/* 23 */
/*!****************************!*\
!*** ./server/middlewares ***!
\****************************/
/***/ function(module, exports) {
function webpackEmptyContext(req) {
throw new Error("Cannot find module '" + req + "'.");
}
webpackEmptyContext.keys = function() { return []; };
webpackEmptyContext.resolve = webpackEmptyContext;
module.exports = webpackEmptyContext;
webpackEmptyContext.id = 23;
/***/ },
/* 24 */
/*!************************!*\
!*** external "chalk" ***!
\************************/
/***/ function(module, exports) {
module.exports = require("chalk");
/***/ },
/* 25 */
/*!*******************************!*\
!*** external "components/A" ***!
\*******************************/
/***/ function(module, exports) {
module.exports = require("components/A");
/***/ },
/* 26 */
/*!************************************!*\
!*** external "components/Footer" ***!
\************************************/
/***/ function(module, exports) {
module.exports = require("components/Footer");
/***/ },
/* 27 */
/*!*********************************!*\
!*** external "components/Img" ***!
\*********************************/
/***/ function(module, exports) {
module.exports = require("components/Img");
/***/ },
/* 28 */
/*!******************************!*\
!*** external "compression" ***!
\******************************/
/***/ function(module, exports) {
module.exports = require("compression");
/***/ },
/* 29 */
/*!*********************!*\
!*** external "ip" ***!
\*********************/
/***/ function(module, exports) {
module.exports = require("ip");
/***/ },
/* 30 */
/*!**********************************!*\
!*** external "postcss-cssnext" ***!
\**********************************/
/***/ function(module, exports) {
module.exports = require("postcss-cssnext");
/***/ },
/* 31 */
/*!********************************!*\
!*** external "postcss-focus" ***!
\********************************/
/***/ function(module, exports) {
module.exports = require("postcss-focus");
/***/ },
/* 32 */
/*!***********************************!*\
!*** external "postcss-reporter" ***!
\***********************************/
/***/ function(module, exports) {
module.exports = require("postcss-reporter");
/***/ },
/* 33 */
/*!************************!*\
!*** external "react" ***!
\************************/
/***/ function(module, exports) {
module.exports = require("react");
/***/ },
/* 34 */
/*!************************************!*\
!*** external "universal-webpack" ***!
\************************************/
/***/ function(module, exports) {
module.exports = require("universal-webpack");
/***/ },
/* 35 */
/*!*****************************************!*\
!*** external "webpack-dev-middleware" ***!
\*****************************************/
/***/ function(module, exports) {
module.exports = require("webpack-dev-middleware");
/***/ },
/* 36 */
/*!*****************************************!*\
!*** external "webpack-hot-middleware" ***!
\*****************************************/
/***/ function(module, exports) {
module.exports = require("webpack-hot-middleware");
/***/ }
/******/ ]);
//# sourceMappingURL=server.js.map
/***/ },
/* 27 */
/*!*********************************!*\
!*** external "components/Img" ***!
\*********************************/
/***/ function(module, exports) {
module.exports = require("components/Img");
Of course it throws an error.
Why are your components
marked as an external dependency?
Post your console.log(JSON.stringify(resulting_server_webpack_configuration, null, 2))
Speaking about two commands:
When I try to run node server/start-server
after separatly runnning webpack command simply nothing happens
This could be due to the DLL Plugin.
The DLL Plugin works by splitting your code into two parts: internal hot reloaded part and "external" part compiled as a DLL.
You may also want to examine your configuration.entry.vendor
array and verify that components isn't there.
That's as much as I can tell about this issue.
Thank you very much. Can you provide some sample server side webpack.configuration? As I understand, this library takes client configuration and transforms it to suitable server configuration automatically. What transforms do you apply to client webpack configuration?
this library takes client configuration and transforms it to suitable server configuration automatically.
yes
What transforms do you apply to client webpack configuration?
see the sources
https://github.com/halt-hammerzeit/universal-webpack/blob/master/source/server%20configuration.js
Can you provide some very simple webpack.config, that is analog of your code in library? I am. Net developer and I hardly understand what happens in your library. I need some simple guidness
I don't understand what you're asking
Sorry. Maybe it is my English. Can you provide some simple webpack client configuration with styles, and result configuration for server rendering (in fact, configuration object which is result of transformation of your library.) I have problem with styles on the server side. If you will see the boilerplate, author imports 'sanitize.css' in main app entry. I am always getting unexpected token error, when I try to use my own webpack.config for server. But your library seems to work. How did you achieved this?
Can you provide some simple webpack client configuration with styles, and result configuration for server rendering (in fact, configuration object which is result of transformation of your library.)
The server configuration is gonna be exactly what this code does:
https://github.com/halt-hammerzeit/universal-webpack/blob/master/source/server%20configuration.js
You can console.log()
it yourself.
I am always getting unexpected token error, when I try to use my own webpack.config for server.
Of course
But your library seems to work.
Of course it does
How did you achieved this?
See the aforementioned hyperlink
Thank you again