Skip to content

Commit ab3913c

Browse files
authored
Clarify when to use the public folder
1 parent 587b2f8 commit ab3913c

File tree

1 file changed

+24
-2
lines changed

1 file changed

+24
-2
lines changed

packages/react-scripts/template/README.md

+24-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ You can find the most recent version of this guide [here](https://github.com/fac
2222
- [Post-Processing CSS](#post-processing-css)
2323
- [Adding Images and Fonts](#adding-images-and-fonts)
2424
- [Using the `public` Folder](#using-the-public-folder)
25+
- [Changing the HTML](#changing-the-html)
26+
- [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system)
27+
- [When to Use the `public` Folder](#when-to-use-the-public-folder)
2528
- [Using Global Variables](#using-global-variables)
2629
- [Adding Bootstrap](#adding-bootstrap)
2730
- [Adding Flow](#adding-flow)
@@ -372,7 +375,18 @@ An alternative way of handling static assets is described in the next section.
372375

373376
>Note: this feature is available with `[email protected]` and higher.
374377
375-
Normally we encourage you to `import` assets in JavaScript files as described above. This mechanism provides a number of benefits:
378+
### Changing the HTML
379+
380+
The `public` folder contains the HTML file so you can tweak it, for example, to [set the page title](#changing-the-page-title).
381+
The `<script>` tag with the compiled code will be added to it automatically during the build process.
382+
383+
### Adding Assets Outside of the Module System
384+
385+
You can also add other assets to the `public` folder.
386+
387+
Note that we normally we encourage you to `import` assets in JavaScript files instead.
388+
For example, see the sections on [adding a stylesheet](#adding-a-stylesheet) and [adding images and fonts](#adding-images-and-fonts).
389+
This mechanism provides a number of benefits:
376390

377391
* Scripts and stylesheets get minified and bundled together to avoid extra network requests.
378392
* Missing files cause compilation errors instead of 404 errors for your users.
@@ -409,7 +423,15 @@ Keep in mind the downsides of this approach:
409423
* Missing files will not be called at compilation time, and will cause 404 errors for your users.
410424
* Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
411425

412-
However, it can be handy for referencing assets like [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest) from HTML, or including small scripts like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
426+
### When to Use the `public` Folder
427+
428+
Normally we recommend importing [stylesheets](#adding-a-stylesheet), [images, and fonts](#adding-images-and-fonts) from JavaScript.
429+
The `public` folder is useful as a workaround for a number of less common cases:
430+
431+
* You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
432+
* You have thousands of images and need to dynamically reference their paths.
433+
* You want to include a small script like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
434+
* Some library may be incompatible with Webpack and you have no other option but to include it as a `<script>` tag.
413435

414436
Note that if you add a `<script>` that declares global variables, you also need to read the next section on using them.
415437

0 commit comments

Comments
 (0)