DEV Community: Jeremy Hutchinson

App Settings in Client-Side Blazor

Jeremy Hutchinson — Tue, 17 Dec 2019 00:00:00 +0000

I’ve been spoiled by Asp.Net and expect app settings to just work, but there is no easily configured app settings story for client-side Blazor yet. What I’m looking for is the ability to set some settings on a per-environment (dev/test/beta/prod) through Azure App Service Application Settings. The goal is one build artifact that moves from environment to environment with zero changes.

If you host the Blazor app as static files you’d need to change the app settings file for each different environment. So, I’ve gone with Asp.Net Core Web Hosted. I’ve named the app AppSettingsExample, so in the solution we have AppSettingsExample.Client (the WASM app), AppSettingsExample.Server (the host app), and AppSettingExample.Shared (code that is shared between the Client and Server)

Loading Client App Settings

We’ll store and access the client app settings through the built-in configuration in AppSettingsExample.Server. To do that we’ll add an appsettings.json with the following values.

{
  "ClientAppSettings": {
    "BaseApiUrl": "http://somesite.com/api"
  }
}

We’ll also create a class in the AppSettingsExample.Shared project to hold those configurations.

public class ClientAppSettings
{
    public string BaseApiUrl { get; set; }
}

Then in the AppSettingsExample.Server’s Startup we’ll get a reference to the application’s configuration and store it in a local variable.

private readonly IConfiguration _configuration;

public Startup(IConfiguration configuration)
{
    _configuration = configuration;
}

This allows us to use that config to load the settings from appsettings.json and add it to the dependency injection config as a singleton.

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton(_configuration.GetSection("ClientAppSettings").Get<ClientAppSettings>());

Exposing the Settings to the Client

There isn’t an easy way to just pass the settings into the client-side Blazor app, so we’ll need the app to request them from the server. We’ll create a ClientAppSettingsController to AppSettingsExample.Server to serve up these settings.

[Route("api/[controller]")]
[ApiController]
public class ClientAppSettingsController : ControllerBase
{
    private readonly ClientAppSettings _clientAppSettings;

    public ClientAppSettingsController(ClientAppSettings clientAppSettings)
    {
        _clientAppSettings = clientAppSettings;
    }

    [HttpGet]
    public ClientAppSettings GetClientAppSettings()
    {
        return _clientAppSettings;
    }
}

Getting the Settings from the Client

This is where I had the most trouble. I need to completely load these settings before the application can move on. If I did it asynchronously, it would start running the Initialization and ParameterSet methods on the current page before the settings load completed. If I tried to force the asynchronous web request to complete synchronously by calling .Wait(), the application locked up.

To get around this we can create a component that loads the settings and once loaded displays its child content. Then we can wrap our content in this component to make sure it doesn’t start initializing or setting parameters until the settings are loaded. First, we create AppSettingsLoader.razor

@using AppSettingExample.Shared
@inject HttpClient http

@if (IsLoaded)
{
    @ChildContent
}

@code 
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public bool IsLoaded { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        if (!IsLoaded)
        {
            var appSettings = await http.GetJsonAsync<ClientAppSettings>("api/ClientAppSettings");
            AppSettings.BaseApiUrl = appSettings.BaseApiUrl;
            IsLoaded = true;
        }
    }
}

Because we can’t (or I couldn’t) load the ClientAppSettings instance into the Dependency Injection to make it available throughout the application, I’m just putting the values in a static class.

Now, in the MainLayout.razor we can wrap the @body with the AppSettingsLoader

<AppSettingsLoader>
@Body
</AppSettingsLoader>

And finally, from the Index.razor page we can reference the AppSettings.BaseApiUrl. To prove it out, I’ll just display it on the page.

@page "/"
<h1>Hello, world!</h1>

@AppSettings.BaseApiUrl

And now we can set any setting we like in the ClientAppSettings sections of the AppSettings.json and it will be treated just like a normal app setting, including being able to set the setting through Configuration section of an Azure App Service.

Visual Studio Tips - Code Definition Keyboard Shortcuts

Jeremy Hutchinson — Wed, 24 Apr 2019 00:00:00 +0000

Often when we’re coding, we need to take a look at the definition or sometimes the implementation of a method we’re calling. Visual Studio has a few great ways to speed these tasks.

Goto Definition

To see the definition of a variable, class, interface or method, you place your cursor on the thing you want to see the definition of, and either press F12 or right click and choose Goto Definition.

