Directory and File Name and Structure Conventions
Common ways to structure your project
It is important to plan and organize the hierarchy of your directory and files. Some directories, subdirectories, and files in UI Framework must be created with specific hierarchy and naming conventions. This page gives you an overview of what those requirements are and what are best practices.

Directory structure

An example of what a UI Framework project can look like.
1
exampleRepository
2
├── examplePackage
3
| └── seed
4
│ | └── routes
5
| └── config
6
│ | └── customThemeTemplate
7
| └── src
8
│ | └── epics
9
│ | └── ui
10
│ | | └── UiSdlApplicationStateLBE.c3typ
11
│ | | └── UiSdlApplicationStateLBE.ts
12
| └── test
13
│ | └── seed
14
│ └── ui/c3/meta
15
│ | └── components
16
│ | └── pages
17
│ └── package.json
18
└── repository.json
Copied!

Folder name

Folder names must be the Type name. For example, if we wanted to create routes, we would have to create a UiSdlRoute folder. This folder would contain the files that create routes. We must name the folder UiSdlRoute is because UiSdlRoute is the Type we use. The same logic is applicable for themes and styles like UiSdlConfig.

File name

File name
Descriptions
<packageName>.<componentDescription>.json
These are the naming conventions for components. When creating routes, the componentDescription must be the same as the targetPageName. Go to Routes for more information.
UiSdlApplicationStateLBE.c3typ UiSdlApplicationStateLBE.ts
The collections of your reducers and actions. Go to States for more information.
UiSdlEpicDescriptionofEpic.c3typ UiSdlEpicDescriptionofEpic.ts
Epics must have the word Epic in the file name. Go to Epics for more information.
Export as PDF
Copy link