Try our conversational search powered by Generative AI!

Mark Stott
Sep 23, 2022
  2461
(3 votes)

404 Error on Static Assets Within an Optimizely plugin

Background

With the move to CMS 12 and .NET 5/6, developers are now able to build Plugins and Extensions using Razor Class Libraries (RCL).  These are a fantastic option as it allows you to bundle up any client side scripts, styles and razor files into the same compiled dll as your buisness logic.  The structure of the Razor files and static files within an RCL is the same structure as what you would expect to see within a Web project.

The biggest benefit is that it makes it very clean to install and remove said plugin as it does not require any zip files to be deployed into a modules folder and really compartmentalizes your plugin.  To date I have built two different plugins which utilize Razor Class Libraries:

The Problem

I was contacted by Praveen Soni on the Optimizely Community slack about an issue they were encountering.  In development the Stott.Optimizely.RobotsHandler module was working as anticipated, however when it deployed into DXP they were receiving a 404 error on the following file: 

https://example.dxcloud.episerver.net/_content/Stott.Optimizely.RobotsHandler/RobotsAdmin.js  

Praveen and I chatted some more, we talked about the requirements within the startup.cs file, I got them to share their error logs in hopes of trying to understand why this javascript file from the Razor Class Library was not being served.

I later stumbled upon this article that resonated with the issue that we were encountering: How to deal with the "HTTP 404 '_content/Foo/Bar.css' not found" when using Razor component package on ASP.NET Core Blazor app and this led me back to this article on the microsoft website Create reusable UI using the Razor class library project in ASP.NET Core 

The Solution

If your Razor Class library includes Razor Pages, then the following methods need to called with the the Startup.cs of the consuming application:

services.AddRazorPages();

app.MapRazorPages();

If your Razor Class library includes static files like .css and .js files, then a call to UseStaticWebAssetts() must be used in the Program.cs of the consuming application:

public static class Program
{
    public static void Main(string[] args) => CreateHostBuilder(args).Build().Run();

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureCmsDefaults()
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
                webBuilder.UseStaticWebAssets();
            });
}

Now here is the fun part: if the ASPNETCORE_ENVIRONMENT environment variable is set to Development, then .NET automatically includes a call to UseStaticWebAssets(), if it is set to any other value, then you have to manually add this to your code!  It is this final part of the puzzle which explains why the code worked perfectly in some environments but failed in others.

Sep 23, 2022

Comments

Surjit Bharath
Surjit Bharath Sep 23, 2022 08:17 AM

Great information, thanks Mark.

Praveen Soni
Praveen Soni Sep 23, 2022 09:32 AM

Thanks Marks, for this solution

Mark Stott
Mark Stott Sep 23, 2022 09:50 AM

Thank you both. I'm glad the issue has been identified and fixed for you Praveen :)

Graham Carr
Graham Carr Sep 23, 2022 12:22 PM

Thanks Mark, for the solution and resolving it so quickly!!

Please login to comment.
Latest blogs
New Series: Building a .NET Core headless site on Optimizely Graph and SaaS CMS

Welcome to this new multi-post series where you can follow along as I indulge in yet another crazy experiment: Can we make our beloved Alloy site r...

Allan Thraen | Jun 14, 2024 | Syndicated blog

Inspect In Index is finally back

EPiCode.InspectInIndex was released 9 years ago . The Search and Navigation addon is now finally upgraded to support Optimizely CMS 12....

Haakon Peder Haugsten | Jun 14, 2024

Change the IP HTTP Header used for geo-lookup in Application Insights

.

Johan Kronberg | Jun 10, 2024 | Syndicated blog

Copying property values

In this article I’d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts...

Grzegorz Wiecheć | Jun 8, 2024 | Syndicated blog