Front-Commerce folder structure
This documentation is a quick overview of Front-Commerce’s folder structure. If you don’t have access to the code yet, you will notice that Front-Commerce Lite structure is the same. Installing it and browsing through some actual code may help you better understand our choices.
src/ ├── config/ ├── server/ | ├── express/ | └── modules/ └── web/ └── theme/ ├── components/ | ├── atoms/ | ├── molecules/ | ├── organisms/ | └── templates/ ├── modules/ └── pages/
It contains all the files that allow you to configure the behavior of Front-Commerce.
See more details within the Reference documentation.
The server contains… the server code! There are two parts:
express/: the node server definition that serves the responses to client requests. This includes Server Side Rendering, GraphQL endpoint, image proxy, session handlers, etc. (see Add custom endpoints to your server)
modules/: the modules that compose your GraphQL schema. This includes type definitions, resolvers, etc. (see Extend the GraphQL Schema)
It contains the client part of the application. As a developer that uses
Front-Commerce, only one folder is interesting inside of
src/web/. It is the
theme folder which defines what your site will look like. This folder is
composed of three subfolders:
components/: contains all the code that defines the look & feel of your site. It follows the Atomic Design principles. (see Create a UI Component)
modules/: contains all your components that are not related to the style of your application. (see Create a Business Component)
pages/: contains all the root components of your application that are mapped to a URL. (see Add a new page)
In order to learn more about it, please refer to React components structure.