I’ve been writing demos for Vue, Angular, and React for my SignalR micro-courses over on my Wilder Minds site. For Angular and React, I started out with the the SPA templates, but I found them confusing and hard to do a minimal example.

I tend to suffer from “You Moved My Cheese” and wondered if I was throwing the baby out with the bathwater. Let me talk about my experiences creating projects with and without the templates.

Why I’ve Avoided It

My initial problem with the templates is that they are using node under the covers to handle the build of the project. I hate that these details are hidden from me, but I’m confortable with having a console window to keep a watch on my webpack-based projects (the Vue CLI, Angular CLI and React CLI all wrap webpack).

It’s interesting tech and it keeps the SPA workings pretty well hidden and part of the project’s runtime. In fact, one great benefit of this is that it supports Server-side Rendering. I am sure there is a good reason to use Server-side Rendering (I’ve been told SEO is a big reason). But it feels like overkill.

I also don’t love how the resulting code isn’t outputted to wwwroot. I want all my code to be in the same place and easy to find and link to. Because the middleware is using staticfiles to look at a different directory, finding the right URL seems to confuse Visual Studio.

Lastly, I don’t always use these kinds of SPAs in ASP.NET Core, as I use node and ASP.NET (not core) in some places, I still need to learn the bits that they are hiding from me. So it’s also a skill learning piece to me.

What I Do Instead

So how do I handle it? As you might have seen from earlier posts, I like to build my SPAs in subdirectories of the project (much like the templates do) and use npm as my build system to run the CLI’s to package my projects. This method works well for Angular and React as well.

One place where I divert, is that I’m using the configuration to make the client code build into wwwroot so that all my client-side requirements are in one place. All CLIs support this (in different ways). So it’s pretty easy to accomplish.

Correct Me If I’m Wrong

Am I missing something? If so, please let me know in the comments and let’s have a civil discussion of it.