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.
Name: Jest Runner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner
Debugcode lens links above your tests allowing you to quickly run or debug a test!
You can configure VSCode to exclude node internals and improve the debugging experience with smart step by adding this to your VSCode config
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.
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.
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:
A complete example setup is available at https://github.com/JakeGinnivan/example-project-structure
I prefer not using a tool which tries to do everything, instead use simple but powerful tools to bring everything together.
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.
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.
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.
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…
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
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. …
Tech lead for @sevenwestmedia WA | Speaker | Mentor | OSS enthusiast | Full Stack TypeScript, JS, React | Creator of GitVersion | 🥃 ☕️ 🐶 😸