Documentation
Feedback
Guides
Storefront Development

Storefront Development

Monorepo use cases

A FastStore monorepo can support different storefront modules, such as Product Discovery Experience, Checkout, and Sales App, depending on the merchant's needs.
This guide outlines common repository structures for these scenarios and provides example faststore.json configurations for each one. These examples can help to organize your monorepo based on your implementation requirements.
The following sections cover:

Single account with multiple modules

In this scenario, one VTEX account uses multiple storefront modules, each with its own directory within the monorepo.

Basic directory structure


_10
πŸ“‚ Account monorepo
_10
β”‚
_10
β”œβ”€β”€ πŸ“‚ packages
_10
β”‚ β”œβ”€β”€ πŸ“‚ discovery
_10
β”‚ β”œβ”€β”€ πŸ“‚ checkout
_10
β”‚ └── πŸ“‚ sales-app
_10
β”œβ”€β”€ πŸ“„ faststore.json
_10
β”œβ”€β”€ πŸ“„ package.json
_10
β”‚

faststore.json configuration example

faststore.json

_19
{
_19
"$schema": "https://unpkg.com/@vtex/fsp-config/faststore.schema.json",
_19
"stores": {
_19
"account1": {
_19
"discovery": {
_19
"path": "packages/store1",
_19
"port": 3001
_19
},
_19
"checkout": {
_19
"path": "package/checkout",
_19
"port": 3002
_19
},
_19
"sales-app": {
_19
"path": "package/sales-app",
_19
"port": 3003
_19
}
_19
}
_19
}
_19
}

Multiple brands or stores sharing code

In this scenario, a merchant has multiple brands or stores, each mapped to a different account or subaccount, yet all share the same FastStore monorepo.
With separate repositories, sharing code between brands or stores usually depends on publishing npm packages or copying files between projects. In a FastStore monorepo, each brand or store has its own directory within a single repository, and shared code lives in dedicated folders that can be imported wherever needed. This setup avoids duplicating code across repositories and makes it easier to maintain consistent implementations across storefronts.

Basic directory structure


_10
πŸ“‚ Account monorepo
_10
β”‚
_10
β”œβ”€β”€ πŸ“‚ packages
_10
β”‚ β”œβ”€β”€ πŸ“‚ store1
_10
β”‚ └── πŸ“‚ store2
_10
β”œβ”€β”€ πŸ“„ faststore.json
_10
β”œβ”€β”€ πŸ“„ package.json
_10
β”‚

faststore.json configuration example

faststore.json

_17
{
_17
"$schema": "https://unpkg.com/@vtex/fsp-config/faststore.schema.json",
_17
"stores": {
_17
"account1": {
_17
"discovery": {
_17
"path": "packages/store1",
_17
"port": 3001
_17
}
_17
}
_17
"account2": {
_17
"discovery": {
_17
"path": "packages/store2",
_17
"port": 3002
_17
},
_17
}
_17
}
_17
}

Multiple brands or stores with multiple modules

In this scenario, a merchant has multiple brands or stores, and each of them can use more than one storefront module. All brands or stores share the same FastStore monorepo, but each has its own directory and module configuration.

Basic directory structure


_12
πŸ“‚ Account monorepo
_12
β”‚
_12
β”œβ”€β”€ πŸ“‚ packages
_12
β”‚ └── πŸ“‚ store1
_12
β”‚ β”œβ”€β”€ πŸ“‚ discovery
_12
β”‚ └── πŸ“‚ checkout
_12
β”‚ └── πŸ“‚ store2
_12
β”‚ β”œβ”€β”€ πŸ“‚ discovery
_12
β”‚ └── πŸ“‚ checkout
_12
β”œβ”€β”€ πŸ“„ faststore.json
_12
β”œβ”€β”€ πŸ“„ package.json
_12
β”‚

faststore.json configuration example

faststore.json

_25
{
_25
"$schema": "https://unpkg.com/@vtex/fsp-config/faststore.schema.json",
_25
"stores": {
_25
"account1": {
_25
"discovery": {
_25
"path": "packages/store1",
_25
"port": 3001
_25
},
_25
"checkout": {
_25
"path": "packages/checkout",
_25
"port": 3002
_25
}
_25
},
_25
"account2": {
_25
"discovery": {
_25
"path": "package/store2",
_25
"port": 3001
_25
},
_25
"checkout": {
_25
"path": "package/checkout",
_25
"port": 3002
_25
}
_25
}
_25
}
_25
}

Contributors
1
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
Was this helpful?
Suggest edits (GitHub)
On this page