webpack-dev-server --open to a specific path?

Question

how do I motivate webpack-dev-server, when started with the --open flag, to open my publicPath?

Currently it opens up a browser tab to http://localhost:3000, but I want it to directly open http://localhost:3000/app, which is my defined public path.

When I manually type http://localhost:3000/app after start up of webpack-dev-server, it works as expected.

Here is my webpack.config.js which works great so far:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = {

  entry: {
    vendor: [
      'jquery',
      'angular'
    ],
    app: './src/app/index.module.js',
    libs: [
      './src/libs/pagination/dirPagination.js',
      './src/libs/sc-date-time/sc-date-time.js',
      './src/libs/msd-elastic.js',
      './src/libs/ng-textcomplete.js',
      './src/libs/highcharts/highslide-full.js',
      './src/libs/highcharts/Sankey.js'
    ]
  },

  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/app/'
  },

  devtool: 'inline-source-map',

  devServer: {
    contentBase: './dist',
    host: 'localhost',
    port: '3000',
    inline: true,
    compress: true,
    proxy: {
      '/api/**': {
        target: 'http://10.189.1.159:8080',
        secure: false,
        changeOrigin: true,
        cookieDomainRewrite: true
      }
    }
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      angular: path.resolve(__dirname, 'node_modules/angular/index.js')
    }
  },

  module: {

    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader']
      })
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {loader: 'css-loader', options: {sourceMap: true}},
          {loader: 'postcss-loader', options: {sourceMap: true}},
          {loader: 'sass-loader', options: {sourceMap: true}}
        ]
      })
    }, {
      test: /\.ts|\.js?$/,
      exclude: /node_modules/,
      loader: 'ts-loader'
    }, {
      test: /\.html$/,
      use: [
        {loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, 'src/app'))},
        {loader: 'html-loader'}
      ],
      exclude: path.resolve(__dirname, 'src/index.html')
    }, {
      test: /\.(jpe?g|gif|png|svg)$/,
      use: [
        {loader: 'file-loader?relativeTo=' + (path.resolve(__dirname, 'src/assets'))}
      ]
    }, {
      test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/'
        }
      }]
    }, {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      }, {
        loader: 'expose-loader',
        options: '$'
      }]
    }, {
      test: require.resolve('angular'),
      use: [{
        loader: 'expose-loader',
        options: 'angular'
      }]
    }]

  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin('styles.css'),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['manifest', 'vendor', 'app', 'libs']
    new CopyWebpackPlugin([{
      context: './src/assets/locales',
      from: '**/*',
      to: './assets/locales/'
    }])
  ]

};

Answer 1

v4

Use devServer.open:

npx webpack serve --open /app

or

module.exports = {
  // ...
  devServer: {
    open: ['/app'],
   // ...
  },
}

v3

Use devServer.openPage.

In your case the value would be /app.

You can also rewrite a bit of your config so you don't have to pass cli commands.

output: {
    publicPath: '/app', // deploy on server with /app/ folder name
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'public')
},

devServer: {
    contentBase: './dist',
    host: 'localhost',
    port: '3000',
    inline: true,
    compress: true,
    proxy: {
      '/api/**': {
        target: 'http://10.189.1.159:8080',
        secure: false,
        changeOrigin: true,
        cookieDomainRewrite: true
      }
    }
    open: true, // Here
    openPage: '/app' // And here
},

Answer 2

You can also try the before option:

module.exports = {
  //...
  devServer: {
    before: function(app, server) {
      app.get('/', function(req, res) {
        res.redirect('/app'); // here you can try any of the Express JS res options mentioned in the answer below: 
      });
    }
  }
};

Documentation for Express.js response

Good Luck...