• Introduction
• Development
• Changing the Port
• Configuring SSL
• Configuring Basename
• Building
• Development
• Production
• Analyzing
• Stats
• Features
• Cache Busting
• Chunking
• CSS Preprocessors
• Favicon
• Fonts
• Images
• Source Maps
• Misc
• Verify Production Build Locally

Configure Basename

Webpack is configured to serve the application from the root domain as the default, meaning that if you're application is hosted on https://app.example.com, then the default assumes the application will be served from https://app.example.com.

That's what happens when you start the application using this command:

npm start

If you need to serve the application from nested URL, like https://www.example.com/application/, then you'll need to specify a basename in order for Webpack to generate the correct URLs for your assets.

To do that, start the application using this command, where basename is the URL path you want the application to be served from:

npm start --
  --env.basename=/application

The command above would cause the development server to be served on port 3001 instead.

Relevant Section

This section of the Webpack config that controls this behavior is shown below:

var BASENAME = env.basename || '';
...
plugins: [
  new webpack.DefinePlugin({
    __BASENAME__: JSON.stringify(BASENAME),
  }),
  new HtmlWebpackPlugin({
    publicPath: `${BASENAME}/`
  }),
],
...
devServer: {
  historyApiFallback: {
    index: `${BASENAME}/index.html`,
  }
}