John Smith

Background

A while ago I was working on a project that consumed the Instagram Legacy API Platform.

To make things easier there was a fantastic library called InstaSharp which wrapped the HTTP calls to the Instagram Legacy API endpoints.

However, Instagram began disabling the Instagram Legacy API Platform and on June 29, 2020, any remaining endpoints will no longer be available.

The replacements to the Instagram Legacy API Platform are the Instagram Graph API and the Instagram Basic Display API.

So, If my project was to continue to work I needed to migrate over to the Instagram Basic Display API before the deadline.

I decided to build and release an open-source library, A wrapper around the Instagram Basic Display API in the same way as InstaSharp did for the original.

Solrevdev.InstagramBasicDisplay

And so began Solrevdev.InstagramBasicDisplay, a netstandard2.0 library that consumes the new Instagram Basic Display API.

It is also available on nuget so you can add this functionality to your .NET projects.

Getting Started

So, to consume the Instagram Basic Display API you will need to generate an Instagram client_id and client_secret by creating a Facebook app and configuring it so that it knows your https only redirect_url.

Facebook and Instagram Setup

Before you begin you will need to create an Instagram client_id and client_secret by creating a Facebook app and configuring it so that it knows your redirect_url. There are full instructions here.

Step 1 - Create a Facebook App

Go to developers.facebook.com, click My Apps, and create a new app. Once you have created the app and are in the App Dashboard, navigate to Settings > Basic, scroll the bottom of page, and click Add Platform.

Choose Website, add your website’s URL, and save your changes. You can change the platform later if you wish, but for this tutorial, use Website

Step 2 - Configure Instagram Basic Display

Click Products, locate the Instagram product, and click Set Up to add it to your app.

Click Basic Display, scroll to the bottom of the page, then click Create New App.

In the form that appears, complete each section using the guidelines below.

Display Name Enter the name of the Facebook app you just created.

Valid OAuth Redirect URIs Enter https://localhost:5001/auth/oauth/ for your redirect_url that will be used later. HTTPS must be used on all redirect URLs

Deauthorize Callback URL Enter https://localhost:5001/deauthorize

Data Deletion Request Callback URL Enter https://localhost:5001/datadeletion

App Review Skip this section for now since this is just a demo.

Step 3 - Add an Instagram Test User

Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.

Open a new web browser and go to www.instagram.com and sign in to your Instagram account that you just invited. Navigate to (Profile Icon) > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.

You can view these invitations and applications by navigating to (Profile Icon) > Edit Profile > Apps and Websites

Facebook and Instagram Credentials

Navigate to My Apps > Your App Name > Basic Display

Make a note of the following Facebook and Instagram credentials:

Instagram App ID This is going to be known as client_id later

Instagram App Secret This is going to be known as client_secret later

Client OAuth Settings > Valid OAuth Redirect URIs This is going to be known as redirect_url later

go here for a full size screenshot

Installation

Now that you have an Instagram client_id and client_secret to use we can now create a new dotnet project and add the Solrevdev.InstagramBasicDisplay package to it.

Create a .NET Core Razor Pages project.

dotnet new webapp -n web
cd web

To install via nuget using the dotnet cli

dotnet add package Solrevdev.InstagramBasicDisplay

To install via nuget using Visual Studio / Powershell

Install-Package Solrevdev.InstagramBasicDisplay

App Configuration

In your .NET Core library or application create an appsettings.json file if one does not already exist and fill out the InstagramSettings section with your Instagram credentials such as client_id, client_secret and redirect_url as mentioned above.

appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "InstagramCredentials": {
    "Name": "friendly name or your app name can go here - this is passed to Instagram as the user-agent",
    "ClientId": "client-id",
    "ClientSecret": "client-secret",
    "RedirectUrl": "https://localhost:5001/auth/oauth"
  }
}

Common Uses

Now that you have a .NET Core Razor Pages website and the Solrevdev.InstagramBasicDisplay library has been added you can achieve some of the following common uses.

Get an Instagram User Access Token and permissions from an Instagram user

First, you send the user to Instagram to authenticate using the Authorize method, they will be redirected to the RedirectUrl set in InstagramCredentials so ensure that is set-up correctly in the Instagram app settings page.

Instagram will redirect the user on successful login to the RedirectUrl page you configured in InstagramCredentials and this is where you can call AuthenticateAsync which exchanges the Authorization Code for a short-lived Instagram user access token or optionally a long-lived Instagram user access token.

You then have access to an OAuthResponse which contains your access token and a user which can be used to make further API calls.

private readonly InstagramApi _api;

public IndexModel(InstagramApi api)
{
    _api = api;
}

public ActionResult OnGet()
{
    var url = _api.Authorize("anything-passed-here-will-be-returned-as-state-variable");
    return Redirect(url);
}

Then in your RedirectUrl page

private readonly InstagramApi _api;
private readonly ILogger<IndexModel> _logger;

public IndexModel(InstagramApi api, ILogger<IndexModel> logger)
{
    _api = api;
    _logger = logger;
}

// code is passed by Instagram, the state is whatever you passed in _api.Authorize sent back to you
public async Task<IActionResult> OnGetAsync(string code, string state)
{
    // this returns an access token that will last for 1 hour - short-lived access token
    var response = await _api.AuthenticateAsync(code, state).ConfigureAwait(false);

    // this returns an access token that will last for 60 days - long-lived access token
    // var response = await _api.AuthenticateAsync(code, state, true).ConfigureAwait(false);

    // store in session - see System.Text.Json code below for sample
    HttpContext.Session.Set("Instagram.Response", response);
}

If you want to store the OAuthResponse in HttpContext.Session you can use the new System.Text.Json namespace like this

using System.Text.Json;
using Microsoft.AspNetCore.Http;
public static class SessionExtensions
{
    public static void Set<T>(this ISession session, string key, T value)
    {
        session.SetString(key, JsonSerializer.Serialize(value));
    }

    public static T Get<T>(this ISession session, string key)
    {
        var value = session.GetString(key);
        return value == null ? default : JsonSerializer.Deserialize<T>(value);
    }
}

Get an Instagram user’s profile

private readonly InstagramApi _api;
private readonly ILogger<IndexModel> _logger;

public IndexModel(InstagramApi api, ILogger<IndexModel> logger)
{
    _api = api;
    _logger = logger;
}

// code is passed by Instagram, the state is whatever you passed in _api.Authorize sent back to you
public async Task<IActionResult> OnGetAsync(string code, string state)
{
    // this returns an access token that will last for 1 hour - short-lived access token
    var response = await _api.AuthenticateAsync(code, state).ConfigureAwait(false);

    // this returns an access token that will last for 60 days - long-lived access token
    // var response = await _api.AuthenticateAsync(code, state, true).ConfigureAwait(false);

    // store and log
    var user = response.User;
    var token = response.AccessToken;

    _logger.LogInformation("UserId: {userid} Username: {username} Media Count: {count} Account Type: {type}", user.Id, user.Username, user.MediaCount, user.AccountType);
    _logger.LogInformation("Access Token: {token}", token);
}

Get an Instagram user’s images, videos, and albums

private readonly InstagramApi _api;
private readonly ILogger<IndexModel> _logger;

public List<Media> Media { get; } = new List<Media>();

public IndexModel(InstagramApi api, ILogger<IndexModel> logger)
{
    _api = api;
    _logger = logger;
}

// code is passed by Instagram, the state is whatever you passed in _api.Authorize sent back to you
public async Task<IActionResult> OnGetAsync(string code, string state)
{
    // this returns an access token that will last for 1 hour - short-lived access token
    var response = await _api.AuthenticateAsync(code, state).ConfigureAwait(false);

    // this returns an access token that will last for 60 days - long-lived access token
    // var response = await _api.AuthenticateAsync(code, state, true).ConfigureAwait(false);

    // store and log
    var media = await _api.GetMediaListAsync(response).ConfigureAwait(false);

    _logger.LogInformation("Initial media response returned with [{count}] records ", media.Data.Count);

    _logger.LogInformation("First caption: {caption}, First media url: {url}",media.Data[0].Caption, media.Data[0].MediaUrl);

    //
    //  toggle the following boolean for a quick and dirty way of getting all a user's media.
    //
    if(false)
    {
        while (!string.IsNullOrWhiteSpace(media?.Paging?.Next))
        {
            var next = media?.Paging?.Next;
            var count = media?.Data?.Count;
            _logger.LogInformation("Getting next page [{next}]", next);

            media = await _api.GetMediaListAsync(next).ConfigureAwait(false);

            _logger.LogInformation("next media response returned with [{count}] records ", count);

            // add to list
            Media.Add(media);
        }

        _logger.LogInformation("The user has a total of {count} items in their Instagram feed", Media.Count);
    }
}

