ASP NET Core Client-side libraries management with VS 2017 Library Manager

ASP NET Core Client-side libraries management with VS 2017 Library Manager

Few weeks ago I discussed how we could create a healthchek library which would return json status of our application. Using the json, I wanted to make a quick page to display healthchecks in a nice visual. I wanted to quickly add Bootstrap and momentJS. For frontend libraries, I was used to use Bower as it nicely put every frontend package in /bower_components which can be served as static data. But since Bower was announcing that it was no longer supported and requested to use Yarn or NPM, I started to look around for an easier solution than those as I don’t really care about source code of the frontend libraries, all I want is the latest compiled versions. After few minutes of research, I found out that the team in Microsoft felt the same way as I did and already worked on a tool called Library manager (libman) and is available in VS Preview for the moment. Libman gives the benefit to allow developers to download locally the latest compiled version of the CSS or JS of their preferred frameworks for frontend usage. We can see Libman as a CDN file management for local usage. Today I will show how it can be used and combined with Razor pages to bring quickly pages to life. This post will be composed of three parts:

  1. Enable Library Manager
  2. Configure Bootstrap
  3. Create a simple site with Razor pages

1. Enable Library Manager

Before starting, make sure that you are on Visual Studio 2017 Preview 15.7.0.

First thing to do is to right click on the project and select Manage Client-Side Libraries.

libman_1

After that we have enabled it, we will have a libman.json file. Right click on the libman.json file then select Restore on build.

libman_2

This will have as effect to download locally the libraries to the destination specified in the libman.json.

2. Configure Bootstrap

Now that we have Libman setup, we want to be able to use Bootstrap 4.1.0 for our website. To do that we would normally use CDN links:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

But thanks to Libman, we can download locally the libraries by configuring the libman.json file:

{
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery",
      "files": [
        "jquery.slim.min.js"
      ]
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/popper.js",
      "files": [
        "umd/popper.min.js"
      ]
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap",
      "files": [
        "css/bootstrap.min.css",
        "js/bootstrap.bundle.min.js"
      ]
    }
  ]
}

By setting the destination to wwwroot/lib/xxx, the package will be dowloaded to the wwwroot folder which is the default folder served by ASP NET Core static file.

libman_3

3. Create a simple site with Razor pages

Razor pages work similarly as Razor views with the only difference that they are standalone and do not require controllers.

Link to official documentation

3.1 Routes

Razor pages are placed in a /Pages folder and use folder structure to define their routes. For example:

- /Pages
 | - _Layout.cshtml
 | - _ViewImports.cshtml
 | - Index.cshtml
 | - Contact.cshtml
 | - /Projects
     | - Index.cshtml
     | - MyProject.cshtml

This folder structure will yield the following route tree:

/
/Contact
/Projects
/Projects/MyProject

3.2 Model

A Razor page can optionally define a model class which can handle HEAD, GET and POST by adding a function prefix by on. For example:

public class IndexModel : PageModel
{
    public void OnGet()
    {
        // load the values
    }

    public IEnumerable<string> Values { get; set; }
}

This will get called automatically when the page is requested.
It is also possible to add extra POST handlers using the tag helper asp-page-handler:

<button type="submit" asp-page-handler="test" asp-route-data="@somedata">Test</button>

And from the model class we have the handler:

public Task OnTestAsync()
{
    // do something
}

3.3 Layout, ViewImports and tag helpers

Just like Razor views, we have access to layouts, view imports and tag helpers.

If you never seen Razor, you can have a look at my previous blog post on Razor syntax and helpers.

We start by defining the _ViewImports.cshtml where we globally load all tag helpers:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Next we create a common layout _Layout.cshtml for all pages.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Libman</title>
    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
    </environment>
    <environment names="Production">
        <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/css/bootstrap.min.css" />
    </environment>
</head>
<body>
    @RenderBody()
    <environment names="Development">
        <script src="~/lib/jquery/jquery.slim.js"></script>
        <script src="~/lib/popper.js/umd/popper.js"></script>
        <script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>
    </environment>
    <environment names="Production">
        <script src="~/lib/jquery/jquery.slim.min.js"></script>
        <script src="~/lib/popper.js/umd/popper.min.js"></script>
        <script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    </environment>
</body>
</html>

This layout loads the libraries and make use of the environment tag helper to load the minified version for Production.

Lastly every page can make use of the layout, for example here the index page Index.cshtml:

@page
@{
    Layout = "_Layout";
}

<h1 class="display-1">Welcome to Libman test.</h1>
<p>Hello world!</p>

When navigating to the site, we should now see our welcome message with Bootstrap style!

Full source code available on my GitHub

Conclusion

Today we saw how to we could use Libman to manage client site libraries. We also saw how we could leverage Razor pages to start building a site using Razor. Hope you liked this post! See you next time!

Comments

Post a Comment

Popular posts from this blog

Microsoft Orleans logs warnings and errors

Microsoft Orleans logs warnings and errors Microsoft Orleans is a framework which helps building distributed system by implementing the actor model together with the concept of virtual actors, taking care of availability and concurrency. If you are unfamiliar with Microsoft Orleans, you can look at my previous blog post explaining the benefits of Microsoft Orleans . Even though Orleans promises to abstract the distributed system problems, there are instances where errors arise without us being able to understand what is going on. Lucky us, the logs are well documented… but only for those who can decrypt them. Today I will go through some of the errors and warnings which can be seen from silo and client so that you too can undestand what is going on. Enjoy! The code used to produce those errors can be found on my GitHub https://github.com/Kimserey/orleans-cluster-consul . 1. Client logs Logs on client appears with address {ip}:0 . 1.1. Can’t find implementation of interface An un...
Keep reading

A complete SignalR with ASP Net Core example with WSS, Authentication, Nginx

SignalR with ASP Net Core SignalR is a framework from ASP NET Core allowing us to establish a two way communication between client and server. This two way communication allows the client to send messages to the server but more importantly allows the server to push messages to the client. SignalR makes use of Websocket when available else it falls back to SSE or pulling. Today we will focus on how to setup SignalR to work with WSS, Websocket secure and how we can authenticate the user requesting to connect to our SignalR hub via Webscoket. Getting started with SignalR SSL encryption for Websocket Secure WSS Websocket Authentication with Identity Server 4 SignalR behind Nginx 1. Getting started with SignalR The Hubs are the main components of SignalR. It is an abstraction of a two way communication available for both client and server. Public functions from the hub can be called from the server code and can be called from the client. The frontend NPM package @aspnet/signalr ...
Keep reading

Verify dotnet SDK and runtime version installed

Verify dotnet SDK and runtime version installed To check your dotnet version installed, use dotnet --info . This command will display the SDKs and runtimes installed on your system together with the path where they can be found. For example on my Windows 10 development machine, dotnet --info will yield the following: > dotnet --info .NET Core SDK (reflecting any global.json): Version: 2.1 . 301 Commit: 59524873 d6 Runtime Environment: OS Name: Windows OS Version: 10.0 . 17134 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\ 2.1 . 301 \ Host (useful for support): Version: 2.1 . 1 Commit: 6985 b9f684 .NET Core SDKs installed: 2.1 . 4 [C:\Program Files\dotnet\sdk] 2.1 . 201 [C:\Program Files\dotnet\sdk] 2.1 . 300 [C:\Program Files\dotnet\sdk] 2.1 . 301 [C:\Program Files\dotnet\sdk] .NET Core runtimes installed: Microsoft.AspNetCore.All 2.1 . 0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.A...
Keep reading