OSS CMS Tool Strapi Case Study

Introduction

Hello. I appreciate you taking the time to read this! My name is Nakamoto, and I work on developing the frontend for KINTO FACTORY ('FACTORY' in this article), a service that enables users to upgrade their current vehicles.
In this article, I would like to introduce Strapi, an open-source tool which we implemented to create and manage the content for the newly launched FACTORY Magazine.

What is Strapi?

Strapi is a self-hosted, headless CMS that, unlike other SaaS-based CMS options, allows users to set up and manage their own servers, databases, and environments. (Strapi also offers Strapi Cloud, which provides a cloud environment.)
At KINTO, we’ve worked with several SaaS CMS platforms to publish columns and articles. However, encountered limitations balancing operational efficiency with costs, along with the limited flexibility to add new features or customize existing ones. This led us to explore OSS CMS tools with the aim of setting up a self-hosted solution.
WordPress is likely the most recognized OSS headless CMS. However, while researching other tools that are recently gaining popularity. This is how we came across Strapi.
When evaluating open-source tools, we prioritized the following:

• Usability: A user-friendly management UI, accessible to both developers and content managers
• Community Support: Backed by a large community and extensive documentation
• Plugin Variety: A diverse range of plugins for easily extending functionality
• Scalability: Built on Node.js for high performance and scalability
  If certain functions were missing or didn’t align with our needs, we could easily modify or create plugins using our JavaScript expertise. The low implementation cost was also a key factor in our decision.

Architecture and Deployment Mechanism

Strapi, like FACTORY's e-commerce site, is hosted on AWS and consists of a simple architecture using ECS and Aurora. Strapi, as a CMS, operates independently from FACTORY's web application, primarily supporting internal teams like business units in writing and publishing articles.
When publishing an article, it triggers a build of the web application, during which article information is retrieved from Strapi's API and directly embedded into the page.
This setup means that users don’t directly interact with Strapi, creating a closed network for the CMS environment and eliminating unnecessary external access.

Customization Case Study

Let’s take a look at some of the customizations we implemented during the setup process.

Creating new plugins

In FACTORY magazine, there is a page titled User's Voice that features interviews with customers who have purchased and installed items from FACTORY.
For these articles, it’s essential to link the car models or item names associated with each installation. Users enter details like "car model name (e.g., RAV4)" or "item name (e.g., Headlamp Design Upgrade)" in the standard input field.

Vehicle Information Entry

However, allowing free text entry can lead to inconsistencies in naming. To make it easier to search articles by car model or item—similar to a blog—it's more effective to link item IDs and other data stored within FACTORY to the articles. We addressed this by creating dropdown lists for these input fields, utilizing the BFF (Backend for Frontend) services already in place for the e-commerce site.

Vehicle Selection	Item Selection

With this approach, the custom plugins enable precise linking of item and car model information. We also customized the images for an intuitive display, simplifying selection for the author. Leveraging the existing BFF from the e-commerce site highlights another advantage of a self-hosted CMS. Unlike SaaS solutions, this setup offers greater flexibility for customizations while minimizing security risks, as mentioned earlier.

Customizing existing plugins

As another example of customization, we introduced this existing plugin,tagsinput, to meet the requirement of searching for similar articles by linking tags to them.
However, this plugin saves the entered tags in the database as an associative array, like this: [{ name: tag1 }, { name: tag2 }]. This made the search logic complicated when creating an API to search by tags.
So, to simplify the search, I made slight customizations to the plugin, changing it to store the entered tags as an array of strings [tag1, tag2].
https://github.com/canopas/strapi-plugin-tagsinput/blob/1.0.6/admin/src/components/Input/index.js#L29-L36

@@ -26,8 +26,7 @@
   const { formatMessage } = useIntl();
   const [tags, setTags] = useState(() => {
     try {
-      const values = JSON.parse(value);
-      return values.map((value) => value.name);
+      return JSON.parse(value) || [];
     } catch (e) {
       return [];
     }

https://github.com/canopas/strapi-plugin-tagsinput/blob/1.0.6/admin/src/components/Input/index.js#L64-L70

@@ -38,7 +37,7 @@
     onChange({
       target: {
         name,
-        value: JSON.stringify(tags.map((tag) => ({ name: tag }))),
+        value: JSON.stringify(tags),
         type: attribute.type,
       },
     });

This approach makes it easy to tweak existing plugins, tailoring them to better suit our specific needs.
One of the key customizations we've implemented is adding video tags to CKEditor, the rich text editor Strapi uses for article postings. Since this requires a more in-depth explanation, we’ll cover it in a separate article.

Conclusion

FACTORY was the first among KINTO's services to introduce Strapi, an open-source CMS tool.
Teams using Strapi for writing and posting articles have shared positive feedback, noting it’s "easier to use than SaaS-based CMS services"—a promising sign for the tool’s future. We’re already receiving feature requests, which we plan to address by taking full advantage of Strapi’s customizability.
Although we’re in the early stages of operations, I’m excited to gain experience and explore Strapi’s potential, looking beyond article publishing to find innovative uses. I also plan to share FACTORY's approach with other KINTO services using SaaS CMS tools, aiming to foster broader adoption and development across the company.