⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Understanding the Project Structure

In the previous guide of this track, you started your first FastStore project, learned how to run a local server, and made your first changes to the storefront. Now, it is time to understand how a FastStore project is structured.

By understanding the structure of a FastStore project, you can better navigate the codebase and make customizations to fit your specific needs.

Let's start taking a look at the structure that represents the source code of a FastStore project:

/
|-- /.faststore
|-- /src
    |-- /themes
        |-- custom-theme.scss
|-- cypress.config.ts
|-- faststore.config.js
|-- next-env.d.ts
|-- package.json
|-- README.md
|-- tsconfig.json
|-- vercel.json
|-- vtex.env
|-- yarn.lock

Folders

  • /.faststore - Manages and coordinates the FastStore project to deliver a functional starter store. This folder, also known as @faststore/core, provides the core functionality of the FastStore starter.

  • /src - Contains all of your store's customizations, including your custom components and theme.

  • /themes - Keeps your store's theme, such as midnight

Files

  • custom-theme.scss - Holds the styling information for your store, controlling the graphic elements such as typography, colors, borders, and spacing that provide your store with a unique look and feel.

  • cypress.config.ts - Configures the options and preferences required for running tests with Cypress.

  • faststore.config.js - Configures aspects of the project such as SEO preferences, VTEX account options, and theme. Note that these configurations are set during the onboarding process, reducing the need for changes to this file. For more information on configuration options for this file, refer to Configuration options for faststore.config.js.

  • next-env.d.ts - Generates a TypeScript definition file for Next.js.

  • tsconfig.json - Configures the compiler options and project settings for TypeScript, including target version, module resolution, and source file locations.

  • vtex.env - Holds environment variables that your application can access during runtime, such as API keys and database credentials.

  • yarn.lock - Locks down the exact versions of your project's dependencies, including transitive dependencies, to ensure consistent builds across different machines and environments. This file is automatically generated based on the dependencies in your package.json file.

package.json

Defines the project's metadata and handles dependencies and scripts using Yarn (opens in a new tab). Let's take a closer look at three important packages declared in this file:

@faststore/core

Bundles FastStore source code, including the FatsStore starter: starter store. It contains four sub-packages, Components, SDK, UI and API, which handle the starter.

@faststore/cli

Provides scripts for building, running, debugging, and deploying your FastStore project. This package helps with debugging and differentiating between VTEX code and customizations. To learn more, refer to the FastStore CLI documentation.

2. Setting Up the Project4. FastStore CLI