Aurelia + ASP.NET Core 3 + HtmlWebpackPlugin

Framework Knowledge
1

I know there are other solutions to working with Aurelia + 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 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.

5 Likes
2

@alexdresko man it’s awesome :smile:

3

A few notes:

  • disable minification of cshtml (minify: false) otherwise you’ll have a surprise in production :slight_smile:
  • 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 :slight_smile: 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, with minimal change it can serve index from a Razor page.

2 Likes
4

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

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

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

2 Likes
5

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.

2 Likes
6

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.

1 Like
7

Might be interesting to people reading this, Razor Live Reload. One approach not mentioned here is described at Aurelia and ASP.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 (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 and how one can do it so that Angular picks them up automatically. I wonder how Aurelia works here, or should work…? :stuck_out_tongue:

1 Like
8

There is also this which I posted a while back:

2 Likes