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
Copy file name to clipboardExpand all lines: packages/react-scripts/template/README.md
+24-2
Original file line number
Diff line number
Diff line change
@@ -22,6 +22,9 @@ You can find the most recent version of this guide [here](https://github.com/fac
22
22
-[Post-Processing CSS](#post-processing-css)
23
23
-[Adding Images and Fonts](#adding-images-and-fonts)
24
24
-[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)
25
28
-[Using Global Variables](#using-global-variables)
26
29
-[Adding Bootstrap](#adding-bootstrap)
27
30
-[Adding Flow](#adding-flow)
@@ -372,7 +375,18 @@ An alternative way of handling static assets is described in the next section.
372
375
373
376
>Note: this feature is available with `[email protected]` and higher.
374
377
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:
376
390
377
391
* Scripts and stylesheets get minified and bundled together to avoid extra network requests.
378
392
* Missing files cause compilation errors instead of 404 errors for your users.
@@ -409,7 +423,15 @@ Keep in mind the downsides of this approach:
409
423
* Missing files will not be called at compilation time, and will cause 404 errors for your users.
410
424
* Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
411
425
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.
413
435
414
436
Note that if you add a `<script>` that declares global variables, you also need to read the next section on using them.
0 commit comments