FastStore is a toolkit based on Jamstack that helps developers build high-performance stores.

It supports integration with Headless CMS, offers analytics functionalities to inform storefront decision-making, and gives developers the flexibility to customize the store based on the brand’s vision, creating a unique shopping experience for users.

The diagram above shows a FastStore architectural flow, which includes the following components:

• Codebase: Source code of the FastStore project hosted on GitHub.
• Build process: Process of converting the source code into a deployable project through FastStore WebOps.
• Deployment: Process of deploying the project to a production environment through FastStore WebOps and quality assurance bots.
• Business user touchpoint: Environment where admin users interact with storefront settings on VTEX Headless CMS.
• Customer touchpoint: Environment where customers interact with the storefront, in this case, the store website.

These are the tools that developers use to build and deploy FastStore projects. They include:

• FastStore CLI: Command-line interface (CLI) that can be used to interact with FastStore.
• VTEX IO CLI: CLI used when the project needs to interact with the VTEX platform.
• Localhost preview: Tool that allows developers to preview their FastStore projects locally.

FastStore consists of five main packages that enable the store to work:

• Core: Provides the starter source code to get your store up and running. It contains four sub-packages: Components, SDK, UI, and API packages.

• SDK: Provides developers with a set of tools that handle all meaningful states an ecommerce store might have, such as Session, Cart, Component, and Search. The SDKs also provide GA4-compatible analytics functions to help you create powerful analytics capabilities in your ecommerce store.

• UI: Gathers the design system based on FastStore components, using Sass for styling.

• API: Connects your project to your favorite ecommerce provider by creating interfaces for querying products, collections, and handling carts.

• CLI: Unifies the VTEX source code in @faststore/core with the customizations and extensions the store will create in the /src folder.

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

• TypeScript
• React
• Next.js
• GraphQL
• Node.js

Follow the getting started track below to build and deploy a FastStore storefront at the domain https://{accountName}.vtex.app/.

Before starting the project, make sure you have the necessary tools and apps installed in your account or your local development environment. See the Requirements guide for more information.

After you have prepared your machine with the initial settings, you can start your project by following the steps below:

1. FastStore WebOps: Start the onboarding of your project with the FastStore WebOps app. This app streamlines the process, saving you the trouble of complex configurations and getting your project up and running quickly.

2. Local Development: After onboarding, start working on your store locally, making the initial changes and adjustments to your storefront.

Now that you have your FastStore project running, extend your store functionalities by working with FastStore customization tools: