.net core weboptimizer not creating a bundle

Question

I'm trying to use https://github.com/ligershark/WebOptimizer as suggested by microsoft in order to bundle and minimise my js files, so following the instructions, I have the following in my startup.cs:

app.UseWebOptimizer();
app.UseStaticFiles();

and in my service configuration (startup.cs):

services.AddWebOptimizer(pipeline =>
{
    pipeline.AddJavaScriptBundle("/js/site.js",     // I have tried using MinifyJsFiles (without the use content root) instead of AddJavaScriptBundle
        "/lib/jquery-ui-1.13.1.custom/jquery-ui.js",
        "/js/auto-complete.js")
      .UseContentRoot();

    pipeline.MinifyJsFiles(); // I have tried with and without this line
});

and in my _layout:

<script src="~/js/site.js"></script>

But whenever I browse to the page, I'm just getting a 404 error in the network tab when it tries to load the site.js

Is there something I have missed? All the files are in their correct places in the wwwroot folder of the site

Answer 1

Verify these:

Your files should be somewhere inside the wwwroot directory (if using default configuration)

Your files should use the "Build Action = Content" (there should be nothing in csproj).

When you write:

pipeline.AddSomethingBundle();

A file at wwwroot/main.css will be available at url /main.css.

And when you write:

pipeline.AddSomethingBundle("/site.css", "site.css");

It will require a file to be at location wwwroot/site.css.

Answer 2

Using .UseContentRoot() will make any params (other than the first param, which is a in-memory-only path to a virtual JS bundle) relative to the content root of the .csproj in which the JS files reside.

The content root is generally the root directory of .csproj (Web) project in which the web files reside e.g. containing wwwroot, Controllers, Models, Views, etc.

The normal behaviour is for the file paths / globs to be relative to the wwwroot sub-folder of the content root.

So, if the JS files are in wwwroot, and the .UserContentRoot() call has been made, then we must refer to them relative to the root of your .csproj i.e.

pipeline.AddJavaScriptBundle("/js/site.js",
    "wwwroot/lib/jquery-ui-1.13.1.custom/jquery-ui.js",
    "wwwroot/js/auto-complete.js").UseContentRoot();

which works (on my computer, lol).

All we would need to do then, if we wanted to reference something outside of wwwroot would be to adjust the paths relative to the content root. e.g.

pipeline.AddJavaScriptBundle("/js/site.js",
    "lib/jquery-ui-1.13.1.custom/jquery-ui.js",
    "node_modules/auto-complete/js/auto-complete.js").UseContentRoot();

It may be worth nothing again that the first URL/param is an virtual (i.e. doesn’t exists as a file) absolute path from the root of your web site (so you should refer to that as absolute path in your <script> tag).

And, that the subsequent URLs/params are relative to either wwwroot (by default) or the content root (probably the root of your Web .csproj).

re: pipeline.MinifyJsFiles();

My best understanding is that this line is not needed, as the default behaviour when bundling will be to minify all files in the bundle.

Rather, this call is used when we want to explicitly tell the pipeline to minify a certain list of individual JS files. Then, when we reference those individual JS files directly in a <script> tag, the response we receive should be the minified version.