One catch with Goto Definition is that when you use it to go to a definition of a property or method, it goes it goes to the definition of the object as it is declared. That means that if you hit F12 on all of the SayHello() methods below you would go to IGreeter.SayHello for greeter1, SimpleGreeter.SayHello for greeter2 and greeter3 and WorldGreeter.SayHello() for greeter4.

            IGreeter greeter1 = new SimpleGreeter();
            Console.WriteLine(greeter1.SayHello());

            SimpleGreeter greeter2 = new SimpleGreeter();
            Console.WriteLine(greeter2.SayHello());

            SimpleGreeter greeter3 = new WorldGreeter();
            Console.WriteLine(greeter3.SayHello());

            WorldGreeter greeter4 = new WorldGreeter();
            Console.WriteLine(greeter4.SayHello());

Peek Definition

If you wanted to take a peek at the definition without navigating to its definition, you can use Alt+F12 or right click and choose Peek Definition. This brings up the definition in a little window within the code editor. You can still scroll through the code of the definition without losing your place in the code you are editing. Esc closes the Peek window.

Goto Implementation

If you want to view the implementation of a method or property rather than its definition you can press Ctrl+F12 or right click and choose Goto Implementation. If there is only one implementation for a method, Visual Studio takes you directly to the implementation. If there are multiple implementations, it brings up a window that lists the implementations. You can view the implementations by using your arrow keys or by clicking on them.

For the code above it would go directly to the implementation for greeter4.SayHello(), for all the others it would bring up the implementation selector window.

Find All References

Sometimes it’s helpful to see what other code is referencing a method or property. For that, you can use the official shortcut Ctrl+K+R, or the unlisted shortcut Shift+F12, or you can right click and choose Find All References. This brings up a window that lists all the references to that method. This displays the same list regardless of how the object is declared.

View Call Hierarchy

Sometimes it is handy to be able to see what code is calling a method or property, and what code led to that call. To see that you can right click on the method or property you’re interested in and choose ‘View Call Hierarchy’ or Ctrl+K, Ctrl+T. This brings up a tree view with the method or property you’re interested in and allows you to dig in until you get to the initial action that caused the method or property to be called. In the case below we can see that the SayHello() method was called by the Run() method which was called by the Main([string]). In the right pane, we can see the line and column that Run() is called from and double-clicking that takes us to that location.

Visual Studio Tips - Bulk Editing Shortcuts

Jeremy Hutchinson — Mon, 15 Apr 2019 00:00:00 +0000

One of the most tedious things we do as developers is making repetitive changes. Maybe we need to set a handful of properties on a single object, or perhaps we want to add a property to the instantiation of a bunch of test objects. Here are a few shortcuts to help you with that.

Multi-Caret Editing

Let’s start with adding a property to the instantiation of some test objects. This is often the perfect scenario for “muti-caret editing.” To start this you can do two things. The first is to position your caret where you’d like to start editing on the first line, then hold Shift+Alt and either use your arrows or the mouse to select a column or area. The beautiful thing about this method is it allows you to select a block of text to replace.

The drawback of using Shift+Alt is that the columns you want to edit must line up vertically. But frequently that isn’t the case, and that’s where Ctrl+Alt comes into play. With Ctrl+Alt you set the multiple carets by holding Ctrl+Alt and clicking where you want to edit. You can then insert text in all those places, even multiple times on the same line.

Duplicate Line

Those work great if the lines you want to edit already exist, or if you know how many lines you need to create at once. But I often find myself wanting to duplicate a line and make a few changes to it. For that, you can use the Ctrl+E, Ctrl+V keyboard shortcut which duplicates the line your cursor is on.

Clipboard Ring

Another feature I find very useful when I’m making repeated edits is the Clipboard Ring. When you hit Ctrl+Shift+V, it brings up your clipboard ring which includes the last nine things you’ve copied or cut (more recently used at the top). You can then select the item you want to paste by typing the number, using your arrow keys or clicking with your mouse.

This can be useful when you need to copy multiple things from one file to another. You no longer need to flip back and forth, just copy, copy, paste, paste.

Insert File as Text

This last feature I just stumbled upon while looking for something in the Edit menu. It’s not something I expect to use a lot, but it might be useful. In the edit menu is a command “Insert File as Text”, and the command does just what it says.

Visual Studio Tips - Test Explorer

Jeremy Hutchinson — Mon, 08 Apr 2019 00:00:00 +0000

