Learning path to understand SharePoint Framework
| Folder | Purpose | | — | — | | config | Settings for bundling/deployment the package | | dist | Final code files which are distributed with your application | | lib | Processed code files which are ready to move into the bundle | | node_modules |JS modules used by the solution | | sharepoint | Default folder where the package/asset is exported | | src | Where you structure/write the code solution | | typings | TypeScript typings |
Below is described the best way to scaffold the source folder where all folders and files of your SPFx solution are going to live.
....
├── src
│ │── webparts
│ │ ├── MyCustomWebpart
│ │ │ ├── MyCustomWebpart.ts
│ │ │ ├── data
│ │ │ ├── loc
│ │ │ ├── models
│ │ │ ├── styles
│ │ │ ├── tests
│ │ │ ├── components
│ │ │ │ ├── ComponentName
│ │ │ │ │ ├── ComponentName.tsx
│ │ │ │ │ ├── IComponentNameProps.ts
│ │ │ │ │ ├── IComponentNameState.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── ComponentName.test.ts
│ │ │ │ │ └── styles.module.scss
│ │ │ │ ├── AnotherComponent
│ │ │ │ │ ├── ...
....
| Folder/File | Purpose | | — | — | | MyCustomWebpart.ts | Initial file that will instantiate the render of the webpart and manage its configuration panel settings | | data | To store api calls | | loc | To store localization strings | | models | To store the models of the objects to use on your webpart code | | styles | To store global styles and variables of the SCSS of the webpart | | tests | To store global tests of the webpart | | components | To store all the components that integrate the webpart |
Make sure each component folder follows/contains bellow recommendations: