CODEWITHSUNDEEP
asp.netasp.net-core
xam developer
xam developer

Reputation: 1983

Public Files in ASP.NET 5

I'm dipping my toes into ASP.NET 5 (vNext). To do that, I downloaded Visual Studio 2015 RC. I created a new ASP.NET Web Application. Then, in the next dialog I chose "Empty". From there I added a basic controller and a basic view.

I want to add bower and reference Zurb Foundation. However, I'm not sure how to do that. I've added a bower.json and .bowerrc file. Traditionally, I would install my bower packages in a directory called "libraries". I configured it like so:

.bowerrc

{
  "directory" : "/public/libraries"
}

Then, in my views, I'd have code that looked like this:

<link rel="stylesheet" src="~/public/libraries/foundation/foundation.min.css" />

I can see that when I run bower, I am in fact downloading the libraries and they are being placed in /public/libraries. However, when I deploy it, there seems to be an issue. It looks like the deployment is getting ran from wwwroot. However, I'm not sure what to do about

What do I need to do to access static files a) during development which seems to use the typical file structure and b) during deployment where the stuff seems to run from wwwroot?

Upvotes: 1

Views: 152

Answers (2)

Gerald Davis
Gerald Davis

Reputation: 4549

You should not be making reference in your views to the location of the bower dependencies, instead you should be referencing the relative path within wwwroot.

To see how it all fits I recommend creating a new project using the ASP.NET 5 Web Page template in VS 2015 RC.

In package.json your tool dependencies (resolved by npm) are listed. Notice for the default project gulp is included here. Gulp is the default task runner but you can use any task runner you like. The bower dependencies by convention are defined in bower.config.

By convention the location for bower dependencies is bower_components off the project root.

If you look in gulpfile.js you will see that it copies the dependencies from bower_compontents to /lib off the project webroot (/wwwroot by default).

In the view _Layout.cshtml you will see the references to the libraries is ~/lib not /bower_components.

@inject IOptions<AppSettings> AppSettings
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewBag.Title - @AppSettings.Options.SiteTitle</title>

        <environment names="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
            <link rel="stylesheet" href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" />
            <link rel="stylesheet" href="~/css/site.css" />
        </environment>
        <environment names="Staging,Production">
            <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
                  asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />
            <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css"
                  asp-fallback-href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"
                  asp-fallback-test-class="carousel-caption" asp-fallback-test-property="display" asp-fallback-test-value="none" />
            <link rel="stylesheet" href="~/css/site.css" />
        </environment>
    </head>

So in summary:

  1. Define client side dependencies in bower.config (or using some other package mananger)
  2. Use gulp scripts to manage tasks (copying, minifying, etc).
  3. Only make references in views to locations within webroot (using ~ relative paths).
  4. When you build/publish all dependencies should be resolved prior to deploying to server.

Upvotes: 0

tugberk
tugberk

Reputation: 58444

During development and production, you need to put stuff under the webroot if you have it defined. You can do this by gulp or grunt task. See here for an example.

Assuming you have the following structure:

└───wwwroot
    ├───js
    │   └───foo.js
    │   └───bar.js

You will be able to reach out to them by:

 <link rel="stylesheet" src="~/js/bar.js" />
 <link rel="stylesheet" src="~/js/foo.js" />

Upvotes: 2

Related Questions