List of article summaries
Migrating a Create React App (CRA) application to Vite
I had an existing app that was scaffolded using create react app (CRA) and extended with craco. CRA didn’t support the tooling I needed so I had to look for an alternative. I found Vite.
There are some incredible improvements in Vite over CRA, including PostCSS 8.0 support so I decided to migrate my production application.
I’ll explain some of the benefits of Vite and describe the steps you need to take to upgrade your application.
Update October 2022: I changed @vitejs/plugin-react-refresh to @vitejs/plugin-react. The former is deprecated now.
Fix React Router navlink-exact when activeClass is not working
If you’re adding navlinks with react router because you want to set the active class you might find that it doesn’t work. These are the steps I had to take to make this work.
Avoid rebuild of React App in every CI stage
If you have a react app you can use env vars like
REACT_APP_MY_ENV_VAR in your application and React will automatically pull them in to your app when you build the production application.
This is very useful but if you have variables that change for each environment and your application build takes a long time, you might want to avoid building unnecessarily in CI. For example you might have a QA environment and a Staging environment that have different configuration.
We type-check our code on each build and that was taking 5 minutes+ to build each environment so we had to make it faster. We changed our app from using
REACT_APP env vars to using a configuration file that we could quickly write to using CI.
Our CI system is Azure DevOops so the CI scripts here are specifically for Azure DevOps but they apply to most CI systems with small changes.
The real work happens in a Node.js script that would work anywhere.
Setting and debugging Azure Devops yaml env vars
I received an interesting question yesterday that highlighted how some parts of environment variables in Azure devops are not clear. Here are some things to check if your environment variables aren’t working in azure pipelines.
Five quick jest and typescript tips
I’ve been working with jest every day for the past month or so. I had to learn a few tricks as I went. I was mocking, using async, upgrading versions and working in vscode. Here are five things I learned.
Using no-code airtable and Netlify to quickly build a machine log application
A friend asked me to create a tool for logging when one of his staff enters a room to turn on and off machine jobs. It needed to be on the cloud and run on an ipad. He wanted it to be simple and have an MVP fast.
I wanted to see if I could build the tool using no-code or similar. I got it built in around 2 hours using airtable! Though I found that I needed a tiny bit of code to make it more professional by having it on its own url.
I recently needed to trigger the chrome debugger on a mouse click from an element that gets popped up based on a previous mouse click. The problem was that the code is old jQuery code that manually set handlers and it was all a bit spaghetti. I didn’t know where the click was registered to a handler or which parts of the code ran afterwards so adding a
debugger; call wasn’t a great approach this time.
Dynamically setting IP to deploy assets to an Azure storage account behind a firewall from DevOps agents
If you try to deploy a static React app to an Azure static site on a storage account that’s behind a firewall you need to allow all the IPs that will be connecting to the storage.
The problem is that the range of possible IPs the devops agents use is huge and changes regularly.
How to configure a pipeline on Azure Devops to build and deploy serverless graphql and react client
I need to automate deploys on Azure Devops for a project I’m working on. I want it to work as cheaply as possible so serverless or PaaS was desirable. Read on to see the azure-pipelines.yaml file I used to make this work.
How to fix "Something went wrong installing the "sharp" module The specified procedure could not be found." in Gatsby
Here is what I had to do on windows to make this work
Returning null from a GraphQL mutation in type-graphql
Null is not a GraphQL type so to return null from a GraphQL mutation you have to return a GraphQL type that is nullable. All GraphQL types are nullable by default so you can just return a bool in the schema but return void from the implementation.
It shouldn’t be too common to have a null response though, even for a mutation it could be better to return a state of the created item.
How to add Bulma and PrismJs to a Gatsby project avoiding CSS conflicts
Bulma is a popular CSS library like bootstrap. It’s not too difficult to add to Gatsby but there are some tricky bits where you need some plugins and the CSS classes can conflict.