Skip to main content

Static Typing for MUI React Data Grid Columns

6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

The MUI X Data Grid is a really handy component for rendering tabular data in React applications. But one thing that is not immediately obvious is how to use TypeScript to ensure that the columns you pass to the component are correct. This post will show you how to do that.

title image reading "Static Typing for MUI React Data Grid Columns" with a TypeScript logo and MUI logos

Why does it matter? Well look at this screenshot of the Data Grid with incorrect column names:

screenshot of a grid with incorrect columns

typescript-eslint with JSDoc JavaScript

12 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

It's possible to statically type check a JavaScript codebase with TypeScript with JSDoc annotations. Going a little further, and using typescript-eslint to lint your codebase with the benefits of type information can improve your code quality even more. This post will show you how to set this up and talk about some of the gotchas.

title image reading "typescript-eslint with JSDoc JavaScript" with a typescript-eslint logo and TypeScript logo

We'll also talk a little about how to use TypeScript in combination with JSDoc annotations in a JavaScript codebase.

Using AZD for faster incremental Azure Static Web App deployments in GitHub Actions

11 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

This post is a follow on from the post Using AZD for faster incremental Azure Container App deployments in Azure DevOps. In that post, we looked at how to speed up deployments of Azure Container Apps in Azure DevOps using the Azure Developer CLI (azd). In this post, we're going to look at how to speed up deployments of Azure Static Web Apps in GitHub Actions using azd.

title image reading "Using AZD for faster incremental Azure Static Web App deployments in GitHub Actions" with the Azure Static Web Apps logo

There's going to be some overlap between the last post and this one. I don't want to force you to read them both, so I'll duplicate some of the content from the previous post here. But I'll also add some new content that's specific to deploying Azure Static Web Apps in GitHub Actions with azd.

Using AZD for faster incremental Azure Container App deployments in Azure DevOps

14 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

When deploying Azure Container Apps from Azure DevOps, you can use the azd command to speed up deployments that do not affect infrastructure. Given that when you're deploying, it's far more common to be making a code and / or content change and not an infrastructure one, this can be a significant time saver.

title image reading "Using AZD for faster incremental Azure Container App deployments in Azure DevOps" with the Azure Container Apps logo

If you're looking for information on how to use azd to speed up deployments of Azure Static Web Apps in GitHub Actions, then you might want to read this post.

MUI React Tree View: pass data to TreeItem

6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I'm a big fan of the Material-UI (MUI) library treeview component. I recently needed to do some customisation of the nodes in the treeview component I was rendering. The application I was working on acquired data for each node in our treeview component asynchronously. I wanted to show a loader for each node that was still loading.

Achieving this required passing data to individual nodes in the treeview component. This appears to not be officially supported by the MUI treeview component. However, it is possible and this post will show you how to do it.

The comment on this GitHub issue suggests that this will be directly supported in MUI v6. Until that time, you'll have to slightly hack the component to achieve this.

I've written previously about how to check children and uncheck parents in the MUI treeview component. This post builds on that one. But, you need not be using multiselect / checkboxes etc to use the approach in this post. It applies generally to usage of the treeview component.

title image reading "MUI React Tree View: pass data to TreeItem" with the MUI logo

Web Workers, Comlink, Vite and TanStack Query

6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I've written previously about combining Web Workers and Comlink. I recently found myself needing to use Web Workers again. As I picked them up this time I found myself making some different choices, now I was working in a codebase that used Vite to build. I ended up using TanStack Query in combination with my Web Workers and Comlink. It was a really good fit and this post will show you how to use Web Workers with Comlink and TanStack Query.

title image reading "Web Workers, Comlink, Vite and TanStack Query" with the Static Web Apps CLI and Vite logos

Static Web Apps CLI: improve performance with Vite server proxy

