javascript

Converting a TypeScript project from CommonJS to ESM

July 06, 2024  6 minute read  

I haven’t made much progress on my own projects recently because of a project at work. Specifically, I am currently maintaining a CLI tool written in TypeScript about five years ago. It hasn’t really been looked after on a consistent basis, but some of the libraries that it uses (specifically, update-notifier and wait-on) have some security issues. Now, this is a development CLI tool, so the actual vulnerabilities don’t affect production code. Still, many people don’t like to use tools th...

The State of React UI libraries in 2024

June 27, 2024  7 minute read  

As I mentioned in my last post, I’ve been away from React development for a while, and I’m intending on writing a web application. I’m comparing the various libraries that I can use for my application. In this post, I’m going to be comparing UI component libraries. Thus far, my tech stack is: Base web framework: React Frontend tooling: Vite Hosting: Azure Static Web Apps State management: Redux Toolkit React UI component libraries are collections of ready-to-use UI elements that...

The State of React state management in 2024

June 25, 2024  13 minute read  

I’ve been away from React development for a while. I stupidly asked what the best way to create a React app was in 2024 on the React subreddit, and found that reddit is not a friendly or welcoming community. For those wondering, there are three ways of creating a React app - Vite, Remix, and NextJS - but the community suggests Vite. Given the somewhat frosty reception I got on the React subreddit, I decided to do my own research across a number of topics for a new project - a social media c...

Deploy your React app to Azure

April 04, 2020  7 minute read  

I’ve got to the point with my template where I am thinking about deployment options. There is already a great option (the gh-pages module) for deploying to a github.io site. However, I am going to be running most of my services on Microsoft Azure. I want to deploy my service automatically and copy the web application to a web site on Azure. Just like AWS, you can deploy a website directly to Azure Storage. This is a great option if you just want cheap web hosting plus the option of consu...

Add unit testing to your React app

April 02, 2020  9 minute read  

Thus far, in my journey to produce a customized toolchain for my React development, I’ve covered a lot of ground. See part 1 and part 2 for that coverage. I’ve come to the point where I need to discuss testing, which is a complex area. First, there are at least four types of testing you need to do: Unit testing is something you should be running on a regular basis - a series of tests that test each component to ensure that the functionality is correct from the outside. Integration te...

Add visual testing to your React app with Storybook

March 31, 2020  7 minute read  

In my last article, I started a React app from scratch, then integrated Parcel as the bundler, TypeScript for language support, SASS, ESLint for linting the code, and Stylelint for linting the style sheets. I didn’t include any testing capabilities, so that is next on my agenda. Let’s write a simple component to get started with testing. The component takes an “isBusy” flag. If it is true, then one icon is displayed. If false, a different icon is displayed. I’ll use text nodes in this v...

Building a React app with Parcel, Typescript, SASS, and ESLint

March 29, 2020  9 minute read  

create-react-app (CRA) is great for getting started super-fast. It has just about everything you need for building all but the most demanding apps. It is, however, opinionated in how things get set up, and I’ve been chafing at the limitations for a while. You can’t alter the tsconfig.json except in some non-important ways. It uses webpack underneath, and that is unchangeable. It uses jest and testing-library. Changing this is a pain. There are even packages that rewire the CRA so...

Integrating Microsoft Login and MSAL with React and Redux

March 06, 2020  9 minute read  

I have a new app I am working on. It’s sort of a 1990’s style text MUD, but I’m bringing it “up to this century” with a host of new features. I’m writing the first front-end in React. So, what does a modern MUD app look like? Well, I’m not into storing usernames and password any more, so I’m going to use a Microsoft OAuth service instead of a user database. My front end application handles state through Redux. Configuring Redux I’ve got a store set up as follows: import { applyMiddlew...

The React Toolbox - 2018 Edition

March 23, 2018  5 minute read  

It’s been a while since I’ve been in web development. I’ve mostly been concentrating on mobile development instead. But this week I had cause to delve again. It’s amazing how much change there has been in the web world in just 2 years. React has become the force in web frameworks (Sorry Angular — I never liked you anyway) and developers are starting to coalesce around libraries and tools that make their life easier. I thought I’d put down my thoughts on the libraries that are making it into m...