Skip to main content

Project structure

The project structure should feel familiar to anyone who has worked on any corporate project. This structure follows standard practices and uses separation of concern to separate all the different parts of the application to their own folder.

Here is the structure of the important folders

.
├── configs
├── custom-bootstrap
├── dist
│   ├── manifest-v2
│   └── manifest-v3
├── docs
├── public
│   ├── css
│   ├── icons
│   ├── js
│   ├── manifest-common.json
│   ├── manifest-v2.json
│   └── manifest-v3.json
├── src
│   ├── components
│   ├── popup
|   |   ├── components
|   |   ├── localization
|   |   |   ├── locales
|   |   |   └── i18n.ts
|   |   ├── models
|   |   ├── index.html
|   |   ├── index.tsx
|   |   └── routes.tsx
│   └── services
└── index.html

Here is a brief summary of what the folders do and what they contain

configs/​

configs/ - it contains different webpack configurations for building different manifest versions of the extension

custom-bootstrap/​

custom-bootstrap/ - it contains configuration to customize the bootstrap. How to customize it, we'll discuss it in another section

dist/​

dist/ - it contains the final compiled output of the different manifest versions after you've run the build command

docs/​

docs - it contains the doc in the docs.html file inside it

public/​

public - anything placed in this folder is outputted as is in the final distribution so that our app can reference these.

src/​

src/ - it contains all the source files

src/components/​

src/components/ - this folder contains different global components that is used in different sections of the project

src/popup/​

src/popup/ - this contains the code for the popup, currently there is a sample todo app in it

src/services/​

src/services/ - this folder contains different helper services or ts files that contains some utility or our business logics

popup/components/​

popup/components/ - different components of the popup

popup/localization/​

popup/localization/ - this contains different translations in the locale folder inside it. Currently the german and english translations are included and sample for how to change language is included in the sample app. How to change translations or add new language is discussed in another section.

popup/models/​

popup/models/ - this will contain different model class or interfaces that is used to pass data between different layers in the popup. These models are used to communicate data between services and ui components