File structure

Key Files and Folders

This is not a complete list of files and folders. Just the key files you'll need to know about to get started.

client/
    |- build
    |- config
    |- i18n
    index.js
    moduleOverride.js
    |- node_modules
    package.json
    prettier.config.js
    |- public
    |- src
        App.js
        |- assets
        |- components
        manifest.webmanifest
        |- pages
        |- styling
            icon.js
            theme.js
    sw.js

build

The build directory contains the built assets for your site. This should not be committed to your git repo.

config

The config directory contains Falcon Client config json files (default.json, production.json etc). In these files you'll be able to configure things like the port Falcon Client is running on.

i18n

This directory contains your sites translations. The structure is <language>/translations.json. e.g. en/translations.json for english translations.

index.js

This is where everything starts. Other that exporting the app and client state nothing much happens here.

moduleOverride.js

From this file you can override components from within node packages. This is create if you want to change a component from @deity/falcon-ui-kit for example. Find out more about overriding.

node_modules

This is where npm packages are installed to.

package.json

This defines project details including package requirements.

prettier.config.js

Falcon Platform uses Prettier for code formatting. You can change the config in this file.

public

This folder is publicly accessible. You can use it for files such as robots.txt.

src/App.js

This file contains your app. Everything in Falcon Client starts here. A lot happens in this file including mapping components to routes.

src/assets

This is where static assets live. It's a great place to put files like touch icons and other similar images.

src/components

This is the home to your global components such as the header.

src/manifest.webmanifest

This file contains your sites manifest.json config.

src/pages

This is the home to page & page specific components. You'll find most of the checkout and shop components in here.

src/styling/icon.js

This file exports SVG icons to be used throughout the site.

src/styling/theme.js

This file contains your theme variables such as colors and spacing. More information on theming.

sw.js

This is compiled into your sites service worker. You can add to this if you need custom service worker code.

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.