'ASP.Net MVC returning 404 for generated JS

ASP.Net MVC project is not able to serve js in wwwroot/js folder (generated by webpack).

I'm getting a 404 when page is trying to access js/app.js.

The csproj has an itemgroup for wwwroot like this, but it appears it isn't copied. How do I get it copied over?

  <ItemGroup>
     <None Update="wwwroot\**">
         <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>
  </ItemGroup>

This is what my Program.cs contains.

using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
using JavaScriptEngineSwitcher.V8;
using React.AspNet;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
builder.Services.AddReact();
builder.Services.AddJsEngineSwitcher(options => options.DefaultEngineName = V8JsEngine.EngineName)
  .AddV8();
builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseReact(config =>
{
    config
      .SetLoadBabel(false)
      .AddScriptWithoutTransform("~/js/app.js");
});

app.UseStaticFiles(new StaticFileOptions
{
    ServeUnknownFileTypes = true,
});

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

My index.cshtml:

@{
    Layout = null;
}
<html>
<head>
  <title>CivicSpace</title>
</head>
<body>
    <div id="content"></div>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="@Url.Content("~/js/app.js")"></script>
</body>
</html>

[UPDATE]

Not sure what the issue was. I created a new ASP.Net MVC project where js is loading correctly, and moved my code over. The .csproj didn't need to declare how the js file is to be handled. It worked.

Solution 1:^[1]

It seems that the property of js file is not same with the tag"None",Have you tried as below?

<ItemGroup>
      <Content Update="wwwroot/js/app.js">
        <CopyToPublishDirectory>PreServeNewest</CopyToPublishDirectory>
      </Content>
    </ItemGroup>

Solution 2:^[2]

To get the entire folder in your build output:

<ItemGroup>
  <Content Update="wwwroot\**\*.*">
    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
  </Content>
</ItemGroup>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ruikai Feng
Solution 2	Jason Triplett

'ASP.Net MVC returning 404 for generated JS

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]