ASP.NET Core 2.0: static file (site.min.js) not found

13,163

Solution 1

To resolve the `site.min.js` 404 error:

Change your site.min.js script tag to

<script src="~/js/site.min.js" asp-append-version="true"></script>

The wwwroot indicates where the 'root' is on the web server rather than the filesystem.

To resolve the issue with no content in `site.min.js`:

You have to install a nuget package called BuildBundlerMinifier. After installing this package, I saw my site.min.js file get populated with the code in site.js.

I found this from reading this helpdoc: Build-time execution of bundling and minification

Solution 2

Refer: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-2.1&tabs=aspnetcore2x

Add the following to the Configure method in Startup.cs:

app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "js")),
        RequestPath = "/js"
    }
);

Solution 3

Change your site.min.js script tag to as below

<script src="js/site.min.js" asp-append-version="true"></script>

What is wwwroot?

The wwwroot folder is new in ASP.NET Core. All of the static files in your project go into this folder. These are assets that the app will serve directly to clients, including HTML files, CSS files, image files, and JavaScript files. The wwwroot folder is the root of your web site. That is, http://some.hostname/ points to wwwroot, all URLs for static content are relative to the wwwroot folder.

Code files should be placed outside of wwwroot. That includes all of your C# files and Razor files. > Having a wwwroot folder keeps a clean separation between code files and static files.

13,163

Author by

Lavinia N.

Updated on June 13, 2022

Comments

Lavinia N. almost 2 years

I want to deploy an ASP.NET Core web application via publishing profiles in Visual Studio 2017. Everything is copied to the destination folder and works fine, except the "site.js" file. In the destination folder, I see in the wwwroot/js folder both site.js and site.min.js, but the latter is empty. I also get a console error in the browser:

Failed to load resource: the server responded with a status of 404 (Not Found) site.min.js

In page source however I see the file loaded correctly:

<script src="/wwwroot/js/site.min.js"></script>

Program.cs file:

public class Program
{
    public static void Main(string[] args)
    {
        var host = new WebHostBuilder()
             .UseKestrel()
             .UseContentRoot(Directory.GetCurrentDirectory())
             .UseIISIntegration()
             .UseStartup<Startup>()
             .Build();

        host.Run();
    }
}

Service configuration in Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseBrowserLink();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });    
}

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Home</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Create">View orders</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2018 - test app</p>
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        @*<script src="~/lib/jquery/jquery-validation/dist/jquery.validate.js"></script>*@
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/wwwroot/js/site.min.js" asp-append-version="false"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

The site.js is in the wwwroot/js folder (I didn't move it or recreate it). I didn't change the bundleconfig.json either. Its content is the following:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    // An array of relative input file paths. Globbing patterns supported
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

Is it something that I am missing out? Thank you in advance.

UPDATE:

I changed the site.min.js script tag:

<script src="~/js/site.min.js" asp-append-version="true"></script>

I no longer get the 404 error, but the site.min.js is still empty and therefore is a minification issue.

UPDATE 2:

site.js content:

$('#chkMinId').change(function () {
    var checked = $(this).is(':checked');
    var target = $('#txtMinId');
    console.log(checked ? 'yes' : 'no');

    if (!checked) {
        target.prop('disabled', true);
    } else {
        target.removeAttr('disabled');
    }
});

$('#chkMaxId').change(function () {
    var checked = $(this).is(':checked');
    var target = $('#txtMaxId');
    console.log(checked ? 'yes' : 'no');

    if (!checked) {
        target.prop('disabled', true);
    } else {
        target.removeAttr('disabled');
    }
});