How to Seamlessly Modify Node Modules

Sometimes the packages we rely on might not work perfectly for our needs. Today, we’ll dive into how you can modify node_modules effortlessly using patch-package.

Step-by-Step Guide:

1. Identify the Module to Modify: For this demonstration, I’m adjusting astro-embed which resides in the node_modules directory. Always ensure you navigate through the module’s folders to pinpoint the exact code segment you’re looking to modify.

2. Make Necessary Adjustments: My objective was simple: change the src attribute of the img tag to leverage hq720.jpg over hqdefault.jpg:

// Sample code showcasing the modification...
const posterURL = poster || `https://i.ytimg.com/vi/${videoid}/hq720.jpg`;

3. Set Up Patch-Package: Install the required packages:

yarn add -D patch-package postinstall-postinstall

4. Generate a Patch: Execute the command tailored to the file/module you adjusted:

yarn patch-package @astro-community/astro-embed-youtube

This command creates a patches folder in your repository, capturing the changes. Rest assured, your existing setup remains unharmed.

5. Deploy with Confidence: To ensure deployments use the patched version, update your package.json:

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

There you have it! You’re all set to deploy your website with the patched module intact. To explore more on patch-package, visit their official repository.

Pursuing Top Quality

In web development, we always aim for the highest quality, both in coding and design. But sometimes, even the best tools have some flaws.

Take the astro_embed library, for example. It’s a great tool that lets us embed videos from sites like YouTube or Vimeo into Astro’s mdx files. However, I noticed an issue with the thumbnail quality.

YouTube often uses this hqdefault .jpg thumbnail:

But there’s a better quality version, hq720.jpg:

The second one clearly looks better. However, astro_embed uses the first one by default. So, I decided to tweak the library to use the better-quality thumbnail.