Hey I would love to know what you think while reading my posts. Please comment!.

Resizing Images with Azure Functions

A new Azure Functions project template is available, in Visual Studio Preview (currently on June 13 2017), for working with Azure Functions. In order to be able to select the project and file types, you will eed to also install VS2017 Tools for Aszure Functions extension. This blog has the steps required to install https://blogs.msdn.microsoft.com/webdev/2017/05/10/azure-function-tools-for-visual-studio-2017/

After installing, follow the instructions on creating a new Azure Functions project, and then add a “BlobTrigger” function. This will then create a basic blob trigger with the following code:

[FunctionName("BlobTriggerCSharp")]
public static void Run([BlobTrigger("samples-workitems/{name}", Connection = "")]Stream myBlob, string name, TraceWriter log)
{
    log.Info($"C# Blob trigger function Processed blob\n Name:{name} \n Size: {myBlob.Length} Bytes");
}

The BlobTrigger takes in the name of your blob container, and the Connection is the name of your storage account. If you then follow the instructions on publishing this to your Azure instance, you can then watch this run. For managing files within my blob container, I downloaded http://storageexplorer.com/ which then allows me to upload a file and then watch, via the Azure portal, the function trigger.


Webpack final loader didn't return a buffer or string

Is the world of web development in a state of being permanently broken? Have you ever been able to follow one tutorial these days without then having to find why you are getting a errors?

I have been looking at the best/fastest module builder/bundler for our ReactJS project which is written in TypeScript. Currently we are using Gulp, however we feel the bundler is not really where we want it to be. So I am looking at using either Webpack or Brunch.io.

