Vite configuration using minimal hosting model
d

Dan

about 1 year ago
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?
Reusable blocks / global blocks
b

Bjarne Fyrstenborg

about 1 year ago
Currently Umbraco doesn't have the concept of resusable blocks / global blocks (yet). For now I just added a archive of content nodes, where each has a Block List to select 3 different blocks (text, image and accordion for now) to configure as global content. In the Block Grid there a reusable block to select of of these content nodes. However since the model if different, I can't directly pass the model into existing Block Grid block view. This works, but is there a simpler/better way to do this?
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<BlockReusableContent>>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Cms.Core
@using Umbraco.Cms.Core.Models.Blocks
@{
    var content = Model.Content;

    var data = content.Block as ReusableContent;

    if (data == null || !data.Block.HasAny())
        return;
}

@foreach (var block in data.Block)
{
    if (block?.ContentUdi == null) { continue; }

    var item = block.Content;

    var contentUdi = Udi.Create(Constants.UdiEntityType.Element, item.ContentType.Key);

    if (item is BlockImage image)
    {
        @await Html.PartialAsync("blockgrid/components/" + item.ContentType.Alias, new BlockGridItem<BlockImage>(contentUdi, image, null, null))
    }
    else if (item is BlockText text)
    {
        @await Html.PartialAsync("blockgrid/components/" + item.ContentType.Alias, new BlockGridItem<BlockText>(contentUdi, text, null, null))
    }
    else if (item is BlockAccordion accordion)
    {
        @await Html.PartialAsync("blockgrid/components/" + item.ContentType.Alias, new BlockGridItem<BlockAccordion>(contentUdi, accordion, null, null))
    }
}