Part 2: Setting up the VTEX Headless CMS in your FastStore project

Now that you are familiar with the core concepts of the VTEX Headless CMS and have set it up in your VTEX account, let's get back to our FastStore project to define our own Content Types and Sections.

By the end of this part of this tutorial, you will be able to see the definition of a Content Type available for use at the VTEX Headless CMS app.

Step by step

Step 1 - Creating the CMS folder

Open the terminal and change to the root directory of your FastStore project.
Create a new folder named cms at the root of your FastStore project. Inside cms create another folder for your project:

- MacOS:

mkdir cms/faststore

- Windows:

mkdir cms\faststore

- Linux:

mkdir cms faststore

Create the three files below inside the faststore folder by running the touch command:

    touch cms/faststore/content-types.json cms/faststore/sections.json cms/faststore/translation-keys.json

File name	Description
`content-types.json`	An array of JSON objects that describes the Content Types available for customization at the VTEX Headless CMS app.
`sections.json`	An array of JSON objects that describes the content structure of the frontend Section components available for customization at the VTEX Headless CMS app.
`translation-keys.json`	an array of JSON objects that defines the translation keys of the Sections descriptions.

Update the sections.json file with an empty array:

   echo "[]" > cms/faststore/sections.json

Update the translation-keys.json file with an empty object. :

   echo "{}" > cms/faststore/translation-keys.json

Open the content-types.json file in any code editor of your choice and add the following code:

  [
    {
      "id": "customPage",
      "name": "Custom Page",
      "configurationSchemaSets": [
        {
          "name": "Settings",
          "configurations": [
            {
              "name": "seo",
              "schema": {
                "title": "SEO",
                "description": "Search Engine Optimization options",
                "type": "object",
                "widget": {
                  "ui:ObjectFieldTemplate": "GoogleSeoPreview"
                },
                "required": [
                  "slug",
                  "title",
                  "description"
                ],
                "properties": {
                  "slug": {
                    "title": "Path",
                    "type": "string",
                    "default": "/"
                  },
                  "title": {
                    "title": "Default page title",
                    "description": "Display this title when no other title is available",
                    "type": "string",
                    "default": "FastStore Starter"
                  },
                  "description": {
                    "title": "Meta tag description",
                    "type": "string",
                    "default": "A beautifully designed store"
                  },
                  "canonical": {
                    "title": "Canonical url for the page",
                    "type": "string"
                  }
                }
              }
            }
          ]
        }
      ]
    }
  ]

ℹ️

Don't worry about the structure of this file for now, as we'll learn more about it later in this tutorial. However, notice that we have defined the Custom Page content type.

Save your changes in the content-types.json file.

Step 2 - Syncing your changes

Let's now sync our changes with the VTEX Headless CMS app and see what happens.

Open the terminal and log in to your VTEX account.
Create a new development workspace by running the following command. Remember to replace the values between curly brackets according to your scenario:

   vtex use {workspace}

⚠️

Use a development workspace to try your definitions of Sections and Content Types before syncing them with the VTEX master workspace.

Change to the root directory of your FastStore project.
Sync your changes in the cms folder with the VTEX Headless CMS app:

    yarn faststore cms-sync

⚠️

If you have the @vtex/cli-plugin-cms@1.0.7 installed you can use the {builderName} argument to syncronize a specific builder: vtex cms:sync {builderName}.

Once your changes are synced with the VTEX Headless CMS, the terminal will show the following message.

  CMS synced successfully...

Step 3 - Checking your changes

Access the VTEX Admin using the workspace you previously created (e.g., https://{workspace}--{account}.myvtex.com/admin).
Go to Storefront > Headless CMS.
Click on Create New.

You should now see the Content Type we created in the previous step available for use at the VTEX Headless CMS app. However, no sections or translation keys will be available yet. We'll learn more about this in the following part of this tutorial.

1. Configuring your VTEX account with the VTEX Headless CMS Error installing the Headless CMS plugin of VTEX IO CLI