In this step-by-step guide, the CEO of Pimcore explains how to create a headless PIM setup with Pimcore in under 30 minutes. Give it a try yourself!
How to Setup Pimcore as a Headless PIM in Under 30 Minutes?
Going headless is not just a trend in the content management and experience management market but also in the fields of product information management and master data management. The goal is to decouple different applications within the overall system architecture but let the data flow efficiently between all components. In this article, we’ll tell you how to achieve that – step by step!
Decoupled & Headless: The Best of Both Worlds
The typical data binding glue of this system architecture is GraphQL, a very flexible query language for data. But let’s take a step back and have a look at PIM again: The core concept of a PIM is to provide rich product content to 3rd party applications and key users.
In that regard, Pimcore is both a decoupled and headless PIM system. Via the Pimcore Datahub and GraphQL, it provides data to 3rd party applications and internal APIs to Pimcore’s internal multichannel publishing functionalities. This allows you to tap the best of both worlds.
The Right Content on the Right Channel
With regard to being a headless PIM, Pimcore is compatible with all applications that can query and consume GraphQL-based content – among them, programming libraries such as React, Vue.js, and Angular or static site generators such as Next.js, Hugo or GatsbyJS. Pimcore can deliver the right product content to the correct output channel in GraphQL within minutes. This means, of course, that Pimcore is also compatible with the Jamstack philosophy.
Setting up a Headless PIM: A Step-By-Step Guide
Let’s create a whole headless product information management setup with Next.js delivery in less than half an hour. Of course, we are aware that we could have also just used the internal Pimcore rendering functionalities. But in this case, we explicitly want to go the headless route via GraphQL and deliver product content to Next.js, a popular open-source React-powered static site generator.
As Pimcore installation, we utilize the public demo.
Get the Free Demo Version Now!
Let’s get started!
In the first step, we set up a new data model (=Pimcore Class) "Test".
In this case, we have kept the data model really simple. We just have two fields: "name" and "description." Now we add some content.
Data model: Done. Added two content pieces: Done. Let’s set up the GraphQL datahub and add our "Test" data model.
Next, we define the permissions, the workspaces, and the API key.
Let’s check the GraphQL API for our defined data.
Now let’s install Node.js and Next.js on the local machine to test the headless PIM functionalities. All we need to do is build a simple Next.js page. This page calls the Pimcore GraphQL API to get the product data and outputs the Pimcore products.
And that’s it – we’re done! Piece of cake, right?
Now Pimcore can be used as a headless product information management software and deliver the right product content via GraphQL to 3rd party frontend applications.
Related Insights:
