I wanted to get an Aurelia app to run from a subpath off the root of an MVC app, I started from the repo I created which is linked in my previous post. This proved to be a bit more difficult than I originally anticipated due to encountering a number of issues (or limitations depending on your point of view) along the way with both webpack and the .NET Core Spa middleware.
Deep Dive
To get this to work I first had to take a deep dive into both the SPA Middleware and webpack. I am fairly new to webpack having previously used Gulp/RequireJS/SystemJS.
Spa Middleware
The docs for the style SpaProxy based SPA templates dont contain much detail about how they actually work: https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio
Diving into the source code revealed a few surprises which have been summed up in the issue that I logged here:
"Consider a restructure of the Spa middleware" https://github.com/aspnet/JavaScriptServices/issues/1783
Webpack
While attempting to configure webpack to build the Aurelia app to run under a subpath and also run the app from the dev server under the same subpath I encountered some issues.
The one of the issues seems to be a case of a plugin not handling the concatenation of url paths correctly in relation to trailing slashes or lack of trailing slashes etc. I found and commented on this issue: https://github.com/webpack-contrib/file-loader/issues/286
Another issue is related to the dev server and the inability to configure the websocket server to listen from a subpath off the root of the dev server. It seems that issue is close to being resolved in this pull request after much discussion and one failed attempt: https://github.com/webpack/webpack-dev-server/pull/1553
It took a fair bit of issue walking to discover that pull request, here is a list of all the issues I found relating to this:
These 2 issues sum it up nicely:
https://github.com/RedHatInsights/insights-frontend-starter-app/pull/11
https://github.com/webpack/webpack-dev-server/issues/1165
the final fix hopefully in this pull request...
https://github.com/webpack/webpack-dev-server/pull/1553
this one was closed in favour of the above
https://github.com/webpack/webpack-dev-server/pull/1289
superseded by the above PR
https://github.com/webpack/webpack-dev-server/issues/1021
rolled back and closed in favour of the above
https://github.com/webpack/webpack-dev-server/pull/911
a resolution to the original issue was implemented in the above but was rolled back due to bugs
https://github.com/webpack/webpack-dev-server/issues/909
Did I get it working in the end?
While I did get it to work, the solution was not as clean as I wanted due to the issues described above. I had to use a workaround to get HMR to work because of the dev server issue. My next post will detail the solution and link to the demo repo I created.