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/'
    }])
  ]

};

Are you using AngularJS, or a new TS based Angular? For this kind of thing you could use an Angular router to directly redirect you to the desired. [Here](https://stackoverflow.com/questions/42874859/angular-2-routing-redirect-to-with-child-routes) is a nice explanation how to do it. — mutantkeyboard, Nov 15 '17 at 08:35
I am using AngularJS (also written in TS). I will have a look at your link. — scipper, Nov 15 '17 at 08:36
Just keep in mind that routing works differently in AngularJS than Angular 2. — mutantkeyboard, Nov 15 '17 at 08:38
But isn't the redirect of the router just a redirect to another "state"? I want to redirect to another "directory". — scipper, Nov 15 '17 at 08:39
I've just noticed that you use `--open` flag ... that flag is for setting the browser. According to [documentation](https://webpack.js.org/configuration/dev-server/#devserver-openpage), you'd need something like `--openPage` switch to navigate to the other page when loading. If that's what you need. As for directories, I don't know if there's way other than serving from contentBase and publicPath. — mutantkeyboard, Nov 15 '17 at 08:48

ChrisR · Accepted Answer · 2022-04-12T17:03:02.347

36

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
},

edited Apr 12 '22 at 17:03

answered Nov 15 '17 at 08:48

ChrisR

3,922
1
14
24

1

That's it! I completely missed this option.... Thanks for reading the Docs for me ;) – scipper Nov 15 '17 at 08:52
1

Thank you so much @Chris R. You saved my like. – Manjit Oct 26 '18 at 06:32
As of webpack-dev-server (WDS) v4.8.1 you should place your openPage value in the `open` property instead (because openPage seems to be removed). – dennisbot Apr 12 '22 at 06:35

Aakash · Answer 2 · 2019-03-12T06:41:55.317

6

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...

edited Mar 12 '19 at 06:41

answered Mar 12 '19 at 06:15

Aakash

21,375
7
100
81

2

Looks like the gulpy way to solve this problem ;) but thanks for your effort. – scipper Mar 12 '19 at 19:07
@scipper, with this approach, even if you visit `http://localhost:8080/` it will `redirect` to `http://localhost:8080/app` whereas `openPage` will go to `/app` only when the `dev-server` starts. – Aakash Mar 13 '19 at 06:33
I did not say, that your approach does not work. It‘s just a too programmatic way of solving this issue, where a neat config parameter solves it as well. – scipper Mar 13 '19 at 07:16
Agreed it is a little `programmatic` and moreover `before` is for `redirecting` always and not just on `dev-server start` as you have asked in your question. – Aakash Mar 13 '19 at 08:34

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

2 Answers2

You can also try the `before` option:

Linked

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

2 Answers2

You can also try the before option:

Linked

You can also try the `before` option: