Webpack - how to test production on my machine - node.js

Question

I have 2 webpack config files one for development and one for production.
I would like to test the production config file on my local machine - how do I do that?
In other words I would like to run https://localhost:3000 and see my app while it is in production mode.
The script to run the production config file is npm run build which create files in dist directory - how do I serve those files?
webpack.config.prod.js
// For info about this file refer to webpack and webpack-hot-middleware documentation
// For info on how we're generating bundles with hashed filenames for cache busting: https://medium.com/#okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.w99i89nsz
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
process.env.NODE_ENV = 'production';
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('production'),
'process.env.BABEL_ENV': JSON.stringify('production'),
'process.env.PORT': 3000,
__DEV__: false
};
module.exports = {
resolve: {
extensions: ['*', '.js', '.jsx', '.json']
},
devtool: "eval", // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
entry: path.resolve(__dirname, 'public/index'),
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './',
filename: '[name].[chunkhash].js'
},
stats: {
children: false,
},
plugins: [
// Hash the files using MD5 so that their names change when the content changes.
new WebpackChunkHash({algorithm: 'md5'}), // 'md5' is default value
// Tells React to build in prod mode. https://facebook.github.io/react/downloads.html
new webpack.DefinePlugin(GLOBALS),
// Generate HTML file that contains references to generated bundles. See here for how this works: https://github.com/ampedandwired/html-webpack-plugin#basic-usage
new HtmlWebpackPlugin({
template: 'public/index.ejs',
favicon: 'public/styles/images/icon.png',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
inject: true,
// Note that you can add custom options here if you need to handle other custom logic in index.html
// To track JavaScript errors via TrackJS, sign up for a free trial at TrackJS.com and enter your token below.
trackJSToken: ''
}),
// Generate an external css file with a hash in the filename
new ExtractTextPlugin('[name].[contenthash].css'),
// https://github.com/numical/script-ext-html-webpack-plugin
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async'
}),
// Minify JS
new UglifyJsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: isVendor
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.eot(\?v=\d+.\d+.\d+)?$/,
use: ['url-loader']
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff'
}
}
]
},
{
test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream'
}
}
]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml'
}
}
]
},
{
test: /\.(jpe?g|png|gif|ico)$/i,
use: ['file-loader']
},
{
test: /(\.css|\.scss|\.sass)$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
minimize: true,
modules: true,
importLoaders: 1,
localIdentName: '[name]-[local]-[hash:base64:2]',
sourceMap: true
}
}, {
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')
],
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, 'src/scss'),
path.resolve(__dirname, "node_modules/foundation-sites/scss")
],
sourceMap: true
}
}
]
})
},
]
}
};
function isVendor({resource}) {
return (
resource && resource.indexOf("node_modules") >= 0 && resource.match(/\.js$/)
);
}
server.js
// server.js
// set up ============================================
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const expressValidator = require('express-validator');
const mongoose = require('mongoose');
const config = require('./config');
const enforce = require("express-sslify");
const compression = require('compression');
// Connect to mongoose
mongoose.Promise = global.Promise;
mongoose.connect(config.dbUrl, { useMongoClient: true});
// Init App
const app = express();
// Compress all responses
app.use(compression());
// redirect http requests to https
if (process.env.NODE_ENV === 'production')
app.use(enforce.HTTPS({ trustProtoHeader: true }));
// Support webpack-dev-server
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:5000");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");
res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
next();
});
// Body Parser Middleware
// parse application/json
app.use(bodyParser.json());
app.use(expressValidator());
// parse application/x-www-form-urlencoded
// for easier testing with Postman or plain HTML forms
app.use(bodyParser.urlencoded({
extended:true
}));
// Cookie Parser Middleware
app.use(cookieParser());
// Set Static Folder
app.use(express.static('public/*.html'));
app.use(express.static('dist'));
// Set Controllers
app.use('/', require('./controllers'));
//------------------------------------------------------------------//
// Set Port
app.set('port', process.env.PORT || 3000);
app.get('*', (req, res) => {
res.sendFile(`${__dirname}/dist/index.html`);
});
// Launch
app.listen(app.get('port'), () => {
console.log('Meeba started listening on port ' + app.get('port'));
});
module.exports = app;

Answer 1

Have you tried adding node path/to/server.js on your config for build.
i.e webpack -mode production ..etc && node server.js. Running the server script with node cli. On your server.js script, you already assigned dist folder as static content afterall.

Answer 2

You could use any webserver (e.g. NGINX) to serve your dist folder.
Have a look at Serving Static Content.
You can get NGINX running with Docker. It can get even easier with this predefined Docker image to serve SPAs in NGINX.