{"section":"tutorials","requestedLocale":"en","requestedSlug":"managing-projects","locale":"en","slug":"managing-projects","path":"docs/en/tutorials/storefront/headless-cms/managing-projects.md","branch":"main","content":"Projects is a feature in the VTEX Headless CMS that simplifies the management of multiple frontend projects, such as mobile apps, websites, and email marketing, from one control panel.\n\n![Projects pages](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/headless-cms/managing-projects_1.gif)\n\nEach project is customized with its own settings, content, and branding according to specific audiences or purposes. \n\nIn this guide, you will learn how to manage each frontend project of your store.\n\n## Before you begin\nFor the Headless CMS management, make sure the [resources](/en/docs/tutorials/license-manager-resources) `See CMS menu on the top-bar`, `Settings*`, and `CMS GraphQL API` are associated with your [user role](/en/docs/tutorials/roles). Otherwise, [create a custom user role](/en/docs/tutorials/roles#creating-a-role) and add these resources to it or add these resources to an existing user role.\n\n## Overview\nTo access **Projects**, go to the VTEX Admin and access **Storefront > Headless CMS**.\n\n![Projects overview](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/headless-cms/managing-projects_2.png)\n\n| Option         | Description                                           |\n| -------------- | ----------------------------------------------------- |\n| Project card   | Opens the selected project, allowing you to create and edit pages for the project content.      |\n| Settings (⚙️)  | Opens a modal that displays project configurations organized into three tabs: <ul><li>**General:** Edits the project ID and API settings or archives the project.</li> <li>**Content-Types:** Connects the Headless CMS project with your code source through webhooks by setting up the content types and sections.</li> <li>**Build:** Initiates and manages website builds. Set a webhook URL for build notifications and an endpoint to preview the page versions. </li></ul>       |\n| Create new       | Opens a page to configure a new project from scratch. |\n\n## Creating a new project\n\nCreate a new project for your store by setting general settings such as **Project ID**. To effectively connect a Headless CMS project with your project's source code, you will also need to set up webhooks and build settings such as *Build Webhook URL* and *Preview URL*. \n\nA webhook is an HTTP endpoint that enables automated communication between the VTEX Headless CMS and the project's source code. For example, it allows the CMS to notify a FastStore project of content changes or other events, triggering actions like real-time content synchronization.\n\n1. In the **Projects** page, click `Create new`.\n2. In the **New project** page, fill in the fields according to the [Project settings](#project-settings) section.\n3. After setting each field of the page, click `Create` and a successful message will appear on the screen.\n\nOnce you have created a new project, you can create pages for it with all the URL routes and corresponding page templates of your store’s website, such as home, product, and login pages. \n\nTo create a new page, follow the steps in [Managing Pages in the Headless CMS](/en/docs/tutorials/managing-pages)\n\n## Project settings\nThe Project settings allow you to configure your project according to three main categories:\n\n- [General](#general): Edits the project ID, API settings and archives the project.\n- [Content-Types](#content-types): Connects the Headless CMS project with your code source through webhooks by setting up the content types and sections. \n- [Build](#build): Initiates and manages website builds. Set a webhook URL for build notifications and an endpoint to preview the page versions.\n\n### General\n\n| Field name             | Description           | Value example     |\n| ---------------------- | --------------------- | ----------------- |\n| Project ID (mandatory) | ID of the project.    | E.g., `faststore`       |\n| Storefront      | Defines the VTEX storefronts available (`FastStore` or `Custom`) and their purpose.  | See the [Storefront](#storefront) section for more information. |\n\n#### Storefront\n\nThis field determines the [build](#build) configuration settings based on your chosen storefront. Options include:\n\n- **VTEX Storefronts**:\n\nChoose a storefront from your account (e.g., FastStore). [Build](#build) automatically adjusts based on the storefront chosen. You can still customize them later.\n\n- **Custom**\n   Choosing a `Custom` storefront gives you the flexibility to define your own [build](#build) settings.\n\n### Content-Types\n\n| Field name             | Description           | Value example     |\n| ---------------------- | --------------------- | ----------------- |\n| Sections URL | Webhook URL for receiving and saving the sections created in the source code in the Headless CMS. | E.g., `https://infra.io.vtex.com/vbase/v0/{accountName}/master/buckets/vtex.admin-cms-graphql-rc/store/files/{projectId}/sections`       |\n| Content types URL       | Webhook URL for receiving and saving the content types created in the source code in the Headless CMS.       | `https://infra.io.vtex.com/vbase/v0/{accountName}/master/buckets/vtex.admin-cms-graphql-rc/store/files/{builderId}/content-types`       |\n\n### Build\n\n| Field name             | Description           | Value example     |\n| ---------- | ---------- | ---------- |\n| Sections URL      | Webhook URL for receiving and saving the sections created in the source code in the Headless CMS.       | `https://infra.io.vtex.com/vbase/v0/{accountName}/master/buckets/vtex.admin-cms-graphql-rc/store/files/{builderId}/sections`      |\n| Content types URL       | Webhook URL for receiving and saving the content types created in the source code in the Headless CMS.       | `https://infra.io.vtex.com/vbase/v0/{accountName}/master/buckets/vtex.admin-cms-graphql-rc/store/files/{builderId}/content-types`       |\n| Build Webhook URL      | Webhook URL for starting a new build in the Headless CMS when a page or content is added or edited.</br>[Known Issue – Headless CMS Data Mocking Between Workspaces](/en/known-issues/headless-cms-is-not-mocking-data-between-workspaces--iDUOWMDKXPb6ZjO19kmO7): Due to a data-mocking issue, drafts created in any workspace currently appear in the master environment. This means changes that should be isolated to individual workspaces are visible in the master workspace. | `https://app.io.vtex.com/vtex.cms-builder-sf-jamstack/v1/{accountName}/master/build-releases` |\n| Save Webhook* URL       | Webhook URL for enabling real-time previews of the project by notifying you to refresh the page to reflect the latest changes in the Headless CMS.      | -      |\n| Preview URL      | Webhook URL that provides the preview for pages in the Headless CMS.       | `https://{accountName}.vtex.app/api/preview`      |\n\n## Editing a project\nAfter creating the project, you can also edit all the information you have set during the [creation of it](#creating-a-new-project).\nhave set during the [creation of it](#creating-a-new-project).\nOn the Projects main page, click Settings (⚙️), and a modal window will open with two tabs for [General](#general) and [Build](#build) settings.\n\n### Restoring default Sections URL\n\nOnce you have [created the project](creating-a-new-project) and want to edit the [**Sections URL**](#content-types) field click `Edit`, add the new webhook URL and click `Save`. If you want to restore the default URL, click `Restore default`.\n\n## Archiving a project\nArchiving a project disables the API and access to the content within the project. \nTo archive a project, follow the steps below:\n\n1. Go to **Storefront > Projects**.\n2. Choose the project you want to archive and click **Settings** (⚙️) to open a modal.\n3. Click `Archive project` on the `General` page. A pop-up message will appear to confirm that you want to archive the project.\n![Archive project](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/headless-cms/managing-projects_3.png)\n4. Click `Archive`. A message informing that the project was successfully archived will appear.\n\nIf you want to restore an archived project, follow the steps in [Restoring a project](#restoring-the-project).\n\n### Restoring a project\nRestoring a project re-enables its API and allows the content within the project to be accessible once again.\nTo restore the project, follow the steps below:\n\n1. Go to **Storefront > Projects**.\n2. Click the archived project card.\n3. Click `Restore project`. A pop-up message will appear to confirm if you want to restore the project.\n4. Click `Restore`. A message informing that the project was successfully restored will appear."}