According to Jamstack.org, Strapi (community edition) is one of the most popular open-source headless CMS with 50k+ stars on their Github. Strapi offers immense flexibility for managing content and building APIs. However, there are times when the default functionality of Strapi needs to be customized to meet specific project requirements.

When we were working for Video Translator AI to revamp their website and migrate their old data, we had many customization requests. One of them is to add character count functionality to default input fields to make them aware when writing SEO things. While Strapi's default inputs lack this feature out-of-the-box, there's a quick and efficient solution to address this need.

The time-sensitive nature of projects often demands speedy solutions without compromising quality. Instead of waiting for official updates or spending extensive time developing custom solutions, the patch-package allows us to apply modifications swiftly. This article presents a step-by-step guide, drawing from the valuable insights provided in a GitHub issue specifically addressing the addition of character count functionality as you can see here.

Step-by-step

Install patch-package

We are using Strapi version 4.5.3 for this project. Begin by installing patch-package as a development dependency in your Strapi project using npm or yarn.

$ yarn add patch-package

Locate the package to be patched

Identify the package within the Strapi project that requires modification. In our case, we will be focusing on the input components. Open the file below <appDir>/node_modules/@strapi/admin/admin/src/content-manager/components/Inputs/index.js directly from terminal or your favorite IDE.

Screenshot locate source file

Make the necessary changes

In this case, we use the guide from the GitHub issue to identify the modifications required to add character count functionality. Implement these changes in the source code of the respective package dan save. Make sure the name of the content type that you want to add character count functionality same as written in line 264 below, in our case we name it "description".

Screenshot Strapi inputs component edited

Generate the patch file

After making the necessary changes, run the patch-package command on your terminal to generate a patch file capturing the modifications.

$ npx patch-package @strapi/admin

Screenshot run patch package

If this process runs successfully then it will generate a file <appDir>/patches/@strapi+admin+4.5.3.patch as written below.

Screenshot patch file

Apply the patch

Last but not least, don't forget to add a new script called postinstall into your package.json, and fill it with npx patch-package. Please have a look at NPM scripts lifecycle operation order for a better understanding.

Finally, when you rebuild your Strapi project or update its dependencies, the patch-package tool will automatically apply the generated patch, ensuring that your customization remains intact.

Screenshot of result

Conclusion

Patching Strapi packages using patch-package provides a quick and efficient solution for customizing default component. By following the guide provided by the Strapi community and leveraging patch-package, developers can swiftly add character count functionality to Strapi's input components. This approach saves time and effort, allowing developers to meet project requirements within tight deadlines. Embrace the power of patch-package and unlock limitless possibilities for customization in your Strapi projects.