Front-Commerce folder structure

We encourage you to read Front-Commerce's codebase. This page explains how to find your way in our codebase.

Here is a quick overview of Front-Commerce's folder structure:

src/
├── public/
├── config/
├── server/
|   ├── express/
|   └── modules/
└── web/
    └── theme/
    |   ├── components/
    |   |   ├── atoms/
    |   |   ├── molecules/
    |   |   ├── organisms/
    |   |   └── templates/
    |   ├── modules/
    |   └── pages/
    └── service-worker.js

src/public/

The public folder is optional. public folder will be browesable on all stores of your site. You can put in it files you want to expose to the public (e.g. static assets).

P.S. The public folder is exposed on the store level. So if you put a file called text.txt inside it you will be able to get text.txt from /en/text.txt or /fr/text.txt where /en, /fr are store base URLs.

src/config/

The config contains all the files that allow you to configure the behavior of Front-Commerce.

See more details within the Reference documentation.

src/server/

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)

src/web/

the web 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.

src/web/service-worker.js

You can override this file to add more functionality to your service worker such as push notifications.

info

This file is not part of the build process (i.e. it would be copied as is). As such in order to import scripts using the importScripts you need to make sure that the path given to importScripts is browseable. The easiest way to do so is to add the files you want to import using importScripts directly inside the public folder. You should then be able to import them by using import("/a_store_base_url/path_to_file_to_import") e.g. import("/en/service-worker-push-notifications.js"). P.S. the /a_store_base_url is needed since the public folder is exposed on the store level. You can use any of your stores' base URLs as all will expose the same file.