Part 1: Configuring your VTEX account with the Headless CMS
Let's set up all the tools you need to integrate the Headless CMS with your FastStore project. First, we will install the VTEX IO CLI.
The VTEX IO CLI will help you during your development process by allowing you to perform different actions in the VTEX platform. In the following, we will install and configure the Headless CMS app in your VTEX account.
Before you begin
Before you proceed with setting up the Headless CMS in your account, make sure you:
Install the Headless CMS, its dependencies and plugins
Make sure that you have installed the
vtex.admin-cms@1.x
, its dependencies and plugins as described in the FastStore requirements.Have a FastStore project
Make sure you have a FastStore project after completing the process through the FastStore WebOps. For detailed instructions, please refer to the Starting a new FastStore project guide.
Install the VTEX IO CLI
Make sure that you have installed the VTEX IO CLI on your machine. This CLI is required to install the Headless CMS plugins and CMS dependencies. For more information, please refer to the Installing VTEX IO CLI guide.
Instructions
Step 1 - Configuring the Headless CMS
Configure the URLs of the webhooks used by the Headless CMS app.
-
In the VTEX Admin, access Storefront > Headless CMS.
-
In the FastStore project interface, click on
Settings
(⚙️). -
In Settings, click the
Build
tab. -
In Build Webhook URL, click
Add
. -
Enter the following value. Replace the values between curly brackets according to your scenario._10https://app.io.vtex.com/vtex.cms-builder-sf-jamstack/v1/{account}/master/build-releases
-
Click SAVE.
When an editor clicks to publish a page using the Headless CMS interface, the CMS calls the Build Webhook URL, which changes the page's status topublished
. The CMS then waits for the content to be built in the background.
- Fill in the Preview URL field with your production URL. This URL activates the button on Headless CMS so you can preview the changes made on a page. Replace the values between curly brackets according to your scenario.
Step 2 - Communicating WebOps updates to the Headless CMS
If you are developing your FastStore project with CI/CD and Headless CMS, you must ensure that CI/CD is aware of every CMS update performed via the VTEX Admin. To do so, you must configure the WebOps webhooks responsible for communicating with the Headless CMS as in the following.
-
Open your FastStore project in any code editor of your preference.
-
Edit the
discovery.config.js
file in the root directory of your project. -
In the Headless CMS configuration, add the
webhookUrls
property corresponding to your store website as in the following: -
Open a Pull Request in your project, including the previous changes.
-
Merge the Pull Request.
Now you can make changes to the Headless CMS and check if commits are being created in the project. In the following example, the
Hero
title was modified to 10% off on first purchase
, and we can see that it generated a commit in the repository.