Skip to main content
Version: 3.x

Front-Commerce folder structure

Here is an overview of Front-Commerce V3's folder structure:

/
├── app/
│ ├── config/
│ ├── routes/
│ ├── theme/
│ ├── entry.client.tsx
│ ├── entry.server.tsx
│ ├── entry.worker.ts
│ └── root.tsx
├── extensions/
├── example-extensions/
├── lang/
├── public/
├── front-commerce.config.ts
└── .env

Core Directories​

app/​

The app directory is the heart of your Front-Commerce application. It follows modern React application patterns and contains:

  • config/: Application-specific configurations
  • routes/: Contains your application's routes and layouts
  • theme/: Houses your UI components, following similar organization principles as V2 (atoms, molecules, organisms, etc.) (see React components structure for more information)
  • entry.client.tsx: Client-side entry point for your application
  • entry.server.tsx: Server-side rendering entry point
  • entry.worker.ts: Service worker initialization
  • root.tsx: Root component of your application

lang/​

This directory contains the translations for your application. See Translate your application for more information.

public/​

The public directory contains static assets that will be served directly by the web server. You can put in it files you want to expose to the public (e.g. static assets).

.front-commerce/​

This directory is generated at runtime and contains Front-Commerce's build artifacts. It is not meant to be modified directly, and every changes here will be overwritten when the application is built.

Configuration Files​

front-commerce.config.ts​

The main configuration file for your Front-Commerce application. It defines:

  • Application settings
  • Module configurations
  • Extension configurations
  • Build and runtime options

.env​

Environment-specific configuration file containing:

  • API endpoints
  • Authentication credentials
  • Feature flags
  • Other environment-specific variables

Suggestions​

extensions/​

The skeleton comes with an extensions directory where you can add custom extensions to enhance your application. While this naming is not required, we recommend integrators to centralize their extensions in a similar manner to keep their codebase clean and organized.

example-extensions/​

This directory provides example extensions from our demos that serve as learning resources for building your own extensions.