Liquid syntax error: 'raw' tag was never closed

Visual Studio Tips - Window Management

Jeremy Hutchinson — Thu, 04 Apr 2019 00:00:00 +0000

Everyone has their own favorite layout for the various tool windows in Visual Studio. But sometimes you want different Window layouts based on what you’re working on, or whether you have external screens attached to your laptop.

First the basics of tool windows.

You can click and hold any window by its header (or its tab if it is already docked) and drag it. While drag it you will see a bunch of little blue boxes indicating where it can docked, if you drop it on one of those it will dock, otherwise it will float and can even be moved to a second monitor.

If a window is docked, you can Pin a window with the Thumbtack icon to make it always visible, or if it’s already pinned you can Unpin it to make it Autohide.

Save Your Window Layouts

Once you have all your windows where you want them you can Save the layout by going to Window -> Save Window Layout. You’ll be prompted to name your layout. This saves which windows are open, where they are docked, whether they are pinned or autohidden, and their size.

Once you’ve save a layout or two, you can either go back to the Window menu, click Apply Window Layout and select your layout from the list. Or you can use the hot key combination for the layout (ie Ctrl+Shift+1 for layout 1)

The Catch

The one slightly unintuitive part of saving window layouts is that when you save a layout, that is for both the layout for editing and the layout for debugging which are often different. So to set a layout, you need to get all the windows where you want them in edit mode, then start a debug session to get all of those windows where you want them, then save the layout. Otherwise you’ll find yourself needing to switch layouts every time you go from editing to debugging and back.

Visual Studio Tips - Keyboard Shortcuts for Debugging

Jeremy Hutchinson — Wed, 03 Apr 2019 00:00:00 +0000

There are literally hundreds of keyboard shortcuts in Visual Studio, and few people have them all memorized, but it is definitely worthwhile to memorize at least a few. Here are some that are useful while you’re debugging.

F5 - Run - This both starts the debugging session and continues the debugging session if the session is paused.
F10 - Step Over - This runs just the next statement. If the next statement is a function call, it runs the whole function before pausing execution again (unless there is a breakpoint in the function).
F11 - Step Into - This runs just the next statement. If the next statement is a function call, it will bring you to that function and pause before the first statement in there is run.
Shift+F11 - Step Out - This runs until the code returns from the currently running function. It’s really handy when you are done debugging a function, but that function still has a lot of statements to execute.
Ctrl+F10 - Run to Cursor - This allows you to move the cursor to a line of code then run until the debugger gets there. This is handy if you want to skip over a block of code. You could also press F9 then F5 which would add a Breakpoint at your cursor, then run to it.
Ctrl+Shift+F10 - Set Next Statement - This sets the line your cursor is on as the next statement the debugger will run. Really handy if you missed something and want to backup and debug it again.
Alt+Num * - Show Next Statement - Sorry laptop users, this one only works with the * on the number pad. This one takes you to the next statement that will run. Really handy if you’ve been sifting through code and want to quickly return to your debugging without executing any statements.
Shift+F5 - Stop Debugging - Ends your debugging session.
Ctrl+Shift+F5 - Restart Debugging - Getting the message “Edits were made to the code which cannot be applied while debugging”? This will quickly restart the debug session and have you on your way.

All of these are of course available through the UI, but if you often find yourself looking for them in the command bar, or right clicking and trying to find them in the context menu, memorizing at least some of these shortcuts will keep you focused on the debugging.

Visual Studio Tips - Trace Points

Jeremy Hutchinson — Tue, 02 Apr 2019 00:00:00 +0000

Tracepoints are not a new feature, they’ve been in Visual Studio since 2005, but they are a new feature to me. I just stumbled on them while researching for this series of posts. Tracepoints allow you to turn a Breakpoint into what is essentially a call to Debug.WriteLine().

A Tracepoint is just a special kind of Breakpoint that allows you to log a message to the Output window and continue execution. This can be really helpful in situations where stopping at a breakpoint makes reproducing a bug difficult or impossible.

And since Tracepoints are just a kind of Breakpoint, you can also put conditions on them and manage them just like Breakpoints. To learn more about Breakpoints see this post.

To set a Tracepoint, you set a normal breakpoint, then go into the settings of that Breakpoint and check Actions. That will display a textbox for you to create your log message and another checkbox to specify whether execution should stop or continue.

Visual Studio Tips - Using Data Tips

