About 6 months ago I was struggling with dealing with config issue, mono repo perf issues and a few other things and stumbled across NX.

I quickly started using their project templates for React, Express, Node etc which was good for a time, but now the plugins it comes with for these tools are stopping me from adopting some of the really interesting tools coming out in the node ecosystem. Similar to when you hit the edge of Create React App. I want to use ESBuild, and Vite and TypeScript project references in my repos.

The good news is that…

I use both Jest for my tests and VSCode as my editor, here are a few little tweaks to config to make using these two tools together a little nicer.

Install firsttris.vscode-jest-runner

Name: Jest Runner
Id: firsttris.vscode-jest-runner
Publisher: firsttris
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner

It adds Run and Debugcode lens links above your tests allowing you to quickly run or debug a test!

Tweak debug settings

You can configure VSCode to exclude node internals and improve the debugging experience with smart step by adding this to your VSCode config

// .vscode/settings.json
"jestrunner.debugOptions": {
"skipFiles": ["<node_internals>/**"],
"smartStep": true
},

If using pnpm

When using PNPM I hit an issue where…

https://pnpm.io is a new package manager for the node space, it focuses on performance and best practices. We have seen a decent drop in clean install times for all our projects after switching from Yarn. Some projects dropped from ~2mins to ~30 seconds.

Things to note

Ensure you build/run everything after conversion

PNPM does not hoist all dependencies into your node_modules root, this means if the package.json doesn’t reference a dependency that your code require()’s or imports then it will fail to resolve.

This is the biggest hurdle in the migration but a very worthwhile exercise.

You can use this CLI flag to get around it if you really…

This is a bit of a brain dump for myself around the different options out there and some considerations for each. I am publishing as it may be useful for others.

It is far from an exhaustive list of options and I haven’t fully evaluated each, I just put together a list with initial pros / cons then picked one.

I will try to update each as I learn more about them and try them out more.

The problem

Building libraries you want to have at least a commonJS and ESM build available so your library works in the node ecosystem without…

Over the years I have setup and published a number of open source projects, ensuring they have automated builds/deployments and make it easy for me to accept pull requests then release a new version with ease.

There are a few parts which are often talked about in isolation:

  • CI
  • Versioning
  • Releases
  • Builds / packaging

A complete example setup is available at https://github.com/JakeGinnivan/example-project-structure

The Setup

I prefer not using a tool which tries to do everything, instead use simple but powerful tools to bring everything together.

  • CI — GitHub actions
  • Versioning / releases — ChangeSets
  • Mono repo management— Yarn workspaces
  • Package setup —…

We have started using Pulumi for our newer projects and wanted to share how we register new web apps as OAuth clients.

When any team member puts up a pull request of our web project, we build and deploy a ephemeral environment to test that pull request with. The links to each product are put in the pull request description automatically once it’s built.

We want to be able to use the login feature in these temporary environments, but to do that we need the callback URLs registered with our auth site and the the appropriate client id/secret as configuration.

Usage

Our news sites are React server side rendered websites, with a CDN in front of them. This means that 95%+ of our traffic is served cached copies of pages without ever hitting our servers (origin). It gives us most of the advantages of static site generators without the complexity in our build pipeline.

We recently wanted to move our static assets (fonts, JS bundle/chunks, css etc) to a subdomain rather than a path.

If you just want to know how to configure Webpack and React Loadable to load assets from a different domain, scroll to the bottom of this post.

Why?

The hosted Pulumi service is great, but for the time being we are happy with using S3 as we can open up managing infrastructure to our entire team while our Pulumi adoption is still in it’s early stages.

There are a few catches to managing the state yourself. You have to manage secrets yourself and the docs around stack referencing don’t cover the naming differences.

S3 State Bucket

We have a single state bucket for all our projects, this means that all our deployments need to be run from the account which the bucket exists in.

I will write another post soon on…

I am using the concurrently npm package to simultaneously start TypeScript in watch mode and also nodemon to watch the compiled files.

Since TypeScript 2.7.2 it clears the console when watch mode starts, and on incremental compilation.

This messed up my concurrently console output so after some hunting I found a pretty nice solution in https://github.com/microsoft/TypeScript/issues/21295#issuecomment-367571059

Here is my package.json with the setup

Photo by Andrea Piacquadio from Pexels

Before building a consumer facing website I just thought images you could just put an img tag in and off you go. Turns out I was quite wrong. Almost 3 years down the track and I think we handle images pretty well, but it has been a journey.

I think one of the reasons they end up being so hard is there are competing priorities and features you want your images to support. …

Jake Ginnivan

Tech lead for @sevenwestmedia WA | Speaker | Mentor | OSS enthusiast | Full Stack TypeScript, JS, React | Creator of GitVersion | 🥃 ☕️ 🐶 😸

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store