6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I often use the Azure Static Web Apps CLI for local development. It's not only handy when building Azure Static Web Apps, but also when building other types of web app, which also rely upon both a frontend server and some kind of API server. The Azure Static Web Apps CLI is particularly handy if you want to spoof authentication / authorization as well.

Changes in the behaviour of Node.js in version 17 caused issues with the Static Web Apps CLI. You can read a previous post which discussed this. However, whilst the issue was fixed in version 1.1.4 of the Static Web Apps CLI, it caused significant performance regressions in the CLIs dev server functionality.

This post shows you how to improve your developer experience by using Vite server proxy instead.

title image reading "Static Web Apps CLI: improve performance with Vite server proxy" with the Static Web Apps CLI and Vite logos

MUI React Tree View: check children, uncheck parents

5 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Every now and then, I need to use a treeview component in a React application. The Material-UI (MUI) library provides a treeview component that is very useful. However, some of the default behaviours of the component differ from that which you typically find in a treeview component. I'm speaking, of course, about node selection. I'm used to a treeview component that, when a parent node is selected, auto selects the child nodes underneath. And by turn, when nodes are deselected, the parent nodes get deselected.

This post documents how to implement this behaviour with the MUI treeview component.

Since initially writing this, I've learned that it is likely that the kind of behaviour I'm hand-rolling here, will natively land in the component. So, all being well, what follows should become unnecessary! To track native support watch this GitHub issue.

title image reading "MUI React Tree View: check children, uncheck parents" with the MUI logo

Serialising ASP.NET method calls for later execution

6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Let's start with "why". Imagine you have an operation that you'd like to perform, but before that operation is performed, some other things need to take place first. Maybe it needs to be approved by someone, maybe you need an explicit record of what method is to be executed.

Now you could build a mechanism to manually cater for each scenario that triggered a method call. But that's a lot of boilerplate code for each implementation, and given we might want to cater for many scenarios, it wouldn't scale particularly well as an approach.

So how can we take a method call, serialise it, perhaps store it in a database, and then later rehydrate and execute?

title image reading "Serialising ASP.NET method calls for later execution" with the C# logo

Large Language Models, Open API, View Models and the Backend for Frontend Pattern

8 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Of late, I've been involved in work to integrate APIs into LLM interactions, using Semantic Kernel. This post is something of a brain dump on the topic. Given how fast this space is moving, I expect what is written here to be out of date, possibly even before I hit publish. But nevertheless, I hope it's useful.

title image reading "Large Language Models, Open API, View Models and the Backend for Frontend Pattern" with the Azure Open AI / Swagger logos

Using Kernel Memory to Chunk Documents into Azure AI Search

17 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I've recently been working on building retrieval augmented generation (RAG) experiences into applications; building systems where large language models (LLMs) can query documents. To achieve this, we first need a strategy to chunk those documents and make them LLM-friendly. Kernel Memory, a sister project of Semantic Kernel supports this.

title image reading "Using Kernel Memory to Chunk Documents into Azure AI Search" with the Azure Open AI / Azure AI Search logos

Overview of webpack, a JavaScript bundler

26 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

If you're a JavaScript developer, you've probably heard of webpack. It's a JavaScript bundler that helps you bundle your code into a single file. It's a great tool for optimizing your code and improving performance. This article will give you an overview of webpack, its history and how it works.

It'll be a little different than your typical "what is webpack?" article, in that I write this as the maintainer of ts-loader, a loader used for integrating TypeScript with webpack. I've worked in the webpack ecosystem for some years now and I'll share some of my experiences with you. I'll go through a little history around bundling, and try to understand why webpack came to be such a popular choice.

title image reading "Overview of webpack, a JavaScript bundler" with the webpack logo

Azure Cosmos DB: container items and generics

7 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Cosmos DB is a great database for storing objects. But what if you want to store subtly different types of object in the same container? This post demonstrates how you can use generics to store and retrieve different types of object in an Azure Cosmos DB Container using C#.

title image reading "Azure Cosmos DB: container items and generics" with the Cosmos DB logo

