Integrating a frontend app with Site Editor

Store Framework Working with Site Editor Integrating a frontend app with Site Editor

Learn how to integrate a frontend app with Site Editor.

Once you have developed a frontend app using VTEX IO, the next step is to declare this app in the dependencies of the Store Theme app. This step is essential to make your custom frontend app available in Site Editor.

In this guide, you will learn how to integrate your custom frontend app with Site Editor.

Before you begin

Create your frontend app following the guide Creating the new app.
Develop a Store Theme for your store, following the Storefront guide.
Check if your Store Theme has the Builders properly installed. You must have at least the following builders configured:
- store builder: Enables the development of Store Framework storefronts.
- react builder: Used to develop apps with React when your project requires customized frontend solutions.

Instructions

Step 1 - Declaring your app in Store Theme dependencies

Follow the steps below to update your Store Theme dependencies with the name and version of your frontend app.

Open the Store Theme app folder in your local files using the code editor of your choice, such as Visual Studio Code.
In the Store Theme manifest.json file, add your app to dependencies, following this pattern: "{accountName}.{appName}": "{appVersion}". See the example below:

_12"dependencies": { _12 "{accountName}.{appName}": "{appVersion}", _12 "vtex.store": "2.x", _12 "vtex.store-header": "2.x", _12 "vtex.product-summary": "2.x", _12 "vtex.store-footer": "2.x", _12 "vtex.store-components": "3.x", _12 "vtex.styleguide": "9.x", _12 "vtex.slider": "0.x", _12 "vtex.carousel": "2.x", _12... _12}

Step 2 - Using a component of your frontend app within a store page

Consider your frontend app has a component named CustomComponent, which is declared in a block interface as custom-component:

frontend-app/store/interfaces.json


_10{
_10  "custom-component": {
_10    "component": "CustomComponent"
_10  }
_10}

To use this component on the store’s main page, for example, declare the custom-component block within the home block:

store-theme/store/blocks/home/home.jsonc


_10{
_10  "store.home": {
_10    "blocks": ["custom-component"]
_10  }
_10}

Step 3 - Making your component available in Site Editor

By linking the Store Theme app, your component will be available to visualize and test in Site Editor within the corresponding development workspace.

Learn how to create a custom component within your Store Theme app and make it editable directly in Site Editor by following the guide Making a custom component available in Site Editor.