Front-Commerce folder structure
This documentation 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
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).
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
/fr are store base URLs.
The config 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)
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.
You can override this file to add more functionality to your service worker such as push notifications.
Please note that 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("/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.