Jeremy Hutchinson — Mon, 01 Apr 2019 00:00:00 +0000

Data tips, the Visual Studio feature that allows you to hover over a variable and see its value while debugging, can be super useful. Here are a few tricks that you may not know about them.

Have you ever been looking in the DataTips then need to look at the code behind them? Great news, you can. Just press and hold Ctrl key, the DataTips become transparent until you release the Ctrl key. This is particularly useful when you’ve drilled down a bit in the DataTip or you’re trying to compare

Another thing you can do is either pin the DataTips. This persists the DataTip so you can navigate to other code, restart debugging or even restart Visual Studio and still have the DataTip be there when you break in that block the next time. Once you’ve pinned a DataTip you can move the data tip around by clicking and dragging, you can remove it by clicking the x, or you can float the DataTip by clicking the pin icon. This allows you to view that DataTip while you scroll the code or view another file.

Once you’ve pinned a DataTip, you can add expressions to that DataTip by right-clicking on the DataTip and choosing “Add Expression”. This can let you pin something more useful than what might normally display for an object. In this case, the DebuggerDisplay shows LastName, FirstName, but we can add an expression to display the Person object as FirstName LastName. This is really handy for when you can’t change the DebuggerDisplay of an object.

The other interesting feature of DataTips is that you can add comments to them.

But what good are comments if you can’t share them? Well, you can export your DataTips to an XML file and either share them or check them in with your source. You could have a set of DataTips that you load up whenever you’re facing a common debugging scenario.

You might also notice there are options in there to “Clear All DataTips”, and “Clear All DataTips from [CurrentFileName]”.

Visual Studio Tips - Solution Explorer Search

Jeremy Hutchinson — Fri, 29 Mar 2019 00:00:00 +0000

Solution Explorer Search has been in Visual Studio for a while, but there are a few features that I think many developers overlook (myself included). Here are a few that you might have missed.

By default, the search will search Ctrl+; both the file names and the contents. This is what we want most of the time, but it is possible to search just the file names.

Some other filters you can apply to your search are Open Files Ctrl+[,O and Pending Changes Ctrl+[,P. These can be particularly useful when you’re working on a feature that requires changes across multiple files in different layers of your solution. In the gif below I show these filters being used via the UI.

Visual Studio Tips - Breakpoints

Jeremy Hutchinson — Thu, 28 Mar 2019 00:00:00 +0000

Most of us know about Breakpoints and how to use them, but there are a few under-utilized features of breakpoints that you should be aware of.

You can set a simple breakpoint in a number of ways

Move the cursor to the line you want to break on and hit the F9 key
Right click on the line of code
Clicking in the gutter

Once you have a breakpoint set you can do a few things with it. First, you can disable it, if you don’t need the breakpoint right now, but think you might come back to it.

You can also disable all breakpoints from Debug -> Disable all breakpoint. This is handy for when you need to run and get reset, then re-enable all breakpoints and start your debugging again.

You can also make the breakpoint conditional based on the value of a variable or any boolean expression (yes, you can use the No Side Effects formatter). This can be helpful if you want to break when the value of a variable is a certain value.

You can also make the breakpoint conditional base on the number of times a breakpoint is hit. For example, you might know that the first time a breakpoint is hit isn’t interesting to your debugging scenario but every time after that is interesting. You could set hit count > 1.

You can also filter your breakpoints to a single thread or to exclude a thread, either by name or id.

Visual Studio Tips - Source Map in the Scroll Bar

Jeremy Hutchinson — Wed, 27 Mar 2019 00:00:00 +0000

Do you find yourself scrolling up and down in a large file in Visual Studio? “Show Source Maps in Scroll Bar” gives you a 1000 foot view of your code and allows you to navigate with a simple click.

To turn this feature on go to Tool -> Options -> Text Editor -> Scroll Bars. In the Behavior section select “Use map mode for vertical scroll bar”. I also like to select “Show Preview Tooltip” as well. You can choose your own width, but I’ve been happy with “Medium”.

Once that’s done you can navigate your code like this

Note that both there are 3 artifacts on the Source Map.

A white bar that indicates where you are in the document
A white block on the left side of the source map to indicate a bookmark
A red block on the left side of the source map to indicate a breakpoint

Visual Studio Tips - Evaluate a Function Without Side Effects

Jeremy Hutchinson — Tue, 26 Mar 2019 00:00:00 +0000

Liquid syntax error: 'raw' tag was never closed