Exchange a short-lived access token for a long-lived access token

private readonly InstagramApi _api;
private readonly ILogger<IndexModel> _logger;

public IndexModel(InstagramApi api, ILogger<IndexModel> logger)
{
    _api = api;
    _logger = logger;
}

// code is passed by Instagram, the state is whatever you passed in _api.Authorize sent back to you
public async Task<IActionResult> OnGetAsync(string code, string state)
{
    // this returns an access token that will last for 1 hour - short-lived access token
    var response = await _api.AuthenticateAsync(code, state).ConfigureAwait(false);
    _logger.LogInformation("response access token {token}", response.AccessToken);

    var longLived = await _api.GetLongLivedAccessTokenAsync(response).ConfigureAwait(false);
    _logger.LogInformation("longLived access token {token}", longLived.AccessToken);
}

Refresh a long-lived access token for another long-lived access token

private readonly InstagramApi _api;
private readonly ILogger<IndexModel> _logger;

public IndexModel(InstagramApi api, ILogger<IndexModel> logger)
{
    _api = api;
    _logger = logger;
}

// code is passed by Instagram, the state is whatever you passed in _api.Authorize sent back to you
 public async Task<IActionResult> OnGetAsync(string code, string state)
{
    // this returns an access token that will last for 1 hour - short-lived access token
    var response = await _api.AuthenticateAsync(code, state).ConfigureAwait(false);
    _logger.LogInformation("response access token {token}", response.AccessToken);

    var longLived = await _api.GetLongLivedAccessTokenAsync(response).ConfigureAwait(false);
    _logger.LogInformation("longLived access token {token}", longLived.AccessToken);

    var another = await _api.RefreshLongLivedAccessToken(response).ConfigureAwait(false);
    _logger.LogInformation("response access token {token}", another.AccessToken);
}

Sample Code

For more documentation and a sample ASP.Net Core Razor Pages web application visit the samples folder in the GitHub repo

Success 🎉

In my last post I deployed the standard Blazor template over to vercel static site hosting.

In the standard template, the FetchData component gets its data from a local sample-data/weather.json file via an HttpClient.

forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");

I wanted to upgrade this by replacing that call to the local json file with a call to an ASP.NET Core Web API backend.

Unfortunately unlike in the version 1 days of zeit where you could deploy Docker based apps to them vercel now offer serverless functions instead but do not support .NET.

So, as an alternative, I looked at fly.io.

I first used them in 2017 before GitHub supported HTTPS/SSL for custom domains by using them as middleware to provide this service.

Since then they now support deploying Docker based app servers which works in pretty much the same way as zeit used to.

Perfect!

Backend

So, the plan was to create a backend to replace the weather.json file, deploy and host it via Docker on fly.io and point my vercel hosted blazor website to that!

First up I created a backend web API using the dotnet new template and added that to my solution.

Fortunately, the .NET Core Web API template comes out of the box with a /weatherforecast endpoint that returns the same shape data as the sample_data/weather.json file in the frontend.

dotnet new webapi -n backend
dotnet sln add backend/backend.csproj

Next, I needed to tell my web API backend that another domain (my vercel hosted blazor app) would be connecting to it. This would fix any CORS related error messages.

So in backend/Program.cs

private readonly string _myAllowSpecificOrigins = "_myAllowSpecificOrigins";

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy(name: _myAllowSpecificOrigins,
                        builder =>
                        {
                            builder.WithOrigins("https://blazor.now.sh",
                                                "https://blazor.solrevdev.now.sh",
                                                "https://localhost:5001",
                                                "http://localhost:5000");
                        });
    });

    services.AddControllers();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseCors(policy =>
                policy
                    .WithOrigins("https://blazor.now.sh",
                                    "https://blazor.solrevdev.now.sh",
                                    "https://localhost:5001",
                                    "http://localhost:5000")
                    .AllowAnyMethod()
                    .WithHeaders(HeaderNames.ContentType));

    app.UseAuthorization();

    app.UseEndpoints(endpoints => endpoints.MapControllers());
}

Docker

Now that the backend project is ready it was time to deploy it to https://fly.io/.

From a previous project, I already had a handy dandy working Dockerfile I could re-use so making sure I replaced the name of dotnet dll and ensured I was pulling a recent version of .NET Core SDK

