Web-socket poxy settings

[JohannesSanders]

• Operating System: OS X 10.12.6
• Node Version: v8.4.0
• NPM Version: 5.3.0
• webpack Version: 3.6.0
• webpack-dev-server Version: 2.8.2

• This is a bug
• This is a feature request
• This is a modification request

Code

 /* eslint-disable max-len */
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const DashboardPlugin = require('webpack-dashboard/plugin');

const __PWA_ENV__ = process.env.PWA_ENV;
const __PWA_PUBLIC_PATH__ = process.env.PWA_PUBLIC_PATH;
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  cache: !isProd,

  entry: {
    main: './client/index.js',
    vendor: ['./client/vendor/js/index.js', './client/vendor/css/index.css'],
  },

  output: {
    path: path.resolve('./build/client'),
    publicPath: 'http://localhost/static/',
    filename: isProd ? 'js/[name].[chunkhash:8].js' : 'js/[name].js',
    chunkFilename: isProd ? 'js/[name].[chunkhash:8].js' : 'js/[name].js',
  },

  resolve: {
    modules: [path.resolve('./client'), 'node_modules'],
    alias: {
      config: path.resolve('./config'),
      react: 'preact-compat',
      'react-dom': 'preact-compat',
    },
  },

  module: {
    rules: isProd ? [
      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
      { test: /\.css$/, loader: ExtractCssChunks.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'] }) },
      { test: /\.(gif|png|jpe?g|svg|ico)$/i, use: [{ loader: 'file-loader', options: { name: 'images/[name].[hash:8].[ext]' } }] },
      { test: /\.(woff(2)?|ttf|otf|eot)(\?[a-z0-9=&.]+)?$/, use: [{ loader: 'url-loader', options: { limit: 1000, name: 'fonts/[name].[hash:8].[ext]' } }] },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },
    ] : [
      { test: /\.js$/, exclude: /node_modules/, use: [{ loader: 'babel-loader', options: { cacheDirectory: 'babel_cache' } }] },
      { test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'] },
      { test: /\.(gif|png|jpe?g|svg|ico)$/i, use: [{ loader: 'file-loader', options: { name: 'images/[name].[ext]' } }] },
      { test: /\.(woff(2)?|ttf|otf|eot)(\?[a-z0-9=&.]+)?$/, use: [{ loader: 'url-loader', options: { limit: 1000, name: 'fonts/[name].[ext]' } }] },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },
    ],
  },

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new CleanWebpackPlugin(['./build/client']),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': isProd ? '"production"' : '"development"',
      __BROWSER__: true,
      __PWA_ENV__: JSON.stringify(__PWA_ENV__),
      __LOCAL__: __PWA_ENV__ === 'local',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'webpackManifest'],
      minChunks: Infinity,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'main',
      children: true,
      minChunks: 2,
    }),
    new AssetsPlugin({
      filename: 'assetsManifest.json',
      path: path.resolve('./build/client'),
      prettyPrint: true,
    }),
    ...(isProd ? [
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
      }),
      new webpack.HashedModuleIdsPlugin(),
      new webpack.optimize.ModuleConcatenationPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          screw_ie8: true,
          warnings: false,
        },
        mangle: {
          screw_ie8: true,
        },
        output: {
          comments: false,
          screw_ie8: true,
        },
      }),
      new ExtractCssChunks('css/[name].[contenthash:8].css'),
      new CopyWebpackPlugin([
        { from: './client/manifest.json' },
        { from: './client/offline', to: 'offline/[name].1a2b3c4d.[ext]' },
      ], { copyUnmodified: true }),
      new SWPrecacheWebpackPlugin({
        cacheId: 'pwa',
        filename: 'serviceWorker.js',
        staticFileGlobsIgnorePatterns: [/\.map$/, /\.json$/],
        importScripts: ['offline/offline.1a2b3c4d.js'],
        dontCacheBustUrlsMatching: /./,
        minify: true,
      }),
      new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: false,
        reportFilename: 'bundle-analysis.html',
      }),
    ] : [
      new webpack.NamedModulesPlugin(),
      new DashboardPlugin(),
    ]),
  ],

  devtool: isProd ? 'hidden-source-map' : 'inline-source-map',

  devServer: {
    contentBase: path.resolve('./build/client'),
    headers: { 'Access-Control-Allow-Origin': '*' },
    publicPath: 'http://localhost/static',
    overlay: true,
    quiet: false,
    hot: false,
  },
};

const socketUrl = url.format({
  protocol: protocol,
  auth: urlParts.auth,
  hostname: hostname,
  port: 80,
  pathname: urlParts.path == null || urlParts.path === '/' ? '/static/sockjs-node' : urlParts.path
});

Expected Behavior

I'm looking for a way to change the public path of the socket. By default the hot reloading assets come out at http://localhost:8080/sockjs-node/*. But I have a proxy for these assets and for me everything is hosted on http://localhost/webpackdevserver/sockjs-node/*. But internally on my server this proxy is mapping http://localhost/webpackdevserver/sockjs-node/* to http://localhost:8080/sockjs-node/. So the server is working as expected but I'm having problem in decoupling the setting where the webpack-dev-server is hosting and at which url it should look for these assets.

Actual Behavior

Only when I change the code in in client/index.jsline 193-199 to the the second snippet I can get everything to work. I found no way of alternatively changing these settings. Could we maybe use different settings for setting the socketUrl in the config?

[shellscape]

@JohannesSanders thanks for stopping in. it looks like you might be new here; searching the issues is always a great place to start, and we recommend using multiple different terms if nothing comes up pertaining to your issue. If all else fails, use the search input at the top of the page, set to "This repository" and you'll get results that covers code, pull requests, and issues.

However in this case you're looking for the same result as #1021. please read that conversation and you'll find that pending changes aim to do exactly what you're seeking to do. PR #911 was meant to solve that, but because of issues laid out in #1021, it had to be rolled back.

We're going to close this one in favor of the aforementioned issue, so please contribute any additional discussion you'd like to, on that other issue.