Text-first MUI Tabs

7 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I love the Material-UI (MUI) library for React. Hand on heart, I'm not very good at making UIs that are attractive. So I always grab for something to paper over the cracks. MUI is awesome for that.

One of the components that I use frequently is the tabs component. However, I've found that it can be a little tricky to use in a "text-first" way, that also remains strongly typed. This post documents how to do just that!

title image reading "Text-first MUI Tabs" with the MUI logo

Generate a Word document in ASP.NET

2 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Generating a Word document in the context of an ASP.NET controller is quite simple to do. However, it took me a little experimentation to work out just what was required. This post documents (pun very much intended) what we need to do.

title image reading "Generate a Word document in ASP.NET" with the Word and ASP.NET logos

Configure Azure connection strings and keys in Azure Bicep

5 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Imagine you're deploying a solution to Azure. It'll feature some resources like a database or a storage account. How do can you configure your application with access to these resources? One approach would be using Managed Identity. Another approach is configuring the connection strings and access keys in our application's configuration store as the Bicep templates are deployed. This is a common approach when working with Azure Functions, Azure Static Web Apps, Azure Container Apps and similar.

title image reading "Configure Azure connection strings and keys in Azure Bicep" with the Bicep and Azure logos

A wonderful aspect of this approach is that no human need ever get to see the connection strings / access keys. They'll be discovered and consumed by Azure during a deployment, and known to your application at runtime, but untrustworthy humans need never get to see them. This is secure, and therefore good.

Multiline strings in .env files

One min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I love using .env files to configure my applications. They're a great way to keep configuration in one place and to keep it out of the codebase. They're also a great way to keep secrets out of the codebase.

But what if you need to use a multiline string in a .env file? How do you do that? You just do it:

SINGLE_LINE="you know what..."
MULTI_LINE="you know what you did
LAST SUMMER"

That's right, you just use a newline character. It's that simple. Oddly, searching for that on the internet didn't yield the answer I was looking for. So I'm writing it down here for posterity.

With your .env file in place, you can then consume it in your application using a package like dotenv. Or if you'd like to use a bash script to consume the .env file, you can do it like this:

#!/usr/bin/env bash
set -a
source test.env
set +a

npm run start # or whatever you need to do

ESLint no-unused-vars: _ ignore prefix

6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I'm a longtime user of TypeScripts noUnusedLocals and noUnusedParameters settings. I like to avoid leaving unused variables in my code; these compiler options help me do that.

I use ESLint alongside TypeScript. The no-unused-vars rule provides similar functionality to TypeScripts noUnusedLocals and noUnusedParameters settings, but has more power and more flexibility. For instance, no-unused-vars can catch unused error variables; TypeScript's noUnusedLocals and noUnusedParameters cannot.

One thing that I missed when switching to the ESLint option is that, with noUnusedLocals and noUnusedParameters, you can simply ignore unused variables by prefixing a variable with the _ character. That's right, sometimes I want to declare a variable that I know I'm not going to use, and I want to do that without getting shouted at by the linter.

It turns out you can get ESLint to respect the TypeScript default of ignoring variables prefixed with _; it's just not the default configuration for no-unused-vars. But with a little configuration we can have it. This post is a quick guide to how to implement that configuration.

title image reading "From TypeScript noUnusedLocals and noUnusedParameters to ESLint no-unused-vars (with _ prefix)" with the ESLint and TypeScript logo

Using Bun in Azure Pipelines

2 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I'm a keen user of Bun. Bun is a fast TypeScript / JavaScript runtime which can be used to speed up the TypeScript / JavaScript you have. It's a drop-in replacement for Node.js, and it's compatible with the vast majority of the Node.js ecosystem. (There are still rough edges that have issues.) In this post we'll look at how to use it in Azure Pipelines.

title image reading "Using Bun in Azure Pipelines" with the Bun and Azure Pipelines logos