CODEWITHSUNDEEP
jquerytwitter-bootstrapvisual-studio-2019
Maro77
Maro77

Reputation: 59

ASP.NET MVV Core App: Failed to load resource: the server responded with a status of 404 (Not Found) bootstrap.css:1

I am trying to develop my first ASP.NET Core MVC (SDK .Net 5 )Application.

When running the application from inside VS Studio 2019, I am having trouble loading bootstrap and jquery client libraries.

I have added the latest **bootstrap (5.1.3)**and **jquery (3.6.0)**client libraries from Library manager. I have installed them in lib\twitter-bootstrap and lib\jquery directory of my project file.

In the windows files explorer, I have double-checked if the libraries are installed properly and they have. Next, I have added these two lines (by dragging from the solution explorer) in _Layout.cshtml file, which is found in my Shared Folder.

 <environment include="Development">
            <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
            <script src="~/lib/jquery/jquery.js"></script>
    </environment>

Note also, my _ViewStart.cshtml file found in the Views folder, has the reference to this LayoutFile, as I have included these lines:

**@{
    Layout = "_Layout";
}**

Note also, my libman.json file properly contains the libraries installed:

**{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "lib/twitter-bootstrap/"
    },
    {
      "library": "[email protected]",
      "destination": "lib/jquery/"
    }
  ]
}**

My launchsettings.json file displays developement :

 "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }

Finally, I have included UseFileServer() middleware in Configure method of StartUp.cs, (second middleware after UseDeveloperExceptionPage Middleware).

In my Index View Page, i have inserted the bootstrap classes like: <div class="card-deck"> or <div class="card m-3"> or <div class="card-header">.

Here is the problem: when I run the application from VS Studion 2019 (IIS Express), I don't see bootstrap classes in effect.

I checked the Page Source in Microsoft Edge, and i can see my classes in it, for example:

 <div class="card m-3">
        <div class="card-header">
            <h3>Test 3</h3>
        </div>
          
        <img class="card-img-top" src="/images/noimage.jpg" />
        <div class="card-footer text-center">
            <a href="/Details/3">View</a>
            <a href="/magazine/edit/3">Edit</a>
            <a href="/magazine/delete/3">Delete</a>
        </div>
    </div>

However, when I check the Developer Tools-->Console in Microsoft Edge, i see the following messages:

*jquery.js:1

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

bootstrap.css:1

   Failed to load resource: the server responded with a status of 404 (Not Found)*

When I hover over bootstrap.css:1, it displays http://localhost:7183/lib/twitter-bootstrap/css/bootstrap.css

When I try to see this URL "http://localhost:7183/lib/twitter-bootstrap/css/bootstrap.css" on the Edge Browser itself, I get the same error : No webpage was found for the web address: http://localhost:7183/lib/twitter-bootstrap/css/bootstrap.css

Same with jquery.js.

On the other hand, I try to view the class libraries from the windows folders, I can see them.

C:\X\Y\Z\T\SolutionFolder\lib\twitter-bootstrap\css, I can see bootstrap.css inside it (and I can open and view content in bootstrap.css).

I have checked javascript is enabled in Edge.

I have tried to clear cache from Edge and even re-install Edge on my machine, with no luck. I tried to launch the application in Chrome, encountered the same problem !!

What might have gone wrong? Does it have to do with EndPoints? Sorry if this might sound naive...

I tried to be as detailed as possible. Thanks a lot in advance for your help.

Upvotes: 2

Views: 1858

Answers (1)

Maro77
Maro77

Reputation: 59

OK I raised this question, but I am going to answer it as I found the solution myself after some careful debugging, it might be beneficial to others :)

The problem was that I had created an EMPTY ASP.NET MVC Core Application in VS 2019. When creating a new application without Templates, VS does not create a wwwroot folder by default, it has to be created manually. When adding Client Libraries, the client libraries will be added in wwwroot folder, if found. Else they will be created outside.

It seems the static files were not possible to be detected when they were not in wwwroot folder.

So I created wwwroot folder myself (via Add --> New Folder --> Named it as wwwroot and the icon changed automatially to one resembling the web). Then I removed my client libraries (i.e. libman was cleared), deleted the added css, js and lib folders, and added the client libraries from the Library Manager once again.

Finally, I fixed the directories of the static files in the layout file.

Upvotes: 3

Related Questions