Hi, I'm using Vite to handle the front-end assets on a new site, and using Vite.AspNetCore for the middleware. This set-up works on a v13 project which was upgraded from v12 using both Startup.cs and Program.cs files, but doesn't on a brand new v13 project using the minimal hosting model. The Program.cs on the new site is:

using Vite.AspNetCore;
using Vite.AspNetCore.Extensions;

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

builder.CreateUmbracoBuilder()
    .AddBackOffice()
    .AddWebsite()
    .AddDeliveryApi()
    .AddComposers()
    .Build();

builder.Services.AddViteServices(new ViteOptions()
{
    Server = new ViteServerOptions
    {
        Port = 5173,
        Https = true,
    }
});

WebApplication app = builder.Build();

await app.BootUmbracoAsync();

app.UseHttpsRedirection();

app.UseUmbraco()
    .WithMiddleware(u =>
    {
        u.UseBackOffice();
        u.UseWebsite();
    })
    .WithEndpoints(u =>
    {
        u.UseInstallerEndpoints();
        u.UseBackOfficeEndpoints();
        u.UseWebsiteEndpoints();
    });

if (app.Environment.IsDevelopment())
{
    app.UseViteDevelopmentServer();
}

await app.RunAsync();

Everything else is pretty much the same (similar`package.json`, identical

vite.config.js

, same folder structure, same reserved paths [including

~/@vite/,~/@id/

] in

appsettings.Development.json

etc). The assets are output from Master.cshtml file like this:

<environment include="Development">
    <script type="module" defer src="~/@@vite/client"></script> <!-- Load Vite -->
    <script type="module" defer src="~/scripts/main.js"></script> <!-- Define the entry point -->
</environment>

However, when running the new site both

/@vite/client

and

/scripts/main.js

are throwing 404s. The middleware configuration (above) looks okay AFAIK and all else is very similar so I'm struggling to understand why one works and the other doesn't. Could anyone suggest what might be awry here?

Hey Dan! Have you tried moving

app.UseViteDevelopmentServer()

to before

app.UseUmbraco

? Not sure if that would make a difference though. You might need to enable static files

app.UseStaticFiles();

maybe? That one if a bit problematic though (see https://github.com/umbraco/Umbraco-CMS/issues/12666) - but try if that's needed first and then you can work on exclusions for it as described in the issue.

Thanks Seb. Moving

app.UseViteDevelopmentServer()

to before

app.UseUmbraco

doesn't seem to fix it, and I'm aware of this https://github.com/Eptagone/Vite.AspNetCore/issues/37#issuecomment-1637403136 which suggests that it needs to be after. I'll take a look at

app.UseStaticFiles()

but am curious as to why that would be needed since the other working project doesn't modify that in Startup.cs. I'll have a play anyway, thanks for your input 🙂

It's working for me, only difference I have is:

UseViteDevelopmentServer(true);

to enable the middleware. Also, I have

options.Server.AutoRun = true;

to avoid having to run the npm command separately.

Ah, looks like it was as simple as the missing

true

in

UseViteDevelopmentServer()

! I think what's happened is that previously I'd initially used

app.UseViteDevMiddleware();

which defaulted to

true

but swapped that out for

UseViteDevelopmentServer()

as it's deprecated. Works nicely now, thank you, sir! 🙂

Nice one! I have absolutely no idea about any of this stuff, but I thought I'd try to mislead give you some inspiration.

Me neither, Seb 😂

If you think it would be helpful, I was wondering about updating my Skrift article (https://skrift.io/issues/vite-and-umbraco-for-faster-frontend-builds/) to use Vite.AspNetCore. I hear a rumour @Sebastiaan that umbracalendar.com might be getting a bit of Vite magic soon.

@Jason I've looked at your blog post which uses the UseProxyToSpaDevelopmentServer feature from the SpaServices.Extensions package. Which we are currently using in our project. The UseViteDevelopmentServer feature/middleware seems to be from the "Vite.AspNetCore" package, right? So what would be the preffered package when using vite? The autorun option sounds really nice. Im an not a vitejs expert but as a backend developer i always forget to run NPM haha.

Yeah, that's right and I'd say Vite.AspNetCore is the way to go now. It's a slightly more robust/less hacky approach and comes with some other nice features to reduce boilerplate like the helpers and manifest support. Auto running npm is nice too, the only quirk is that it drops the node console output into the same place as .NET, which can get confusing at times.

Thanks for the answer, really appreciated! This weekend I will see if we can easily switch packages but it doesnt look too complicated. 👍

That'd be cool, definitely. There's also some stuff around the SSL certificate that can be streamlined using

vite-plugin-mkcert

rather than having the custom

/certs.js

if you've gone in that direction (happy to share if not and you'd find it useful?).