Search code examples
debuggingidehttp-status-code-404visual-studio-codestatic-files

Getting 404 for CSS and JS assets in Kestrel while debugging in Visual Studio Code


While toying around with ASP.NET Core on Ubuntu 16.04.1 LTS and Visual Studio Code 1.5.3 I've come across this issue. Here's what I did:

  1. Create empty folder and generate a new dotnet web app there (dotnet new -t Web, dotnet restore, dotnet build).
  2. Run the app from the terminal and visit http://localhost:5000/ and observe how the default site works as expected.
  3. Open the same directory in Visual Studio Code, accept installing the required assets for debugging.
  4. Start debugging and Firefox will open a tab with http://localhost:5000/
  5. Notice that the site loads partially, elements are misplaced and skewed. Upon pulling up the inspection tool all JS and CSS requests are getting 404s.

The startup seems to have the static file serving command:

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

        host.Run();
    }

also, the Startup class's method contains a call to UseStaticFiles().

I also uploaded a video of the steps here. The project's code is here.


Solution

  • It seems that I had to run

    sudo bower install --allow-root
    

    in order to have those assets installed locally. As for being able to run bower you need to have npm and git installed (usually they are), xcodebuild license agreed (on OS X) and other small things in order.