# Aurelia + ASP.NET Core 3 + HtmlWebpackPlugin

**URL:** <https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731>\
**Category:** Framework Knowledge\
**Created:** [July 9, 2019, 8:33pm UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731 "2019-07-09T20:33:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexdresko](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexdresko/32/144_2.png) [@alexdresko](https://discourse.aurelia.io/u/alexdresko)\
**Post date:** [July 9, 2019, 8:33pm UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731/1 "2019-07-09T20:33:23Z")

</div>

I know there are other solutions to working with Aurelia + [ASP.NET](http://ASP.NET) Core + HtmlWebpackPlugin, but I had a slightly different requirement – I wanted to use HtmlWebpackPlugin AND Razor (.cshtml) files at the same time.

I ended up writing [this blog post](https://www.alexdresko.com/2019/07/09/htmlwebpackplugin-asp-net-core-3/) to explain the gist, and then applied my findings to my Aurelia project.

And since I’m fully using HtmlWebpackPugin, the `webpack.netcore.config.js` file is no longer required.

I feel like the end result is better and more simple.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 10, 2019, 11:08am UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731/2 "2019-07-10T11:08:11Z")

</div>

@alexdresko man it’s awesome 😄

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [July 11, 2019, 12:20am UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731/3 "2019-07-11T00:20:27Z")

</div>

A few notes:

- disable minification of cshtml (`minify: false`) otherwise you’ll have a surprise in production 🙂
- I ended up not using `RuntimeCompilation` at all - you don’t need it while developing - VS will rebuild the project. For the production workflow I’m using a TeamCity build step which runs webpack BEFORE the core project is built. This way Index.cshtml is correct for the msbuild to pick it.
- there is no much value in using `UseWebpackDevMiddleware`, even worse - every change in controllers will trigger a webpack task. You’re going to suffer on bigger projects 🙂 Instead run a webpack watch task in background while developing. Yes, you loose HMR, but it’s a minor inconvenience.

Check out [https://github.com/MaximBalaganskiy/AureliaDotnetTemplate](https://github.com/MaximBalaganskiy/AureliaDotnetTemplate), with minimal change it can serve index from a Razor page.

---

<div class="post-metadata">

**Author:** ![alexdresko](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexdresko/32/144_2.png) [@alexdresko](https://discourse.aurelia.io/u/alexdresko)\
**Post date:** [July 11, 2019, 3:14pm UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731/4 "2019-07-11T15:14:33Z")

</div>

> disable minification of cshtml ( `minify: false` ) otherwise you’ll have a surprise in production 🙂

I forgot to commit the minify fix. Definitely got caught by that one. 🙂

> I ended up not using `RuntimeCompilation` at all - you don’t need it while developing - VS will rebuild the project.

I’m sorry, but I don’t quite understand that statement.

> For the production workflow I’m using a TeamCity build step which runs webpack BEFORE the core project is built. This way Index.cshtml is correct for the msbuild to pick it.

But what about at dev time? I feel like I’m not understanding something in your process (I haven’t studied your templates in depth).

What I like is the ability to use F5 to build the application, launch the web server, and still gives us HMR… all with a single key stroke. I understand the trade off is that “every change in controllers will trigger a webpack task”, but it seems like a simplified setup and dev experience compared to what you’re suggesting. Also, it seems like we’re usually either working on the front end OR the back end… it’s not often that we’re working on both at the same time. Also, HMR is pretty important for us. And don’t forget [DllPlugin | webpack](https://webpack.js.org/plugins/dll-plugin/) can be used to greatly increase the webpack compilation speed.

Let’s keep this conversation going if you don’t mind. I want to understand your perspective and definitely want to use the best setup for our needs.

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [July 11, 2019, 11:27pm UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731/5 "2019-07-11T23:27:45Z")

</div>

I don’t really get what problem `RuntimeCompilation` solves. During production `Index.cshtml` is compiled with the correct links and does not change. During dev you get Razor recompiled by default.

My UI and Api are usually developed in parallel which is why webpack recompilation at every build is extremely annoying and slow. Moreover, I’ve found that HMR does not work when form validation is involved - weird crashes in console log which I did not have desire to chase. So, my dev workflow now is to start `webpack --mode development --watch` in a console via `npm`. If I change anything in Api the build is super fast. If I change anything in UI browser refresh pulls the latest.

I used to use `dll-plugin` as well but removed it because, as I mentioned before, HMR does not work anyway with validation, plus it creates an additional complexity in webpack configuration.

On a side note, you should also disable caching on an index page, otherwise clients will keep getting the old code after an upgrade.

---

<div class="post-metadata">

**Author:** ![constructor](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/constructor/32/710_2.png) [@constructor](https://discourse.aurelia.io/u/constructor)\
**Post date:** [July 11, 2019, 11:37pm UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731/6 "2019-07-11T23:37:56Z")

</div>

This is precisely the approach I took with one of the Visual Studio extension templates a few months ago. Regeneration of the hashed .js file references via the .ejs template ensures the correct updated files are loaded.

---

<div class="post-metadata">

**Author:** ![veikkoeeva](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/veikkoeeva/32/529_2.png) [@veikkoeeva](https://discourse.aurelia.io/u/veikkoeeva)\
**Post date:** [July 20, 2019, 6:13pm UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731/7 "2019-07-20T18:13:39Z")

</div>

Might be interesting to people reading this, [Razor Live Reload](https://weblog.west-wind.com/posts/2019/Jun/03/Building-Live-Reload-Middleware-for-ASPNET-Core). One approach not mentioned here is described at [Aurelia and ASP.NET Core](https://www.codeproject.com/Articles/1241072/Aurelia-and-NET-Core). If the aim is on PWA, maybe there’s Razor only for “index.html”.

One interesting approach could be to combine Razor Live Reload with NodeServices fairly directly and do what the Webpack hooks do and perhaps something else as appropriate. One example: [https://ml-software.ch/posts/calling-javascript-inside-an-asp-net-core-application](https://ml-software.ch/posts/calling-javascript-inside-an-asp-net-core-application) (looking quickly, one may need to set up MSBuild to copy something from `node_modules` to the publish dir).

Also one problem might be setting up differential loading or something alike and then have a template to pick up the different scripts. Razor is one way of enumerating JS files and pick them up, especially with live reload.

\<Edit: This is on a tangential already, but I was just reading an example of applying CSRF tokens at [https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-2.2](https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-2.2) and how one can do it so that Angular picks them up automatically. I wonder how Aurelia works here, or should work…? 😛

---

<div class="post-metadata">

**Author:** ![constructor](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/constructor/32/710_2.png) [@constructor](https://discourse.aurelia.io/u/constructor)\
**Post date:** [July 22, 2019, 7:07pm UTC](https://discourse.aurelia.io/t/aurelia-asp-net-core-3-htmlwebpackplugin/2731/8 "2019-07-22T19:07:29Z")

</div>

There is also this which I posted a while back:

> [@Aurelia CLI - Visual Studio 2017/2019 Tools](https://discourse.aurelia.io/t/aurelia-cli-visual-studio-2017-2019-tools/2274/6):
>
> Here is a way to get auto-refresh of all changes (including .html, .css and Aurelia) in Visual Studio 2017 using the inbuilt [BrowserLink](https://www.nuget.org/packages/Microsoft.VisualStudio.Web.BrowserLink/) and [MadsKristensen’s ‘BrowserReloadonSave’](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BrowserReloadonSave). The only change you need to make is to add the following to the Startup.cs : if (env.IsDevelopment()) { ... app.UseBrowserLink(); } I have just tested it and it seems to work perfectly so far. With this in mind, I do no think it requires anything in the templates, …
