CSS, Images, JS not loading asp.net Core :(

Question

This my first .net Core application. And Having issue .Well the issue is that I was adding new template to exist application and Google Console showing error that can not able to find CSS and JS

**

Appsetting.Json

**

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=.;Database=MusicSite;Trusted_Connection=True;MultipleActiveResultSets=true"



  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  },

    "dependencies": {
      "bootstrap": "3.3.6",
      "jquery": "2.2.0"
    }

  }

All the CSS and Js folder are included in the Solution

Error which I am getting in Console App

**

Console error

**

Layout Page

**

      <!-- style -->
        <link rel="stylesheet" href="css/animate.css/animate.min.css" type="text/css" />
        <link rel="stylesheet" href="css/glyphicons/glyphicons.css" type="text/css" />
        <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" type="text/css" />
        <link rel="stylesheet" href="css/material-design-icons/material-design-icons.css" type="text/css" />
        <link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
        <!-- build:css css/styles/app.min.css -->
        <link rel="stylesheet" href="css/styles/app.css" type="text/css" />
        <link rel="stylesheet" href="css/styles/style.css" type="text/css" />
        <link rel="stylesheet" href="css/styles/font.css" type="text/css" />

        <link rel="stylesheet" href="libs/owl.carousel/dist/assets/owl.carousel.min.css" type="text/css" />
        <link rel="stylesheet" href="libs/owl.carousel/dist/assets/owl.theme.css" type="text/css" />
        <link rel="stylesheet" href="libs/mediaelement/build/mediaelementplayer.min.css" type="text/css" />
        <link rel="stylesheet" href="libs/mediaelement/build/mep.css" type="text/css" />
        <!-- endbuild -->

  <script src="libs/jquery/dist/jquery.js"></script>
    <!-- Bootstrap -->
    <script src="libs/tether/dist/js/tether.min.js"></script>
    <script src="libs/bootstrap/dist/js/bootstrap.js"></script>
    <!-- core -->
    <script src="libs/jQuery-Storage-API/jquery.storageapi.min.js"></script>
    <script src="libs/jquery.stellar/jquery.stellar.min.js"></script>
    <script src="libs/owl.carousel/dist/owl.carousel.min.js"></script>
    <script src="libs/jscroll/jquery.jscroll.min.js"></script>
    <script src="libs/PACE/pace.min.js"></script>
    <script src="libs/jquery-pjax/jquery.pjax.js"></script>
    <script src="libs/mediaelement/build/mediaelement-and-player.min.js"></script>
    <script src="libs/mediaelement/build/mep.js"></script>
    <script src="scripts/player.js"></script>
    <script src="scripts/config.lazyload.js"></script>
    <script src="scripts/ui-load.js"></script>
    <script src="scripts/ui-jp.js"></script>
    <script src="scripts/ui-include.js"></script>
    <script src="scripts/ui-device.js"></script>
    <script src="scripts/ui-form.js"></script>
    <script src="scripts/ui-nav.js"></script>
    <script src="scripts/ui-screenfull.js"></script>
    <script src="scripts/ui-scroll-to.js"></script>
    <script src="scripts/ui-toggle-class.js"></script>
    <script src="scripts/ui-taburl.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/site.js"></script>
    <script src="scripts/ajax.js"></script>
    <!-- endbuild -->

**

Startup.cs

**

namespace MusicSite
{
    public class Startup
    {
        public Startup(IHostingEnvironment env)
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(env.ContentRootPath)
                .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);

            if (env.IsDevelopment())
            {
                // For more details on using the user secret store see https://go.microsoft.com/fwlink/?LinkID=532709
                builder.AddUserSecrets<Startup>();
            }

            builder.AddEnvironmentVariables();
            Configuration = builder.Build();
        }

        public IConfigurationRoot Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            // Add framework services.
            services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

            services.AddIdentity<ApplicationUser, IdentityRole>()
                .AddEntityFrameworkStores<ApplicationDbContext>()
                .AddDefaultTokenProviders();

            services.AddMvc();

            // Add application services.
            services.AddTransient<IEmailSender, AuthMessageSender>();
            services.AddTransient<ISmsSender, AuthMessageSender>();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();
            app.UseStaticFiles();

            // Add MVC to the request pipeline.
            app.UseMvc();
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseDatabaseErrorPage();
                app.UseBrowserLink();
            }

            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();

            app.UseIdentity();

            // Add external authentication middleware below. To configure them please see https://go.microsoft.com/fwlink/?LinkID=532715

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

Can you add your startup.cs code? Or please check do you have StaticFiles() middleware added. — Anuraj
– Anuraj, Commented Oct 30, 2017 at 0:11
In my .min version of the file was missing. I added the path to bundleconfig.json file and it worked as expected. — Avi
– Avi, Commented Jul 14, 2018 at 11:32

Shyju · Accepted Answer · 2017-10-30 00:21:39Z

32

In ASP.NET core, by default, static files are served from only the wwwroot folder. That means if you try to access a file from Libs directory, it won't work.

The good news is, You can configure the static file location as you wish. So update your Configure method in startup.cs.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
                                                           ILoggerFactory loggerFactory)
{
     // Your existing code goes here

     app.UseStaticFiles();

     // This will add "Libs" as another valid static content location
     app.UseStaticFiles(new StaticFileOptions()
     {
        FileProvider = new PhysicalFileProvider(
              Path.Combine(Directory.GetCurrentDirectory(), @"Libs")),
        RequestPath = new PathString("/libs")
     });
}

The PhysicalFileProvider class is defined in the Microsoft.Extensions.FileProviders namespace. So you should add a using statement to that in your Startup.cs class.

using Microsoft.Extensions.FileProviders;

Now the files can be accessed from yourSiteName/libs/somejsfile.js. Also, prefix your path to these scripts with ~/. The tilda(~) signs tells that it is the app root.

<script src="~/libs/jquery/dist/jquery.js"></script>

As i mentioned earlier, the wwwroot is a special folder to keep your static assets together. So you may also consider moving your libs directory under wwwwroot and then everything should work fine, without the above mentioned custom configuration.

edited Oct 30, 2017 at 0:21

answered Oct 30, 2017 at 0:16

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

veljkoz Over a year ago

We wanted to host only files from wwwroot, but, odly enough, it seems when we host ASP.NET Core in the Full framework that the UseStaticFile() has to be initiated with explicitly pointing to the wwwroot, i.e.

app.UseStaticFiles(new StaticFileOptions()             {                 FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot"))             });

GJKH Over a year ago

I had to flip the slashes for this to work on my Ubuntu box -

app.UseStaticFiles(new StaticFileOptions() { FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot").Replace("\\", "/")) });

user1869741 Over a year ago

Is still actuality for the .net 5 I have the same issue. It can't find the statics file contained in the wwwroot folder. Even if I move the files in the root folder of the application still can't find it I'll make a post .As I'm stuck. I'll post my startup file as well.I'm depolying on ubuntu server 20.04

user1869741 Over a year ago

Put this code in your Nginx config file replace with your folder location - server { server_name yoursite name; # This location block fixed my issue. location ~* /(css|js|lib) { root /var/www/yoursite/net5.0/publish/wwwroot; }

Ali reza Soleimani Asl Over a year ago

@GJKH your solution worked for me asp.net core mvc, dotnet 7.

Collectives™ on Stack Overflow

CSS, Images, JS not loading asp.net Core :(

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related