Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
Requirements

This guide provides the requirements for starting a FastStore project.

Before starting a FastStore project, you must have the necessary tools and apps installed in your VTEX account. This guide walks you through the required steps to ensure you have everything set up correctly.

Instructions

Step 1. Installing VTEX IO CLI on your machine

The VTEX IO CLI is the command-line interface you'll use to manage your VTEX projects. If you haven't already done so, install it on your machine. For detailed instructions, refer to this guide.

Step 2. Installing Headless CMS and its dependencies

Headless CMS is the content management solution for FastStore projects. During project onboarding, the integration between your project and Headless CMS is set up.
To prevent content duplication that could cause build failures during project onboarding, it is important to confirm the installation of the following apps in your account:
  • vtex.admin-cms@1.x
  • vtex.admin-cms-graphql-rc
To check whether you have them installed, follow the instructions below:
  1. Open the terminal and log in to your account using the following command. Remember to replace {accountName} with your account name.

    _10
    vtex login {accountName}

  2. Run vtex ls to list all the installed apps in your account.
  3. Check if vtex.admin-cms@1.x and vtex.admin-cms-graphql-rc are in the list. If so, proceed to the next step. Otherwise, follow these instructions.
  4. After logging into your account, install vtex.admin-cms@1.x by running the following command:

    _10
    vtex install vtex.admin-cms@1.x

    A success message will confirm the installation:
    {"base64":"  ","img":{"width":2018,"height":486,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":122705,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/cms-install___7144afabf5a895ba92905926808507b2.png"}}
  5. Install the Headless CMS dependency by running the following command:

    _10
    vtex install vtex.admin-cms-graphql-rc

Once the app and its dependency are installed, proceed to the next step.

Step 3. Installing Headless CMS plugins

To ensure you don't encounter errors while running Headless CMS commands in the CLI, install Headless CMS plugins by following these steps:
  1. Open the terminal and log in to your VTEX account using the VTEX IO CLI:
    Remember to replace the value between curly brackets with your account name.

    _10
    vtex login {accountName}

  2. Install Headless CMS plugins:

    _10
    vtex plugins install cms

Now, check if the installation of Headless CMS plugins was successful by running vtex cms.
{"base64":"  ","img":{"width":2142,"height":636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":123285,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/faststore-vtex-cms___460365970fb39c94e300b9fbd497e17e.png"}}
  • For Windows users: If you encounter problems while installing the plugin, please refer to the Troubleshooting article
  • For macOS users: If you encounter problems, run yarn config set ignore-engines true to ignore the Node.js version incompatibility, then run vtex plugins install cms again.
We recommend using the latest Node.js version or a version greater than 15.0.0.

Step 4. Enabling the VTEX Intelligent Search app in your account

The VTEX Intelligent Search app enhances the user experience by providing accurate and personalized search results throughout the shopping journey. Before developing a storefront in FastStore, you need to enable the app in your account. For more information about Intelligent Search and its integration, please refer to the VTEX Intelligent Search and Integration Settings guides.
To enable the app, check which version of the Edition App is installed in your account.
Based on the edition version, follow the instructions below.
To confirm which Edition App version is installed in your account, open the terminal and use the VTEX IO CLI. Log in to your account by running vtex login {accountName} and run vtex edition get to see the Edition App version installed in the current account.
Accounts using the vtex.edition-store@5.x
If your account is using the vtex.edition-store@5.x major version, the VTEX Intelligent Search app is already included, and you must integrate it via VTEX Admin.
To integrate VTEX Intelligent Search, go to the VTEX Admin, access Store Settings > Intelligent Search > Integrations, and click START INTEGRATION.
Accounts using an edition version below 5.x
  1. In the VTEX IO CLI, log in to your VTEX account by running vtex login {accountName}. Remember to replace the value between curly brackets with your account name.
  2. If the VTEX Intelligent Search app is not installed in your account, run the following command to install it:

    _10
    vtex install vtex.search-resolver@1.x vtex.admin-search@1.x

After successfully installing the app, access VTEX Admin, navigate to Store Settings > Intelligent Search > Integrations, and click START INTEGRATION.
Accounts wishing to migrate to the 5.x
If you are using a different major version and want to migrate, please open a ticket with VTEX Support and request the installation of the Edition Store vtex.edition-store@5.x.

Step 5. Installing the FastStore WebOps app

The FastStore WebOps app is the first step in creating, setting up, and managing your FastStore project. It also provides deployment and performance insights into your website.
The FastStore WebOps app only works in stores using the Edition Store. If your store uses the Edition Business, also known as using the Legacy CMS Portal technology, make sure to open a support ticket to change it to the Edition Store. Once you have changed the edition, follow the instructions in this requirements guide.
To install the app, follow these steps.
  1. In a terminal, log in to your VTEX account by running the following command. Replace {accountName} with your store account name, for example, vtex login store.

    _10
    vtex login {accountName}

  2. Install the FastStore WebOps app by running the following command:

    _10
    vtex install vtex.webops

    The FastStore WebOps app only works in the production environment, so you must install it exclusively in your account's master environment.
  3. A confirmation message will appear. Type y to proceed.

    _10
    ? Are you sure you want to force this operation on the master workspace on the account store? ยป (y/N)

The FastStore WebOps app is now installed in your account. Refer to the FastStore WebOps app guide to create your first FastStore project.
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
On this page