Directory layout of the application

Refer to the tables in this topic to understand the directory layout of the application.

Table 1. Directory structure for the application-provided source code
Directory/File	Purpose
src/app	Contains the component files in which the application logic and data are defined. The role of `AppModule` is to Bootstrap the Angular application and provide the root-level router outlet.
src/app/app-shell	The `AppShell` module is responsible for initializing the core services of application after login and navigation to home page. It also provides a container where all features' modules are loaded.
src/app/core	The `CoreModule` contains singleton services, global components, and other features which requires one instance per application. `CoreModule` is imported once in `AppModule`. Note: `CoreModule` files must not be extended. If there is a requirement to extend the core files, raise a Case with the IBM Support team.
src/app/features	Contains the feature modules of the application.
src/app/features/utilities	The utilities folder contains common utility methods for different entities like order,shipment, and others used across the application. These utility service files must not be extended.
src/app/login	The `LoginModule` contains components and services that are related to application login and logout.
src/app/shared	The `SharedModule` contains the shared components, directives, and providers. Note: The `SharedModule` must not be extended. You can add new components or services `SharedExtensionModule`.
src/assets	Contains the translation files, style files and other asset files that are copied as-is when the application is built.
src/assets/store-frontend/i18n	Contains the translation files (`JSON`). Each module maintains it's own translation file specific to the locale or language.
src/assets/styles/store-frontend/styles	Contains the global styles like font icon files, partials and glyph icons for the project.
src/assets/styles/store-frontend/styles/bootstrap-sass/_variables.scss	Contains the standard definitions of colors, font size, font family and other values that are used throughout the application.
src/assets/store-frontend/styles/fonts/*	Contains font icon related files.
src/assets/store-frontend/styles/_glyphicons.scss	Contains the CSS of font icons.
src/styles.scss	Imports all the partial SCSS files to apply their styling to the application.

Table 2. Directory structure to store customer's extensions source code
Directory/File	Purpose
store-extensions-src/app	Contains the customization or extension component files.
store-extensions-src/app/store-customization-impl.ts	The extensions definition file where you update the value of the appropriate property with the name of the newly added components, services, and lazy loaded module routes.
store-extensions-src/assets	Contains the translation files, style files and other asset files that are copied as-is when the application is built.
store-extensions-src/assets/store-frontend/i18n	Contains the extended/newly added translation files for existing modules and newly added modules respectively.
store-extensions-src/assets/styles/store-frontend/styles	Contains the custom SCSS and partial files.
store-extensions-src/assets/store-frontend/styles/_variables_extn.scss	Contains overridden SCSS properties and custom SCSS properties used in custom components.
store-extensions-src/styles_extn.scss	Imports the custom partial SCSS file to apply custom styling to the application.

Table 3. Internal application build folder. This section is for your information purposes only.
Directory	Purpose
store-app-build	Contains the merged source code of the application-provided files (src) and customization files (store-extensions-src). Warning: This is a View-Only folder. You must not rename or modify the contents of this folder during the customization.

To avoid accidentally viewing or modifying the files or contents of the store-app-build folder, you must perform the following

Hide this folder from appearing in the File Explorer of IDE.
Exclude this folder and its contents in searches.

If you are using Microsoft Visual Studio Code as your IDE, then perform the following steps to hide this folder and exclude it from your searches.

On Mac:

Go to Code > Preferences > Settings
Search for Files: Exclude and then click Add pattern. Add **/store-app-build and then click OK.
Search for Search: Exclude and then click Add pattern. Add **/store-app-build and then click OK.

On Windows:

Go to File > Preferences > Settings
Search for Files: Exclude and then click Add pattern. Add **/store-app-build and then clickOK.
Search for Search: Exclude and then click Add pattern. Add **/store-app-build and then click OK.

Note: These steps are applicable only if you are using Microsoft Visual Studio Code as your IDE. For any other IDE, ensure that you take similar steps.