You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Assets are static resources that your application use. In FSD, the placement of assets follows the same principles as code β assets should be grouped based not on the type, but on the use case and should be near the component that uses it.
9
+
Assets are static resources that your application uses. In FSD, assets follow the same placement principles as code. Group them by use case, not by type, and keep them close to the components that use them.
10
10
11
11
<Asidetype="caution">
12
12
13
-
It's a common practice to implement a [custom `assets` segment](/docs/reference/slices-segments/#segments), but just like the code, this creates an issue of [desegmentation](/docs/guides/issues/desegmented/) and should be generally avoided.
13
+
It's a common practice to implement a [custom `assets` segment](/docs/reference/slices-segments/#segments), but just like with code, this creates an issue of [desegmentation](/docs/guides/issues/desegmented/) and should be generally avoided.
14
14
15
15
</Aside>
16
16
17
17
## Global Assets \{#global-assets}
18
18
19
-
Global assets include things like global stylesheets (like css reset), fonts and so on. `app` is the appropriate layer for those kind of files, as they are not used by any other component except for the application entrypoint.
19
+
Global assets include things like global stylesheets (such as a CSS reset)and fonts. The `π₯ app`layer is the right place for these files since they're only used by the application entrypoint.
20
20
21
21
<FileTree>
22
22
- app/
@@ -39,7 +39,7 @@ When an asset is only used by one page, widget, or feature, keep it inside that
39
39
- index.ts
40
40
</FileTree>
41
41
42
-
If your UI has a lot of static assets like images, you can create a subfolder in the `ui` segment:
42
+
If your UI has many static assets like images, you can create a subfolder in the `ui` segment:
43
43
44
44
<FileTree>
45
45
- pages/
@@ -56,7 +56,7 @@ If your UI has a lot of static assets like images, you can create a subfolder in
56
56
57
57
## Non-UI Assets \{#non-ui-assets}
58
58
59
-
There are cases when asset is not part of UI, but a crucial part of business logic. Consider this example:
59
+
Sometimes an asset is not part of the UI but is a crucial part of business logic. Consider this example:
60
60
61
61
<FileTree>
62
62
- features/
@@ -67,22 +67,22 @@ There are cases when asset is not part of UI, but a crucial part of business log
67
67
- index.ts
68
68
</FileTree>
69
69
70
-
In this example, while `invoicing-template.pdf` is a static asset, it is tightly coupled with the core business logic in `create-invoice.ts`. In cases like that, it is preferrable to place `invoice-template.pdf`in the `model` segment to maintain high cohesion.
70
+
Here, `invoice-template.pdf` is tightly coupled with the business logic in `create-invoice.ts`. In cases like this, it's preferable to place the file in the `model` segment to maintain high cohesion and localize changes.
71
71
72
72
## Public Folder \{#public}
73
73
74
-
Most bundlers and frameworks provide a `public` folder at the root of your project. Files here are served as-is without processing.
74
+
Most bundlers and frameworks provide a `π public` folder at the root of your project. Files here are served as-is without processing.
75
75
76
-
Some build tools like [Vite](https://vite.dev/config/shared-options#publicdir)allows public folder to be changed, while others like [Astro](https://docs.astro.build/en/basics/project-structure/#public) don't have this option. If your build tool doesn't support this change, it is ok to leave it as it is, as the `public` folder is not part of the FSD structure and won't have name collisions with it.
76
+
Some build tools like [Vite](https://vite.dev/config/shared-options#publicdir)allow the public folder location to be changed, while others like [Astro](https://docs.astro.build/en/basics/project-structure/#public) don't have this option. If your build tool doesn't support this change, that's fine. The `π public` folder is not part of the FSD structure and won't cause naming collisions.
77
77
78
78
## Summary \{#summary}
79
79
80
80
| Asset Type | Location |
81
81
|------------|----------|
82
-
| Reusable icons and images |`shared/ui/`|
83
-
| Global styles |`app/styles/`|
84
-
| Fonts |`app/fonts/` or `public/`|
85
-
| Slice-specific assets | Inside the slice (e.g., `pages/home/ui/`) |
86
-
| Static files, favicon |`public/` or `app/public`|
0 commit comments