Store Framework is a front-end development framework designed to enhance and simplify the creation of ecommerce websites within VTEX. Built on the VTEX IO development platform and React technology, the framework offers native storefront components in JSON format.

Store Framework relies on the following pillars:

The diagram shows a typical Store Framework architectural flow, which includes the following components:

• Codebase: The source code for Store Framework and VTEX IO apps is cloud-native.
• Build process: The process of converting the source code into a deployable application, based on VTEX IO Builders.
• Deployment: The process of deploying the application to a production environment.
• Business user touchpoint: where administrative users interact with storefront settings, on CMS and Site Editor.
• Customer touchpoint: where customers interact with the storefront, usually on a webstore or PWA.

Developers using Store Framework can count on a set of tools:

• VTEX IO CLI: Interact with the VTEX platform using our command-line tool.
• A/B tests: Compare traffic between two workspaces.
• Edition App: Streamline your setup by installing a preset bundle of settings, policies, backend and frontend apps.
• Development workspaces: Test and preview your code in workspaces dedicated to development, without affecting the live store.
• Production workspaces: Run tests and quality assurance in a workspace that is ready to handle live traffic.
• Builders: Connect your apps to our services quickly using VTEX IO Builders.

To work with this framework, you should be familiar with the following technologies:

• VTEX IO
• React
• Node.js
• TypeScript
• GraphQL

This quickstart guide is a brief introduction to the VTEX Store Framework. For more detailed step-by-step documentation, check Store Framework - Getting started.

1. Install VTEX IO CLI. You will need it to run commands in the following steps.

2. Log in to your VTEX account:

   
   

   _10

   vtex login {accountName}

   
   

3. Open a support ticket to set up your account’s Edition app to vtex.edition-store@3.x or higher. Refer to the Edition App article to identify the most suitable version for your scenario.

4. Install Intelligent Search (if the account’s Edition app is vtex.edition-store@4.x or lower) and integrate it with your store’s catalog according to this guide.

1. Navigate to a local file directory where you want our boilerplate store theme to be saved:

   
   

   _10

   cd {folderName}

   
   

2. Start a new project:

   
   

   _10

   vtex init

   
   

3. Select store by navigating with your arrow keys and pressing Enter. When prompted to confirm, type y to clone the minimum-boilerplate-theme to your folder.

4. Create a workspace:

   
   

   _10

   vtex use {workspaceName}

   
   

5. Navigate to the minimum-boilerplate-theme directory:

   
   

   _10

   cd minimum-boilerplate-theme

   
   

6. Link your local repository with the workspace:

   
   

   _10

   vtex link

   
   

7. Access your workspace:

   
   

   _10

   vtex browse

   
   

Now you can make changes to the local repository and test them live in the workspace without altering the store's final public version.