Sentre
Search…
Folder Structure

The ./src

1
.
2
β”œβ”€β”€ app
3
β”‚ β”œβ”€β”€ configs
4
β”‚ β”œβ”€β”€ model
5
β”‚ β”œβ”€β”€ view
6
β”‚ β”œβ”€β”€ bootstrap.app.tsx
7
β”‚ β”œβ”€β”€ static
8
β”‚ └── static.app.tsx
9
β”œβ”€β”€ os
10
β”‚ β”œβ”€β”€ components
11
β”‚ β”œβ”€β”€ configs
12
β”‚ β”œβ”€β”€ providers
13
β”‚ β”œβ”€β”€ static
14
β”‚ β”œβ”€β”€ store
15
β”‚ └── view
16
└── shared
17
└── ...
Copied!
For casual development, focusing on ./src is barely enough to build a DApp. There're two main subdirectories in this folder you may work on frequently. The ./src/app is where your DApp will be organized. Besides, the ./src/shared contains many convenient components and utilities for development.

The ./src/app

You may create, rename, or delete any files or directories in this folder for your favorite structure. However, to let the mother platform could recognize your DApps, you MUST keep 2 files namely bootstrap.app.tsx and static.app.tsx.
The template is built for React + Redux development. Changing to another stack requires a deep understanding of Module Federation and Micro Frontend, which is not recommended. The stack of React + Redux is pretty easy to learn and strong for state management.

The ./src/shared

You can use a lot of built-in components and utilities that you find helpful while developing your DApps. For some components, we would like to write the docs directly in the components. About some utilities with complex API, we will do the explanation in this document.

The others

./plugins: Webpack's plugins to build the whole project.
./public: The project entrypoint.
./src/os: The platform implementation; aka the operating system.
./env.*: The set of environment configs.
./*.config.js: Build-time and run-time configs.
./.github: The Git Action definition