Dockerfile

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build
# update the debian based system
RUN apt-get update && apt-get upgrade -y
# install my dev dependacies inc sqllite and curl and unzip
RUN apt-get install -y sqlite3
RUN apt-get install -y libsqlite3-dev
RUN apt-get install -y curl
RUN apt-get install -y unzip
# not sure why im deleting these
RUN rm -rf /var/lib/apt/lists/*

# add debugging in a docker tooling - install the dependencies for Visual Studio Remote Debugger
RUN apt-get update && apt-get install -y --no-install-recommends unzip procps
# install Visual Studio Remote Debugger
RUN curl -sSL https://aka.ms/getvsdbgsh | bash /dev/stdin -v latest -l ~/vsdbg
WORKDIR /app/web

# layer and build
COPY . .
WORKDIR /app/web
RUN dotnet restore

# layer adding linker then publish after tree shaking
FROM build AS publish
WORKDIR /app/web
RUN dotnet publish -c Release -o out

# final layer using smallest runtime available
FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS runtime
WORKDIR /app/web
COPY --from=publish app/web/out ./

# expose port and execute aspnetcore app
EXPOSE 5000
ENV ASPNETCORE_URLS=http://+:5000
ENTRYPOINT ["dotnet", "backend.dll"]

The lines of code in that Dockerfile that were really important for fly.io to work were

EXPOSE 5000
ENV ASPNETCORE_URLS=http://+:5000

I also created a .dockerignorefile

bin/
obj/

I had already installed and authenticated the flyctl command-line tool, head over to https://fly.io/docs/speedrun/ for a simple tutorial on how to get started.

After some trial and error and some fantastic help from support, I worked out that I needed to override the port that fly.io used so that it matched my .NET Core Web API project.

I created an app using port 5000 by first navigating into the backend project so that I was in the same location as the csproj file.

cd backend
flyctl apps create -p 5000

You should find a new fly.toml file has been added to your project folder

app = "blue-dust-2805"

[[services]]
  internal_port = 5000
  protocol = "tcp"

  [services.concurrency]
    hard_limit = 25
    soft_limit = 20

  [[services.ports]]
    handlers = ["http"]
    port = "80"

  [[services.ports]]
    handlers = ["tls", "http"]
    port = "443"

  [[services.tcp_checks]]
    interval = 10000
    timeout = 2000

Make a mental note of the app name you will see it again in the final hostname, also note the port number that we overrode in the previous step.

Now to deploy the app…

flyctl deploy

And get the deployed endpoint URL back to use in the front end…

flyctl info

The flyctl info command will return a deployed endpoint along with a random hostname such as

flyctl info
App
  Name = blue-dust-2805
  Owner = your fly username
  Version = 10
  Status = running
  Hostname = blue-dust-2805.fly.dev

Services
  PROTOCOL PORTS
  TCP 80 => 5000 [HTTP]
             443 => 5000 [TLS, HTTP]

IP Addresses
  TYPE ADDRESS CREATED AT
  v4 77.83.141.66 2020-05-17T20:49:30Z
  v6 2a09:8280:1:c3b:5352:d1d5:9afd:fb65 2020-05-17T20:49:31Z

Now that the app is deployed you can view it by taking the hostname blue-dust-2805.fly.dev and appending the weather forecast endpoint at the end.

For example https://blue-dust-2805.fly.dev/weatherforecast

If all has gone well you should see some random weather!

Login to you fly.io control panel to see some stats

Frontend

Next up it was just a case of replacing the frontend’s call to the local json file with the backend endpoint.

builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri("https://blue-dust-2805.fly.dev") });

A small change to the FetchData.razor page.

protected override async Task OnInitializedAsync()
{
    _forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("weatherforecast");
}

Re-deploy that to vercel by navigating to the root of our solution and running the deploy.sh script or manually via

cd ../../
dotnet publish -c Release
now --prod frontend/bin/Release/netstandard2.1/publish/wwwroot/

Test that everything has worked by navigating to the FetchData endpoint of our frontend. In my case https://blazor.now.sh/fetchdata

GitHub Actions

As a final nice to have fly.io have GitHub action we can use to automatically build and deploy our Dockerfile based .NET Core Web API on each push or pull request to GitHub.

Create an auth token in your project

cd backend
flyctl auth token

Go to your repository on GitHub and select Setting then to Secrets and create a secret called FLY_API_TOKEN with the value of the token we just created.

Next, create the file .github/workflows/fly.yml

name: Fly Deploy
on:
    push:
        branches:
            - master
            - release/*
    pull_request:
        branches:
            - master
            - release/*
env:
  FLY_API_TOKEN: $
  FLY_PROJECT_PATH: backend
jobs:
  deploy:
      name: Deploy app
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - uses: superfly/flyctl-actions@1.0
          with:
            args: "deploy"

Notice that in that file we have told the GitHub action to use the FLY_API_TOKEN we just setup.

Also because my fly.toml is not in the solution root but in the backend folder I can tell fly to look for it by setting the environment variable FLY_PROJECT_PATH

FLY_API_TOKEN: $
FLY_PROJECT_PATH: backend

Also, make sure the fly.toml is not in your .gitignore file.

And so with that, every time I accept a pull request or I push to master my backend will get deployed to fly.io!

The new code is up on GitHub at https://github.com/solrevdev/blazor-on-vercel

Success 🎉

Update - I did deploy an ASP.NET Core Web API backend via Docker to fly.io

So, I decided it was time to play with Blazor WebAssembly which is in preview for ASP.NET Core 3.1.

I decided I wanted to publish the sample on Zeit’s now.sh platform which has now been rebranded Vercel

If you want to follow along this was my starting point

I use Visual Studio Code and for IDE support with vscode you will want to follow the instructions on this page

Firstly make sure you have .NET Core 3.1 SDK installed.

Optionally install the Blazor WebAssembly preview template by running the following command:

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4

Make any changes to the template that you like then when you are ready to publish enter the following command

dotnet publish -c Release

This will build and publish the assets you can deploy to the folder:

bin/Release/netstandard2.1/publish/wwwroot

Make sure you have the now.sh command line tool installed.

npm i -g vercel
now login

Navigate to this folder and run the now command line tool for deploying.

cd bin/Release/netstandard2.1/publish/wwwroot
now --prod

Now you have deployed you app to vercel/now.sh.

This is my deployment https://blazor.now.sh/

You may notice that if you navigate to a page like https://blazor.now.sh/counter then hit F5 to reload you get a 404 not found error.

To fix this we need to create a configuration file to tell vercel to redirect 404’s to index.html.

Create a file in your project named vercel.json that will match the publish path

publish/wwwroot/vercel.json

Use the following vercel.json configuration to tell the now.sh platform to redirect 404’s to the index.html page and let Blazor handle the routing

{
    "version": 2,
    "routes": [{"handle": "filesystem"}, {"src": "/.*", "dest": "/index.html"}]
}

Next we need to tell .NET Core to publish that file so open your .csproj file and add the following

  
     Include="publish/wwwroot/vercel.json"  CopyToPublishDirectory="PreserveNewest" />
  

Finally you can create a deploy.sh file that can publish and deploy all in one command.

#!/usr/bin/env bash

dotnet publish -c Release
now --prod bin/Release/netstandard2.1/publish/wwwroot/

To run this make sure it has the correct permissions

chmod +x deploy.sh
./deploy.sh

And with that I can deploy Blazor WebAssembly to vercel’s now.sh platform at https://blazor.now.sh/

The code is now up on GitHub at https://github.com/solrevdev/blazor-on-vercel

Next up I am thinking of deploying a Web API backend for it to talk to.

Maybe a docker based deployment over at fly.io?

Update - I did deploy an ASP.NET Core Web API backend via Docker to fly.io

Success 🎉

A couple of days ago Canonical the custodians of the Ubuntu Linux distribution released the latest long term support version of their desktop Linux operating system.

Codenamed Focal Fossa the 20.04 LTS release is the latest and greatest version. For more information about its new features head over to their blog.

For us .NET Core developers each new release of Ubuntu generally means that whenever we need to update the .NET Core version we need to alter our package manager location so that we get the correct version.

Microsoft has now updated the dedicated page titled “Ubuntu 20.04 Package Manager - Install .NET Core” which has instructions on how to use a package manager to install .NET Core on Ubuntu 20.04.

For those looking for a TLDR; here is the info copied from that page.

Microsoft repository key and feed needed.

wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb

Install the .NET Core SDK

sudo apt-get update
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-3.1

Install the ASP.NET Core runtime

sudo apt-get update
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install aspnetcore-runtime-3.1

Install the .NET Core runtime

sudo apt-get update
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-runtime-3.1

I have not pulled the trigger yet. I am waiting for things to settle down and for my 19.10 distribution to tell me its time to upgrade.

However, for those who want to upgrade now and cannot wait you can force the issue by the following.

Press ALT + F2 followed by

update-manager -cd

The following dialog will then appear allowing you to then upgrade now.

Success 🎉

Today NET Core 3.1.200 SDK - March 16, 2020 was installed on my development and production boxes.

With a new release, I tend to also install the Windows hosting bundle associated with each release, and in this case, it was ASP.NET Core Runtime 3.1.2

However, on installing it, the next request to the website showed a 503 Service Unavailable error:

Debugging the w3 process in Visual Studio showed this error:

Unhandled exception at 0x53226EE9 (aspnetcorev2.dll) in w3wp.exe: 0xC000001D: Illegal Instruction.

Event Viewer had entries such as this:

I tried IISRESET and uninstalling the hosting bundle but that did not help.

I noticed that the application pool was stopped for my website, Restarting it would result in the same unhandled exception as above.

As a troubleshooting exercise, I created a new application pool and pointed my website to that one and deleted the old one.

This seems to fixed things for now.

Success? 🎉

A static HTML website I look after is hosted on a Windows Server 2012R2 instance running IIS, it makes use of a web.config file as it has some settings that allow this site to be served from behind an Amazon Web Services Elastic Load Balancer.

Today it kept crashing with the thousands of these events in event viewer:

Event code: 3008
Event message: A configuration error has occurred.
Event time: 05/03/2020 09:15:49
Event time (UTC): 05/03/2020 09:15:49
Event ID: 83032f1dc8d9486e95dfc13f9f88a22d
Event sequence: 1
Event occurrence: 1
Event detail code: 0
Application information:
    Application domain: /LM/W3SVC/6/ROOT-1789-132278733487264657
    Trust level: Full
    Application Virtual Path: /
    Application Path: C:\Sites\your-website.com\static\
    Machine name: PRODUCTION-WEB-
Process information:
    Process ID: 2104
    Process name: w3wp.exe
    Account name: IIS APPPOOL\your-website.com
Exception information:
    Exception type: ConfigurationErrorsException
    Exception message: Unrecognized attribute 'targetFramework'. Note that attribute names are case-sensitive. (C:\Sites\your-website.com\static\web.config line 4)
Request information:
    Request URL: http://www.your-website.com/default.aspx
    Request path: /default.aspx
    User host address: 172.31.38.122
    User:
    Is authenticated: False
    Authentication Type:
    Thread account name: IIS APPPOOL\your-website.com
Thread information:
    Thread ID: 5
    Thread account name: IIS APPPOOL\your-website.com
    Is impersonating: False
    Stack trace:
   at System.Web.HttpRuntime.HostingInit(HostingEnvironmentFlags hostingFlags)
Custom event details:

The fix was to change the websites application pool to use .NET CLR Version 4 rather than .NET CLR Version 2

So, open IIS, choose Application Pools from the left-hand navigation, Choose your app pool and click basic settings to open the dialog to change which .NET CLR Version to use.

Once this was done the errors stopped and the site stopped crashing

Success 🎉

When you build ASP.NET Core websites locally, you can view your local site under HTTPS/SSL, go read this article by Scott Hanselman for more information.

For the most part, this works great out of the box.

However, I am building a multi-tenant application as in I make use of subdomains such as https://www.mywebsite.com and https://customer1.mywebsite.com.

So naturally, when I develop locally I want to visit https://www.localhost:5001/ and https://customer1.localhost:5001/

Now you can do this out of the box you just need to add this to your hosts file.

#macos / linux
cat /etc/hosts

127.0.0.1 www.localhost
127.0.0.1 customer1.localhost

#windows
type C:\Windows\System32\drivers\etc\hosts

127.0.0.1 www.localhost
127.0.0.1 customer1.localhost

However when you visit either www. or customer1. you will get an SSL cert warning from your browser as the SSL cert that kestrel and/or IISExpress uses only covers the apex localhost domain.

Yesterday I posted on twitter asking for help and the replies I got pointed me in the right direction.

mkcert to the rescue

The answer is to use some software called mkcert to generate a .pfx certificate and configure kestrel to use this certificate when in development.

First install mkcert

#macOS
brew install mkcert
brew install nss # if you use Firefox

#linux
sudo apt install libnss3-tools
    -or-
sudo yum install nss-tools
    -or-
sudo pacman -S nss
    -or-
sudo zypper install mozilla-nss-tools

brew install mkcert

#windows
choco install mkcert
scoop bucket add extras
scoop install mkcert

Then create a new local certificate authority.

mkcert -install
Using the local CA at "/Users/solrevdev/Library/Application Support/mkcert" ✨
The local CA is already installed in the system trust store! 👍
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

Create .pfx certificate

Now create your certificate covering the subdomains you want to use

#navigate to your website root
cd src/web/
#remove any earlier failed attempts!
rm kestrel.pfx
#create the cert adding each subdomain you want to use
mkcert -pkcs12 -p12-file kestrel.pfx www.localhost customer1.localhost localhost
#gives this output
Using the local CA at "/Users/solrevdev/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "www.localhost"
 - "customer1.localhost"
 - "localhost"

The PKCS#12 bundle is at "kestrel.pfx" ✅

The legacy PKCS#12 encryption password is the often hardcoded default "changeit" ℹ️

Now ensure you copy the .pfx file over when in development mode.

web.csproj

  Condition="'$(Configuration)' == 'Debug' ">
     Update="kestrel.pfx" CopyToOutputDirectory="PreserveNewest" Condition="Exists('kestrel.pfx')" />
  

Now configure kestrel to use this certificate when in development not production

You have two appsettings files, one for development and one for every other environment. Open up your development one and tell kestrel to use your newly created pfx file when not in production.

appsettings.Development.json

{
    "Logging": {
        "LogLevel": {
            "Default": "Debug",
            "Microsoft": "Warning",
            "Microsoft.Hosting.Lifetime": "Warning"
        }
    },
    "Kestrel": {
        "Certificates": {
            "Default": {
                "Path": "kestrel.pfx",
                "Password": "changeit"
            }
        }
    }
}

And with that, I was done. If you need to add more subdomains you will need to add them to your hosts file and recreate your pfx file by redoing the instructions above.

Success 🎉

Today, I fixed a bug where session cookies were not being persisted in an ASP.Net Core Razor Pages application.

The answer was in the documentation.

To quote that page:

The order of middleware is important. Call UseSession after UseRouting and before UseEndpoints

So my code which did work in the past, but probably before endpoint routing was introduced was this:

app.UseSession();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapRazorPages();
});

And the fix was to move UseSession below UseRouting

app.UseRouting();
app.UseSession();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapRazorPages();
});

Success 🎉

Another quick one for today, Every now and again my intellisense gets confused in Visual Studio Code displaying errors and warnings that should not exist.

The fix for this is to restart the Omnisharp process.

So first off get the commmand pallette up:

Ctrl+Shift+P

Then type:

>omnisharp:restart omnisharp

Everything should then go back to normal.

Success 🎉

I am in the process of building and publishing my first ever NuGet package and while I am not ready to go into that today I can post a quick tip about fixing an error I had with a library I am using to help with git versioning.

The library is Nerdbank.GitVersioning and the error I got was when I tried to upgrade from an older version to the current one.

The error?

The "Nerdbank.GitVersioning.Tasks.GetBuildVersion" task could not be loaded from the assembly

Assembly with same name is already loaded Confirm that the <UsingTask> declaration is correct, that the assembly and all its dependencies are available, and that the task contains a public class that implements Microsoft.Build.Framework.ITask

And the fix was to run the following command, thanks to this issue over on GitHub

dotnet build-server shutdown
nbgv install

Success 🎉

A very very quick one today.

Sometimes when developing on macOS I want to view hidden files in Finder but most of the time it is just extra noise so I like them hidden.

There is a keyboard shortcut to toggle the visibility of these files.

cmd + Shift + .

(thanks to osx daily for the tip and image.)

This keyboard shortcut will show hidden files or hide them if shown…

Success 🎉

Today I was writing a Windows batch script that would at some stage run git pull.

When I ran the script it paused and displayed the message:

Enter passphrase for key: 'c/Users/Administrator/.ssh/id_rsa'

No matter how many times I entered the passphrase Windows would not remember it and the prompt would appear again.

So, after some time on Google and some trial and error, I was able to fix the issue and so for anyone else that has the same issue or indeed for me from the future here are those steps.

Enable the OpenSSH Authentication Agent service and make it start automatically.

Add your SSH key to the agent with ssh-add at C:\Users\Administrator\.ssh.

Test git integration by doing a git pull from the command line and enter the passphrase

Enter your passphrase when asked during a git pull command.

Add an environment variable for GIT_SSH

setx GIT_SSH C:\Windows\System32\OpenSSH\ssh.exe

Once these steps were done all was fine and no prompt came up again.

Success 🎉

In this post, I’ll address a common issue many developers face when working with MySQL on macOS: the “MySQL server has gone away” error. This error can be frustrating, but it’s usually straightforward to fix.

Understanding the Error

When connecting to MySQL via the terminal using mysql -u root, you might encounter the following error messages:

ERROR 2006 (HY000): MySQL server has gone away
No connection. Trying to reconnect...
ERROR 2013 (HY000): Lost connection to MySQL server at 'reading initial communication packet', system error: 102
ERROR:
Can't connect to the server

Possible Causes

This error typically occurs due to:

• Server timeout settings
• Network issues
• Incorrect configurations

Step-by-Step Solution

Step 1: Restart MySQL Service

One of the simplest troubleshooting steps is to restart the MySQL service. This can resolve many transient issues.

sudo killall mysqld
mysql.server start

Step 2: Check MySQL Configuration

Ensure your MySQL configuration (my.cnf or my.ini) is set up correctly. Key settings to check include:

• max_allowed_packet
• wait_timeout
• interactive_timeout

Step 3: Monitor Logs

Check MySQL logs for any additional error messages that might give more context to the issue. Logs are typically located in /usr/local/var/mysql.

Step 4: Verify Network Stability

Ensure your network connection is stable, as intermittent connectivity can cause these types of errors.

Additional Tips

• Regular Maintenance: Regularly check and maintain your MySQL server to prevent such issues.
• Backup Data: Always backup your data before making any significant changes.

By following these steps, you should be able to resolve the “MySQL server has gone away” error and continue your development smoothly.

Success 🎉

Building server-rendered HTML websites is a nice experience these days with ASP.NET Core.

The new Razor Pages paradigm is a wonderful addition and improvement over MVC in that it tends to keep all your feature logic grouped rather than having your logic split over many folders.

The standard dotnet new template does a good job of giving you what you need to get started.

It bundles in bootstrap and jquery for you which is great but it’s not obvious how you manage to add new client-side dependencies or indeed how to upgrade existing ones such as bootstrap and jquery.

In the dark old days, Bower used to be the recommended way but that has since been depreacted in favour of a new tool called LibMan.

LibMan is like most things from Microsoft these days open source.

Designed as a replacement for Bower and npm, LibMan helps to find and fetch client-side libraries from most external sources or any file system library catalogue.

There are tutorials for how to use LibMan with ASP.NET Core in Visual Studio and to use the LibMan CLI with ASP.NET Core.

The magic is done via a file in your project root called libman.json which describes what files, from where and to where they need to go basically.

I needed to upgrade the version of jquery and bootstrap in a new dotnet new project so here is the libman.json file that will replace bootstrap and jquery bundled with ASP.NET Core with the latest versions.

I was using Visual Studio at the time and this will manage this for you but if like me who mostly codes in Visual Studio Code on macOS or Linux then you can achieve the same result by installing and using the LibMan Cli.

Success 🎉

I mostly code in Visual Studio Code Insiders on either macOS or Linux but on the occasion that I develop on windows, I do like to use the old faithful Visual Studio.

And today I fixed a slight annoyance that I have with Visual Studio 2019.

If you cut or copy on a blank line accidentally which does happen you will lose your clipboard contents.

To fix this in the search bar at the top enter Apply Cut or Copy to blank lines when there is no selection and open its’s dialog.

Uncheck that box for your language (or all languages as I did).

Success 🎉

Back in the older classic windows only .NET Framework days, I would use a cool framework called TopShelf to help turn a console application during development into a running windows service in production.

Today instead I was able to install and run a windows service by modifying a .NET Core Worker project by just using .NET Core natively.

Also, I was able to add some logging to the Windows Event Viewer Application Log.

First, I created a .NET Core Worker project:

mkdir tempy && cd $_
dotnet new worker

Then I added some references:

dotnet add package Microsoft.Extensions.Hosting
dotnet add package Microsoft.Extensions.Hosting.WindowsServices
dotnet add package Microsoft.Extensions.Logging.EventLog

Next up I made changes to Program.cs, In my project I am adding a HttpClient to make external Web Requests to an API.

public static class Program
{
    public static void Main(string[] args)
    {
        var builder = CreateHostBuilder(args);
        builder.ConfigureServices(services =>
        {
            services.AddHttpClient();
        });

        var host = builder.Build();
        host.Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .UseWindowsService()
            .ConfigureLogging((_, logging) => logging.AddEventLog())
            .ConfigureServices((_, services) => services.AddHostedService<Worker>());
}

The key line for adding Windows Services support is :

.UseWindowsService()

Logging to Event Viewer

I also wanted to log to the Application Event Viewer log so notice the line:

.ConfigureLogging((_, logging) => logging.AddEventLog())

Now for a little gotcha, this will only log events Warning and higher so the Worker template’s logger.LogInformation() statements will display when debugging in the console but not when installed as a windows service.

To fix this make this change to appsettings.json, note the EventLog section where the levels have been dialled back down to Information level.

{
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft": "Warning",
            "Microsoft.Hosting.Lifetime": "Information"
        },
        "EventLog": {
            "LogLevel": {
                "Default": "Information",
                "Microsoft.Hosting.Lifetime": "Information"
            }
        }
    }
}

Publishing and managing the service

So with this done, I then needed to first publish, then install, start and have means to stop and uninstall the service.

I was able to manage all of this from the command line, using the SC tool (Sc.exe) that should already be installed on windows for you and be in your path already.

Publish:

cd C:\PathToSource\
dotnet publish -r win-x64 -c Release -o C:\PathToDestination

Install:

sc create "your service name" binPath=C:\PathToDestination\worker.exe

Start:

sc start "your service name"

Stop:

sc stop "your service name"

Uninstall:

sc delete "your service name"

Once I saw that all was well I was able to dial back the logging to the Event Viewer by making a change to appsettings.json, In the EventLog section I changed the levels back up to Warning level.

This means that anything important will indeed get logged to the Windows Event Viewer but most Information level noise will not.

Success 🎉

Today I came across a fantastic command line trick.

Normally when I want to create a directory in the command line it takes multiple commands to start working in that directory.

For example:

mkdir tempy
cd tempy

Well, that can be shortened to a one-liner!

mkdir tempy && cd $_

🤯

This is why I love software development.

It does not matter how long you have been doing it you are always learning something new!

Success 🎉

I have started to cross-post to the Dev Community website as well as on my solrevdev blog.

A previous post about Timers in .NET received an interesting reply from Katie Nelson who asked about what do do with Cancellation Tokens.

TimerCallBack

The System.Threading.Timer class has been in the original .NET Framework almost from the very beginning and the TimerCallback delegate has a method signature that does not handle CancellationTokens nativly.

Trial and error

So, I span up a new dotnet new worker project which has StartAsync and StopAsync methods that take in a CancellationToken in their method signatures and seemed like a good place to start.

After some tinkering with my original class and some research on StackOverflow, I came across this post which I used as the basis as a new improved Timer.

Improvements

Firstly I was able to improve on my original TimerTest class by replacing the field level locking object combined with its’s calls to Monitor.TryEnter(_locker) by using the Timer’s built-in Change method.

Next up I modified the original TimerCallback DoWork method so that it called my new DoWorkAsync(CancellationToken token) method that with a CancellationToken as a parameter does check for IsCancellationRequested before doing my long-running work.

The class is a little more complicated than the original but it does handle ctrlc gracefully.

Source

So, here is the new and improved Timer in a new dotnet core background worker class.

And here is the full gist with the rest of the project files for future reference.

Success 🎉

A current C# project of mine required a timer where every couple of seconds a method would fire and a potentially fairly long-running process would run.

With .NET we have a few built-in options for timers:

System.Web.UI.Timer

Available in the .NET Framework 4.8 which performs asynchronous or synchronous Web page postbacks at a defined interval and was used back in the older WebForms days.

System.Windows.Forms.Timer

This timer is optimized for use in Windows Forms applications and must be used in a window.

System.Timers.Timer

Generates an event after a set interval, with an option to generate recurring events. This timer is almost what I need however this has quite a few stackoverflow posts where exceptions get swallowed.

System.Threading.Timer

Provides a mechanism for executing a method on a thread pool thread at specified intervals and is the one I decided to go with.

Issues

I came across a couple of minor issues the first being that even though I held a reference to my Timer object in my class and disposed of it in a Dispose method the timer would stop ticking after a while suggesting that the garbage collector was sweeping up and removing it.

My Dispose method looks like the first method below and I suspect it is because I am using the conditional access shortcut feature from C# 6 rather than explicitly checking for null first.

public void Dispose()
{
    // conditional access shortcut
    _timer?.Dispose();
}

public void Dispose()
{
    // null check
    if(_timer != null)
    {
        _timer.Dispose();
    }
}

A workaround is to tell the garbage collector to not collect this reference by using this line of code in timer’s elapsed method.

GC.KeepAlive(_timer);

The next issue was that my TimerTick event would fire and before the method that was being called could finish another tick event would fire.

This required a stackoverflow search where the following code fixed my issue.

// private field
private readonly object _locker = new object();

// this in TimerTick event
if (Monitor.TryEnter(_locker))
{
    try
    {
        // do long running work here
        DoWork();
    }
    finally
    {
        Monitor.Exit(_locker);
    }
}

And so with these two fixes in place, my timer work was behaving as expected.

Solution

Here is a sample class with the above code all in context for future reference

Success 🎉

Another quick one today.

I was recently listening to an episode of syntax.fm where wes bos was talking about a new site uses.tech.

This is a site that lists /uses pages detailing developer setups, gear, software and configs.

This inspired me to create my own /uses page.

Success 🎉

A quick one today.

Sometimes I will click on a link in an external application such as Mail.app (I am careful where these links come from of course!) and nothing will happen.

Well, Google Chrome will launch if it was closed when I clicked the link however the URL I clicked will not open.

Nothing, no new tab. nothing.

The fix before was to re-install Google Chrome but today I found this quick solution.

In Chrome’s URL bar enter this…

chrome://restart

This will restart all the Google Chrome processes and will generally fix this issue for a while.

Success 🎉.

Tonight has all been about trying to get rid of some ASP.Net MVC yellow screens of death (YSOD) caused by MySQL timing out.

Background

My application is a fairly old ASP.Net MVC 5 web application that used to talk to a local instance of MySQL and now has been ported the cloud (AWS) with the MySQL database migrated to use Amazon’s Aurora Serverless MySQL database service.

I have a few of these now. They suit certain workloads and my dev environments very well.

Timeouts

A page in my application is quite query heavy which wasn’t a problem but would just take a little while to load. After migrating to the AWS Aurora Serverless MySQL database I started to get some intermittent timeouts.

I would get either:

MySqlException (0x80004005): The Command Timeout expired before the operation completed

[MySqlException (0x80004005): The Command Timeout expired before the operation completed.]
 System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) +102
 System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) +64
 MySqlConnector.Protocol.Serialization.d__2.MoveNext() +690
 System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) +102
 System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) +64
 MySqlConnector.Protocol.Serialization.ProtocolUtility.ReadPacketAsync(BufferedByteReader bufferedByteReader, IByteHandler byteHandler, Func`1 getNextSequenceNumber, ProtocolErrorBehavior protocolErrorBehavior, IOBehavior ioBehavior) +191
 MySqlConnector.Protocol.Serialization.ProtocolUtility.DoReadPayloadAsync(BufferedByteReader bufferedByteReader, IByteHandler byteHandler, Func`1 getNextSequenceNumber, ArraySegmentHolder`1 previousPayloads, ProtocolErrorBehavior protocolErrorBehavior, IOBehavior ioBehavior) +61
 MySqlConnector.Protocol.Serialization.StandardPayloadHandler.ReadPayloadAsync(ArraySegmentHolder`1 cache, ProtocolErrorBehavior protocolErrorBehavior, IOBehavior ioBehavior) +54
 MySqlConnector.Core.ServerSession.ReceiveReplyAsync(IOBehavior ioBehavior, CancellationToken cancellationToken) +80
 System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) +102
 System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) +64
 MySqlConnector.Core.d__78.MoveNext() +737
 System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) +102
 System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) +64
 System.Threading.Tasks.ValueTask`1.get_Result() +80
 MySqlConnector.Core.d__2.MoveNext() +346

or:

A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond

[SocketException (0x274c): A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond]
 System.Net.Sockets.Socket.Receive(Byte[] buffer, Int32 offset, Int32 size, SocketFlags socketFlags) +94
 System.Net.Sockets.NetworkStream.Read(Byte[] buffer, Int32 offset, Int32 size) +130

[IOException: Unable to read data from the transport connection: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.]
 System.Net.Sockets.NetworkStream.Read(Byte[] buffer, Int32 offset, Int32 size) +290
 System.Net.FixedSizeReader.ReadPacket(Byte[] buffer, Int32 offset, Int32 count) +32
 System.Net.Security._SslStream.StartFrameHeader(Byte[] buffer, Int32 offset, Int32 count, AsyncProtocolRequest asyncRequest) +137
 System.Net.Security._SslStream.StartReading(Byte[] buffer, Int32 offset, Int32 count, AsyncProtocolRequest asyncRequest) +171
 System.Net.Security._SslStream.ProcessRead(Byte[] buffer, Int32 offset, Int32 count, AsyncProtocolRequest asyncRequest) +270
 System.Net.Security.SslStream.Read(Byte[] buffer, Int32 offset, Int32 count) +35
 MySqlConnector.Utilities.Utility.Read(Stream stream, Memory`1 buffer) +59
 MySqlConnector.Protocol.Serialization.StreamByteHandler.g__DoReadBytesSync|6_0(Memory`1 buffer_) +101

Solution

After a quick google I was able to improve the situation for the (0x80004005): The Command Timeout exception by telling the MySQLConnector.NET driver to increase the timeout by appending this to the connection string where the timeout is in seconds:

default command timeout=120

As I also use ServiceStack.OrmLite to talk to my data layer I could instead have added OrmLiteConfig.CommandTimeout = 120; in my code but apending to the web.config seemed a neater solution.

That left the rare but repeatable A connection attempt failed because the connected party… timeout error, then when looking at some other code that talks to AWS Aurora MySQL Serverless databases I noticed the connection strings had this little gem:

SslMode=none

So I decided to try that by appending that to my connection string and it seems to have worked!

Success?!

Perhaps its an Amazon Aurora Serverless database oddity or perhaps the bug will still re-appear but for now adding SslMode=none to my connection string seems to have worked.

So, this for others and for me in the future is the full connection string I ended up using when connecting to an AWS Aurora Serverless MySQL database service:

 key="MYSQL_CONNECTION_STRING_RDS" value="Uid=userid;Password=pass;Server=auroa-mysql-rds.cluster-random.eu-west-1.rds.amazonaws.com;Port=3306;Database=dbname;default command timeout=120;SslMode=none" />

Success 🎉

Tonight a desktop notification popped up on my Ubuntu 19.10 desktop to remind me that my Arc Menu Gnome Extension had an update.

Here is the Arc Menu in action:

Normally I can update it via either Google Chrome or Firefox using the Gnome Extensions website however tonight when I tried the update an error occurred.

Literrally an Error!

Missing Menu

The menu was also missing and I tried to reinstall, reboot and all the usual turn it off and back on again tricks but to no avail.

After some duckduckgo’ing (I am trying duckduckgo as my default search these days over the evil Google), I came across the solution of restarting Gnome.

Solution

So for anyone else that needs this solution or for me if/when this happens again here is what to do when you see the error.

Press Alt+F2 to bring up a dialog then type r to restart the Gnome process.

After a refresh, the menu should be working and the error will be gone.

Success 🎉

Recently I installed a VS Code extension called GistPad about which the marketplace docs go on to say:

GistPad is a Visual Studio Code extension that allows you to manage GitHub Gists entirely within the editor. You can open, create, delete, fork, star and clone gists, and then seamlessly begin editing files as if they were local.

It is a great extension and I am using Gists way more now.

Install

To install the extension launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install vsls-contrib.gistfs

The marketplace docs are a great place to start learning about what it can do.

GistPad Interactive Playgrounds

Another neat feature is interactive playgrounds which again the marketplace docs explain :

If you’re building web applications, and want to create a quick playground environment in order to experiment with HTML, CSS or JavaScript (or Sass/SCSS, Less, Pug and TypeScript), you can right-click the Your Gists node and select New Playground or New Secret Playground. This will create a new gist, seeded with an HTML, CSS and JavaScript file, and then provide you with a live preview Webview, so that you can iterate on the code and visually see how it behaves.

I am a big fan of VueJS so I decided to spin up a new interactive playground choosing VueJS from the menu that appears.

That produces a nice hello world style template that you can use to get started with.

UK Police Data

Rather than displaying weather data or some random dummy data in my playground, I decided to use crime data for Oxfordshire from Data.Police.UK which seemed an interesting dataset to play around with.

I started by reading the docs and looking at the example request which takes pairs of lat/long coordinates to describe an area:

https://data.police.uk/api/crimes-street/all-crime?poly=52.268,0.543:52.794,0.238:52.130,0.478&date=2017-01

I then found this site which allowed me to draw an area and then get those lat/lon coordinates.

Then looking at the sample JSON response back from the API I then had enough to get started on my VueJS GistPad Interactive Playground:

[
    {
        "category": "anti-social-behaviour",
        "location_type": "Force",
        "location": {
            "latitude": "52.640961",
            "street": {
                "id": 884343,
                "name": "On or near Wharf Street North"
            },
            "longitude": "-1.126371"
        },
        "context": "",
        "outcome_status": null,
        "persistent_id": "",
        "id": 54164419,
        "location_subtype": "",
        "month": "2017-01"
    },
    {
        "category": "anti-social-behaviour",
        "location_type": "Force",
        "location": {
            "latitude": "52.633888",
            "street": {
                "id": 883425,
                "name": "On or near Peacock Lane"
            },
            "longitude": "-1.138924"
        },
        "context": "",
        "outcome_status": null,
        "persistent_id": "",
        "id": 54165316,
        "location_subtype": "",
        "month": "2017-01"
    },
    ...
]

VueJS GistPad Interactive Playground

Right-clicking in the GistPad tab in VSCode showed me a menu allowing me to create either a public or private interactive playground.

The generated template is plenty to get started with.

It gives you 3 files to edit and a preview pane that refreshes whenever you make a change which is an excellent developer inner loop.

So after some trial and error, these were my 3 files all associated with a GitHub Gist

The end result

The GistPad toolbar has an icon that allows you to open a console to view the output of your console.log statements and I soon had a working version.

If you would like to see my Police Data sample try this link:

https://gist.github.com/solrevdev/41a7adb028bb10c741153f58b36d01fe

If VueJS isn’t your thing then react.js is an option and typescript versions of these two are also available.

The extension is open for more templates to be added to it and can be submitted to them.

All in all, it’s an excellent experience.

Success 🎉

Today I noticed a windows machine that I look after had absolutely loads of versions of the dotnetcore framework installed on it.

It seemed like every major and minor version from 1.0 to the latest 3.1 and many previews in-between had been installed.

To see if your machine is the same try this command in your terminal:

dotnet --list-sdks

Microsoft has a page titled How to remove the .NET Core Runtime and SDK which explains how to remove older versions.

There is also a tool to help uninstall these versions available that is worth a look.

So I downloaded and installed the tool and ran a command to see list what could be uninstalled for me.

dotnet-core-uninstall list

The tool is smart in that it knows which versions are required by Visual Studio.

So I began to uninstall the undeeded and safe to remove dotnetcore SDK’s on the system.

I started by removing all preview versions of the dotnetcore sdk.

dotnet-core-uninstall remove --sdk --all-previews

I then re-ran the tool to ensure that these were uninstalled and to see what versions were left.

dotnet-core-uninstall list

Then I built and ran my final command to remove the older versions that were not needed by Visual Studio.

dotnet-core-uninstall remove --sdk 2.2.300 2.2.102 2.2.100 2.1.801 2.1.701 2.1.700 2.1.604 2.1.602 2.1.601 2.1.600 2.1.511 2.1.509 2.1.508 2.1.507 2.1.505 2.1.504 2.1.503 2.1.502 2.1.500 2.1.403 2.1.402 2.1.401 2.1.400 2.1.302 2.1.301 2.1.300 2.1.201 2.1.200 2.1.104 2.1.103 2.1.102 2.1.101 2.1.100 2.1.4 2.1.3 2.1.2 1.1.7

One final check…

dotnet-core-uninstall list

Success 🎉

Today I decided to take a look at my Google Analytics for this website and I had way more traffic than a site like mine ought to have.

Drilling down into the stats I noticed that most of the traffic must be from either bots or spiders.

Google Analytics does have a setting though to filter those out.

Log in to your analytics and go to View Settings where there will be a Exclude all hits from known bots and spiders checkbox.

Make sure that is checked.

Success 🎉

Background

Recently I was working on a website built before dotnetcore was even a thing. It was targeting an older version of the original .NET Framework.

I am slowly modernizing it. Firstly I upgraded the nuget packages and re-targeted it to .NET Framework version 4.8.

Next, as the solution was split into many projects I was able to migrate many of these projects to be netstandard.

The idea is that all that is left is to think about upgrading the website to a Razor Pages aspnetcore project from the classic model view controller website.

Missing SDK Build Error

While I was doing this a build script was failing.

The error was error MSB4236 The SDK Microsoft.NET.Sdk specified could not be found and is because the project now includes dotnetcore projects that need building.

The solution

After some googling the answer was to upgrade the Microsoft Visual Studio 2019 Build Tools installed on that server.

Select .NET Core Build Tools and/or Web development build tools and install

Once this was done the build worked.

Success 🎉

The other day I was going to test and debug some code on a Windows Server 2012RC machine.

When running my asp.net core 3.1 razor pages website I encountered the exception:

ERR_HTTP2_INADEQUATE_TRANSPORT_SECURITY

This site worked fine elsewhere so to try and narrow down the problem I created a brand new asp.net core website to see if it was something in my code that was the issue but I had the same error showing up in google chrome.

After some googling, I tried to reset the servers self-signed SSL certificate by using the following closing the browser in between but that had no effect:

dotnet dev-certs https --clean
dotnet dev-certs https --trust

I created a github issue and the ever-helpful @guardrex came to my rescue again and pointed me in the right direction.

It is a known bug and there is an open Github issue for it.

Workaround

So here for others and me if this happens again is my workaround:

A specific down-level machine (Windows Server 2012R2) was causing the exception and because I knew which machine, I had access to its Environment.MachineName which I use later to programmatically decide which ListenOptions.Protocols Kestrel should load.

HTTP/1 on the down-level machine but HTTP/2 elsewhere.

So, I created an appsettings.{the-environment.machinename-value-here}.json file alongside appsettings.Development.json with the following HTTP/1 settings rather than the default HTTP/2 settings that are loaded by default elsewhere.

appsettings.machinename.json

{
  "Kestrel": {
    "EndpointDefaults": {
      "Protocols": "Http1"
    }
  }
}

Then in Program.cs I modified CreateHostBuilder to read the above custom appsettings.json file.

Note the line containing: config.AddJsonFile($"appsettings.{Environment.MachineName}.json", optional: true);

Program.cs

public static IHostBuilder CreateHostBuilder (string[] args)
{
    return Host
        .CreateDefaultBuilder (args)
        .ConfigureAppConfiguration ((hostingContext, config) =>
        {
            config.AddJsonFile ($"appsettings.{Environment.MachineName}.json", optional : true);
            config.AddCommandLine (args);
        })
        .ConfigureWebHostDefaults (webBuilder => webBuilder.UseStartup<Startup> ());
}

Success 🎉

So today, I raised a GitHub issue because after I had opened the result of dotnet new mvc in VSCode the problems window would have approximately 120 issues and the code editor window would be full of red squiggles.

I was running the very latest version of dotnetcore

And the very latest version of VSCode

I had not changed anything in the .csproj file. It was fresh from running dotnet new mvc from the terminal.

So, I raised an issue over on GitHub.

Big thanks to the rapid response and answer from @filipw, who discovered that it was the homebrew cellar version of mono that was the issue and that intstalling the stable version of mono was the fix.

Success 🎉

I host an aspnetcore website on a Windows Server 2012 R2 running IIS on Amazon AWS and it’s generally fast and stable.

However, the past two nights the server has restarted unexpectedly leaving the website down with the following error message:

HTTP Error 500.30 - ANCM In-Process Start Failure

The first night a simple IISRESET command was all that was needed to get the site running again, however, last night it did the same thing.

Looking at Event Viewer I noticed the following:

Application '/LM/W3SVC/2/ROOT' with physical root 'C:\Path\To\Website' failed to load clr and managed application. Managed server didn't initialize after 120000 ms.

So, doing some googling I came across an article suggesting that An x86 app is deployed but the app pool isn’t enabled for 32-bit app.

This suggests that:

For an x86 framework-dependent deployment (<PlatformTarget>x86</PlatformTarget>), enable the IIS app pool for 32-bit apps. In IIS Manager, open the app pool's Advanced Settings and set Enable 32-Bit Applications to True.

Following those instructions the setting in IIS I changed then looked like this:

An IISRESET for good measure and the site is back up again.

I still need to see why Windows is restarting at approximately the same time each night the past few nights but if it does I hope to have solved the HTTP Error 500.30 - ANCM In-Process Start Failure error.

Success? 🎉

Every time there is a new release of dotnetcore I need to get it updated on the three environments where I develop and deploy code: macOS, Windows and Linux (Ubuntu).

Homebrew and Chocolatey update the version of dotnetcore for me automatically, sometimes there is a delay but they will eventually update them.

However, for Linux each release of dotnetcore I always have to manually intervene and install it manually.

If you follow the instructions from Microsoft you will get the following error message:

Unable to locate package dotnet-sdk-3.1

The issue is that page targets Ubuntu version 19.04 and I am running Ubuntu version 19.10 (Eoan Ermine).

So, If you are me from the future wanting to know how to get the latest version installed here is what you need to do:

curl https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
sudo apt-add-repository https://packages.microsoft.com/ubuntu/19.10/prod
sudo apt-get update
sudo apt-get install dotnet-sdk-3.1

Success 🎉

Today I think I have fixed a bug that has niggled away at me for ages. 🍪

A severe case of ‘works on my machine’

I have some code that consumes an external API that once authenticated would then, later on, make another API call to fetch the end users recent images.

This worked great…

Except for some users who reported they once logged on would not see their images.

However, for the longest time, I could not recreate this. It worked on my machine, It worked on macOS, Windows and Linux, It worked on safari, chrome and firefox. It worked on an iPhone 6s.

So, I added logging, then more logging. I even signed up for a trial Browserstack account to try as many different browsers and devices I could and still could not recreate the issue.

Then eventually while testing something else out I managed to recreate the bug using Apple’s iOS simulator using an iPhone 6S running iOS 11.2.

Being able to recreate the bug really is half the battle when it comes to bug fixing code.

So, armed with some breakpoints and a clearer idea of what was going on, I was eventually able to get the bug fixed and a working app pushed out to production.

The bug?

Well, I am not 100% sure how to explain it but the front end has some JavaScript code that uses the fetch API to call an ApiController that checks for a session variable and based on that value returns data back to the front end client.

For most browsers and my development environment, the following code was enough to make that call and get the correct data back:

fetch(this.apiUrl)

But, then for some browsers, I needed to modify the fetch API call to specify that cookies and credentials must be sent along with the request also.

This is the code that does this and is what I committed as the fix.

fetch(this.apiUrl, {
        method: 'GET',
        credentials: 'include'
      })

The documentation for fetch does point to the issue somewhat

By default, fetch won’t send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set).

Since Aug 25, 2017. The spec changed the default credentials policy to same-origin. Firefox changed since 61.0b13.

– Using Fetch

Why this was only needed for certain browsers I am unsure but my fix seems to work.

Success 🎉

Today I replaced an ageing asp.net web forms web application with a new static site which for now is just a landing page with a contact form and in doing so needed to force any insecure HTTP requests to HTTPS.

A bit of a gotcha was an error on the redirect and the issue was the HTTP_X_FORWARDED_PROTO header also needed to be forwarded along with the redirect.

For example :

 logicalGrouping="MatchAny">
    input="{HTTP_X_FORWARDED_PROTO}" pattern="^http$" />
    input="{HTTPS}" pattern="on" />

Next up, I needed to redirect any users who were going to .aspx pages that no longer existed to a custom 404 HTML page not found page.

This just needed adding to web.config like so :

  
       targetFramework="4.0" />
       mode="On" redirectMode="ResponseRewrite">
          statusCode="404" redirect="404.html" />
      
   

   
       errorMode="Custom">
          statusCode="404"/>
          statusCode="404" path="/404.html" responseMode="ExecuteURL"/>
      
   

So here it is for the next time I have to do something similar, This is the full web.config that needs to in the root folder of the site.

    
         targetFramework="4.0" />
         mode="On" redirectMode="ResponseRewrite">
             statusCode="404" redirect="404.html" />
        
    
    
         errorMode="Custom">
             statusCode="404"/>
             statusCode="404" path="/404.html" responseMode="ExecuteURL"/>
        
        
            
                 name="HTTPS Rule behind AWS Elastic Load Balancer" stopProcessing="true">
                     url="(.*)" ignoreCase="false" />
                     logicalGrouping="MatchAny">
                         input="{HTTP_X_FORWARDED_PROTO}" pattern="^http$" />
                         input="{HTTPS}" pattern="on" />
                    
                     type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Found" />
                
            
        
    

And to test that the site works I entered it onto https://www.whynopadlock.com/ which gave me the confidence that all was well.

Success 🎉

On my Ubuntu disco dingo laptop, There was a bug affecting VS Code’s IntelliSense that I had just been putting up with for a good few days.

The imported project “/usr/lib/mono/xbuild/15.0/Microsoft.Common.props” was not found

There was no such problem on macOS or Windows however as I like to write code on my Linux daily driver laptop it became harder and harder to ignore.

It’s a bug that I raised over on GitHub and while the full logs and environment details are over there in more detail, for brevity I will show what I believe is the main problem here:

[warn]: OmniSharp.MSBuild.ProjectManager
        Failed to load project file '/home/solrevdev/Code/scratch/testconsole/testconsole.csproj'.
/home/solrevdev/Code/scratch/testconsole/testconsole.csproj(1,1)
Microsoft.Build.Exceptions.InvalidProjectFileException: The imported project "/usr/lib/mono/xbuild/15.0/Microsoft.Common.props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.

Despite the error showing up in the OmniSharp logs I actually think the problem is with the version or build of mono that I had installed not having the assets needed for MSBuild.

So fed up of not getting IntelliSense in either VS Code or VS Code insiders I decided to try something I perhaps should have tried on day one.

That was to re-install or update my version of Mono from the official download page.

The instructions for doing this I borrowed and adapted are from there and are as follows:

sudo apt install gnupg ca-certificates
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF
echo "deb https://download.mono-project.com/repo/ubuntu stable-bionic main" | sudo tee /etc/apt/sources.list.d/mono-official-stable.list
sudo apt update

sudo apt install mono-devel

🎉 This seems to have worked!

I now have IntelliSense again and the warning has gone away!

As I mentioned in the GitHub issue I will leave the bug open for a while as while the commands worked for me they may not persist and there may be more to it than that.

In fact, I’ve just read a similar issue that suggests that OmniSharp shouldn’t be using the MSBuild assets from mono and should be using the dotnet sdk version instead.

That makes sense to me. So reinstalling mono while apparently working may not be the top solution.

I may try using this command at some point but for now, as I said everything seems to work ok.

This post is here in case this happens again, it’s nice to google a problem and find your own blog has the answer plus if anyone else benefits then even better. 👌

A recent push to production broke an ASP.NET Core application I have running and it took me a while to find out the underlying problem.

The error was 502 - Web server received an invalid response while acting as a gateway or proxy server with nothing obvious in the logs that helped me.

First I published a last known good version of my application by creating a new branch in git and resetting it to the last known good commit I had.

The idea being I can deploy from this branch while I investigated and once fixed I could delete the branch.

git reset e64c51bf1c3bdde753ff2d8fd8b18d4d902b8b5b --hard

Then digging around the changes between branches in git I noticed that either Visual Studio and/or my MSBuild based deployment script had added a property pointing to hostingModel="InProcess" to my web.config and a property referencing AspNetCoreModuleV2 to my .csproj file.

So with some time spent on both StackOverflow and the ASP.NET Core documentation sites it was apparent that in order to have the more performantInProcess hosting model via the AspNetCoreModuleV2 module the .NET Core 2.2 Runtime & Hosting Bundle for Windows (v2.2.2) needs to be installed.

After many combinations and deployments, I ended up with this successful combination of settings.

Project File

 Sdk="Microsoft.NET.Sdk.Web">
  
    netcoreapp2.2
    InProcess
    AspNetCoreModuleV2
    true
    latest
  
  
     Include="Microsoft.AspNetCore.App" />
  

Web.Config

  
  
    
      
         name="HTTPS rewrite behind ELB rule" stopProcessing="true">
           url="^(.*)$" ignoreCase="false" />
          
             input="{HTTP_X_FORWARDED_PROTO}" pattern="^http$" ignoreCase="false" />
          
           type="Redirect" redirectType="Found" url="https://{SERVER_NAME}{URL}" />
        
      
    
    
       name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    
     processPath="dotnet" arguments=".\web.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false" hostingModel="InProcess" />
  

So after the install of .NET Core 2.2 Runtime & Hosting Bundle for Windows (v2.2.2) and one reboot later all was well again. 🙌

Success 🎉

This is something I have had to do before so I am blogging here for next time.

I have just upgraded my laptop from Ubuntu 18.04 to 18.10 so that I could check out the latest Gnome desktop environment and one of my first tasks was to update the .net framework to the latest 2.2 sdk.

However despite following the instructions from here: https://dotnet.microsoft.com/download/linux-package-manager/ubuntu18-04/sdk-2.2.102

wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb

sudo add-apt-repository universe
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-2.2