I found this tutorial online as a starter for 10 (https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)[https://www.typescriptlang.org/docs/handbook/react-&-webpack.html]. Fairly simple tutorial and written well.

Follow all the instructions to the letter, copy the configs into my configs, and then run webpack to get this error;

Module build failed: Error: Final loader didn't return a Buffer or String

webpack


dotnet aspnet codegenerator

I am starting to get a bit annoyed with web development using Visual Studio these days. A lot of the work I have been doing is on the frontend using TypeScript and React, and trying to debug and compile currently involves the use of 3 tools.

On top of this, I have been looking at moving our existing .net core project from Visual Studio 2015 to 2017. So while playing around with a Web Application in VS17, I just want to add a simple MVC Controller. Simples eh? Well not with VS17 it would seem!

codegenerator

There was an error running the selected code generator: No executable found matching command "dotnet-aspnet-codegenetor"

I have read that you need to “hack” the csproj file to get it to work;

<ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0-msbuild3-final" />
</ItemGroup>

Does this work? Heck no. I am going home.

Update

Ok so this only seems to be a problem when you right click on the Controllers folder and select Add > Controller. If you just select Add > New Item, then select MVC Controller Class, it lets you add one. Annoying.


Typescript Interfaces and Optional Properties

I love TypeScript after working with it (on an enterprise system) for well over a year now. Using it with ReactJS makes things easier and very type safe. No more issues with case sensitivity Javascript errors, or accidentally assigning a string to a number. Or so I thought!

Recently, we came across an issue with the type safety on some of our interfaces. These were interfaces that included only optional properties within them.

e.g.

interface IInvoiceFilter {
    invoiceDate?: Date;
    invoiceNo?: number;
}

We would then use this interface for what ever we were doing, and using intellisense to see what the properties were on it. Then use it something like this;

const invoiceFilter: IInvoiceFilter = { invoiceNo: 1 };
let otherFilter: IInvoiceFilter = {};
otherFilter.invoiceNo = 1;

There would then be a method that would take the filter;

const filterInvoices = (invoiceFilter: IInvoiceFilter) => {
    // do something here with it
};

You would then call this with;

filterInvoices(invoiceFilter);

UmbracoApplicationBase Application shutdown. Details ConfigurationChange

UmbracoApplicationBase Application shutdown. Details ConfigurationChange

UmbracoApplicationBase Application shutdown. Details ConfigurationChange

UmbracoApplicationBase Application shutdown. Details ConfigurationChange

Wow! Has it been so long since my last blog post?! Seems to be! Well why not stick one up on Friday 13th! I have been exceptionally busy for the past year, with a really large project in work which has eaten up all development my time, then family life has taken up the rest.

One of the projects I have been working on recently in work involved using the latest version of Umbraco hosted on an Azure VM (Windows Server 2012 R2). The Umbraco installation is just a standard one, and there is nothing fancy within it. Just some datatypes, templates, views and some macros. The dynamic data of the site is loaded via a separate API on the same Azure VM.

My client was complaining that the site was slow to load, which I had just put down to it being a test site and the application pool recycling due to inactivity. However I then started to notice that it was exceptionally slow after creating/editing pages in the CMS. I had mentioned this to another developer in the office, and he had said he had a similar issue with another client’s installation, but when the site went live, it all sorted itself out.

Today though, I was speaking to another developer who manages another client using Umbraco on another Azure VM, and he was having a similar problem to me on a live site. So we decided to look deeper into this issue and found this nice little error in the Umbraco log file.

2017-01-13 09:52:11,148 [P5216/D2/T4] INFO  Umbraco.Core.UmbracoApplicationBase - Application shutdown. Details: ConfigurationChange

_shutDownMessage=IIS configuration change
HostingEnvironment initiated shutdown
HostingEnvironment caused shutdown

_shutDownStack=   at System.Environment.GetStackTrace(Exception e, Boolean needFileInfo)
   at System.Environment.get_StackTrace()
   at System.Web.Hosting.HostingEnvironment.InitiateShutdownInternal()
   at System.Web.Hosting.HostingEnvironment.InitiateShutdownWithoutDemand()
   at System.Web.Hosting.PipelineRuntime.StopProcessing()

Project.deps.json could not be found

Project.deps.json could not be found

Project.deps.json could not be found

Project.deps.json could not be found

So you are creating a new ASP.NET Core Web Application (.Net Framework) through visual studio, so select “New Project > Select Template > Name > Ok”, then select the Template you want to use. Then run your shiny new website.

BOOM! Build Error

Build Error

There are no errors in the Error List, no warnings and no messages? So you check the build ouput to find

C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Common.Targets(262,5): error : C:\Projects\My Project\error CS2001: Source file ‘C:\Projects\My Project\Project.deps.json’ could not be found.


AspNet VNext TSX Debugging

Following on from my recent post ReactJs with TypeScript in AspNet VNext, I have been playing about with .TSX + ReactJS more, and one of the first things I noticed was that I was unable to debug the JavaScript files in the browser.

This is down to the way in which Visual Studio + the tsconfig.json are generating the .js files which are linked to .js.map files.

From my previous post, we created a simple App.tsx file that simple output <h1>Hello World</h1>. Now if you investigate the generated .js file, you will see the following in the last two lines;

ReactDOM.render(React.createElement(MyApp, null), document.getElementById('appMountNode'));
//# sourceMappingURL=app.js.map

ReactJs with TypeScript in Asp.Net VNext

Now that the ASP.NET 5 Release Candidate 1 has been announced and released, now is a great time to start playing around with it. So why not start playing around with ReactJs using TypeScript at the same time!

Background

For those that are not in the know:

React

A library for building user interfaces.

It was developed by the facebook guys as they started to run into problems, with other JS frameworks, when building their Apps section. So they invented their own!

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

It was developed by Microsoft, more specifically I think it was Mads Kristensen and his team? I might be wrong!

Getting Started

To begin with, we want to create a new Project in Visual Studio 2015. I am using .Net Framework 4.6.1 and then selecting the ASP.Net Web Application. Then from the ASP.NET 5 Templates, I am going to select the Web Application. This will then create the new Asp.net 5 solution structure for you.


Changing the Password length in Asp.Net 5 Identity

A while ago I wrote a blog post regarding MVC 3 Password Length DataAnnotation in order to easily change the length of the password required to register for an account within your website.

This blog post is about how you can easily manage your password password strength in an Asp.Net vNext project (Asp.Net 5) when using the Microsoft.AspNet.Identity framework.

If you create a new Asp.Net 5 Web Application in Visual Studio 15 you will see that it is set up to use Microsoft.AspNet.Identity for handling user Authentication.

By default it will come with a RegisterViewModel that has the Password property and various DataAttributes

[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }

Similar to my MVC 3 Password Length DataAnnotation post, the length of the password is controlled from within the Model, so if you want to change this length then you will have to edit code.


My Top 10 Dad Jokes

I have a bit of a reputation for sharing bad dad jokes. So I thought I would compile a list of my top 10 for you to enjoy!

In reverse order

10.

A lot of people cry when they cut onions. The trick is to not form an emotional bond.

9.

Sometimes I use words I don’t understand so I can sound more Photosynthesis.

8.

I cut my finger chopping cheese, but I think that I may have grater problems.

7.

What would you catch if you had sex with Harry Potter? Genital Hogwarts.

6.

My pet mouse Elvis died last night. He was caught in a trap.


More posts...

Posts by Tags...

About Me

Tim James I'm Tim, a web applications developer from Glasgow, Scotland. Currently working for Kingfisher Systems Ltd, building bespoke systems within the Car Auction industry.

  • C#
  • VB.NET
  • ASP.NET
  • .NET MVC
  • Web API
  • Razor
  • HTML5
  • CSS3
  • jQuery
  • WCF
  • SQL
  • knockout.js
  • Angularjs
  • AJAX
  • APIs
  • SignalR
Why not follow me on twitter? Follow me on Twitter