Help needed with WebPack and IIS Virtual Directories

1

Hi.

I’m trying to publish a small Aurelia 1 application to a folder referenced by an IIS Virtual Directory.
E.g. the physical path might be something like d:\websites\settlements.dashboard and the Virtual Directory might be called /dashboard. In my webpack.config.js-file I’ve set the baseUrl to /dashboard and also assigned the baseUrl to the publicPath like so

  output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
  },

At the /src level of my application I have a nav-bar “component” which refers to a png image in the /static directory which is located at the same level as /src. Under /src I’ve got a directory called /modules and here we find two “components” of interest:

  • a header “component” refering to an svg-file in the /static directory like so: <img src="../../static/brand-bar-logo.svg" alt="brand bar logo">
  • a status"component" refering to a Bootstrap icon like so: <i class="${iconClass}" style="font-size: 2.5rem; color: white;"></i>

The iconClass variable/property is set like so:

  variantChanged(newVariant: StatusVariant) {
    console.log(newVariant);
    this.iconClass = this.getIconClass(newVariant);
    this.styleString = this.getStyleString(newVariant);
  }

  private getIconClass(variant: StatusVariant) : string {
    if (variant === 'success')
      return ' bi bi-check-circle';
    if (variant === 'error')
      return ' bi bi-x-circle';
    if (variant === 'warning')
      return ' bi bi-exclamation-triangle';
    if (variant == 'unknown')
      return 'bi bi-question-circle';
  }

Copying files was initially done like so:

...when(!tests, new CopyWebpackPlugin([
      { from: 'static', to: outDir, ignore: ['.*'] }])),

and later it was changed to:

...when(!tests, new CopyWebpackPlugin([
      { from: 'static', to: outDir + '/static', ignore: ['.*'] }])),

The problem I have (finally he got around to that :wink: ) is that the svg-file and the woff/woff2 files aren’t found, i.e. produces a 404 error. This is what Chrome reports:

bilde
bilde989×67 5.6 KB

and:
bilde
bilde960×44 3.16 KB

I’m completely at loss as how to set up webpack correctly so that all files are found and I hope someone here might be able to help. Btw, the png-image mentioned above is displayed as expected

TIA

–norgie

2

The issue was solved by adding a rewite rule to IIS like so

<configuration>
	<system.webServer>
		<rewrite>
			<rules>
				<rule name="Add trailing slash for dashboard" stopProcessing="true">
					<match url="^dashboard$" />
					<action type="Redirect" url="dashboard/" />
				</rule>
			</rules>
		</rewrite>
	</system.webServer>
</configuration>

and adding a trailing '/' to the publicPath property in webpack.config.js

1 Like