How to use Office UI Fabric in your Web Applications

The Office UI Fabric framework is a easy to use UI framework that provides you with CSS and JavaScript components allowing you to style your web applications, making them seamlessly integrate with the Office 365 and SharePoint Online user experience.

You can fine out more at on the Office UI Fabric site and you can visit the Office UI JS GitHub site here to find out how to use the JavaScript components.

In my video here I show a quick demo of how to include the components in your own web application.

Video Tutorial – Azure Functions, FaaS and Serverless Architectures.

It seems like Microsoft is constantly adding new services and features to Windows Azure and one of the latest services Azure provides is Azure Functions.

Azure Functions are born from the notion of Functions as a Service (FaaS) and builds on the serverless architecture paradigm that has come about recently as a new way to think about building tradition web solutions. It’s the idea of offloading work to the cloud but instead of using traditional PaaS offerings such as the Azure App Service where you still have to build your web services with WebAPI or WCF you build your functions inside the Azure Functions service and have it automatically create the HTTP endpoints, authentication and all the other management and setting up that goes around deploying web services.

You can find out more about what features and scenarios Azure Functions support by visiting http://functions.azure.com.

You might also want to read through this great article by Mike Roberts on serverless architectures.

The video below walks through creating a simple application first using a WebAPI based service and then replacing it with an Azure Function.

ASP.Net Core 1.0 RTM – Serving Static Files

If you have been using ASP.Net Core pre RTM release then you might have been using the Microsoft.AspNetCore.StaticFiles dependency to serve up static content from your ASP.Net web application.

If you have been using the latest stable version of this dependency 1.0.0 then you may come across an issue when using the RTM release of ASP.Net Core.

With the RTM release and Update 3 for Visual Studio 2015 we now have a Program.cs with a Main() entry point to our application added to our project when we create a new web application.


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

           host.Run();
    }
 }

As you can see there is a .UseContentRoot extension method that gets called setting the content root of our application to the current directory.

To use static files we still need need to reference the Microsoft.AspNetCore.StaticFiles dependency but we must use the pre-release version 1.0.0-rc2-final or we will get the following error.

Error CS0121 The call is ambiguous between the following methods or properties: ‘Microsoft.AspNetCore.Hosting.WebHostBuilderExtensions.UseContentRoot(Microsoft.AspNetCore.Hosting.IWebHostBuilder, string)’ and ‘Microsoft.AspNetCore.Hosting.HostingAbstractionsWebHostBuilderExtensions.UseContentRoot(Microsoft.AspNetCore.Hosting.IWebHostBuilder, string)’

The reason is that the WebHostBuilderExtensions class that contains the UseContentRoot method has been moved to the Microsoft.AspNetCore.Hosting assembly and if you reference version 1.0.0 and not 1.0.0-rc2-final version of the Microsoft.AspNetCore.StaticFiles assembly then you will get an ambiguous reference between these namespaces.

To setup static file serving correctly with RTM just add a dependency to 1.0.0-rc2-final version of Microsoft.AspNetCore.StaticFiles and then add the following in your Startup.cs.


public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
}

You can see the updated documentation for static files here:

https://docs.asp.net/en/latest/fundamentals/static-files.html

Custom Tag Helpers with ASP.Net Core & MVC 6

I was playing around with the new tag helper functionality in MVC 6 and decided to put together a quick tutorial on how to create custom tag helpers for your own MVC 6 projects.

I was targeting the ASP.Net Core 1.0 framework in this video but it also applies to .Net 4.6 framework with MVC 6.

I was never really a fan of mixing markup and code within Razor views and I believe tag helpers are a much nicer way to separate out code a functionality in your web projects.

Azure AD JavaScript authentication tutorial series (Part 1)

I have put together a video tutorial series that goes through step by step a full end to end solution that shows how to authenticate an Azure AD Web API application from JavaScript code using the adal.js library.

Now days I am finding myself designing my applications to use a web service layer to serve up data from data stores.  Providing REST API endpoints on top of your data gives alot of benefits when it comes to integrating your data across different client applications. JavaScript runs pretty much everywhere now and it’s the to go to language to build client side apps so accessing your REST endpoints from JavaScript is a really appealing solution and this is why pretty much everyone is doing JavaScript and REST now.

The JavaScript ecosystem today is massive with libraries to help you build pretty comprehensive applications. When I am building SharePoint Add-Ins I tend to expose the data using Web API and stick to using JavaScript in the application to render the data and build out the UI. Most if the time there is no need for server side code inside my client application.

Inevitably you will want to secure your web service layer at some point and if your are building on the Azure platform, then Azure AD is a great OAuth solution.

It is especially a good solution if you are building SharePoint Add-Ins in Office 365. When you are logged into your Office 365 SharePoint site you have already authenticated against your Azure AD and as long as you deploy your applications to the same Azure AD instance then you get automatically authenticated when accessing your Web API layer.

When building these apps I found that there was plenty of examples on authenticating from C# code but I found the examples lacking if I just wanted to use JavaScript to authenticate against my Web API.

The adal.js library comes in very handy here but I found all the examples were based around using it with Angular. Although Angular is a great framework for building client side apps I found most of the time it was overkill for what I wanted to do.  So these set of videos show how you might want to design and build a client side application and in this case a SharePoint Add-In that uses Azure AD authentication, Web API, JavaScript and TypeScript.

The general architecture looks like this.

Thumbnail

 

The first video is up and it shows how to create a SQL Azure database, create a Web API layer and how to model and scaffold the data using Entity Framework.