Folder Structure

Breakdown of All Folders

Folder	Description
.vscode/	This is where all your VS Code editor settings live for a project. These are discussed in detail in the VS Code section of this tutorial
build/	Where all the Webpack files live.
config/	The configuration settings for Webpack in each environment (dev, production, etc.).
node_modules/	Local Node packages installed.
src/assets/	Assets like images or fonts can be stored here. Webpack can process these (ie. fingerprinting). For many cases, however, we will try to keep most files inside their respective src/features/ folder so that the project is sliced more vertical and split up by "Business Domain".
src/auth/	Authentication is a cross-cutting feature that all features will need.
src/components/	Any cross-cutting components live here. Read about the "src/features/" folder further down to understand the difference between cross-cutting components and components within a feature.
src/directives/	Any cross-cutting directives live here.
src/features/	These are vertical slices split up by "Business Domain". Aim to keep as many files related to the feature inside a feature folder. This allows teams to more easily split up work and stay within a context. All features can rely on cross-cutting elements (src/auth, src/components, src/directives, etc.) or other features. Features should not access sub-parts of other features directly. They need to use the public API of the other feature or else move an internal part out into a cross-cutting folder. The src/components/ folder, for example, holds components that don't really belong with any feature or make up a feature on their own. You may decide to duplicate a component instead (because being "DRY" is not necessarily always beneficial).