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
-[Integrating with a Node Backend](#integrating-with-a-node-backend)
27
28
-[Proxying API Requests in Development](#proxying-api-requests-in-development)
28
29
-[Using HTTPS in Development](#using-https-in-development)
29
-
-[Adding `<link>` and `<meta>` Tags](#adding-link-and-meta-tags)
30
-
-[Referring to Static Assets from `<link href>`](#referring-to-static-assets-from-link-href)
31
-
-[Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
30
+
-[Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
32
31
-[Running Tests](#running-tests)
33
32
-[Filename Conventions](#filename-conventions)
34
33
-[Command Line Interface](#command-line-interface)
@@ -79,30 +78,33 @@ After creation, your project should look like this:
79
78
```
80
79
my-app/
81
80
README.md
82
-
index.html
83
81
node_modules/
84
82
package.json
83
+
public/
84
+
index.html
85
+
favicon.ico
85
86
src/
86
87
App.css
87
88
App.js
88
89
App.test.js
89
-
favicon.ico
90
90
index.css
91
91
index.js
92
92
logo.svg
93
93
```
94
94
95
95
For the project to build, **these files must exist with exact filenames**:
96
96
97
-
*`index.html` is the page template;
98
-
*`src/favicon.ico` is the icon you see in the browser tab;
97
+
*`public/index.html` is the page template;
99
98
*`src/index.js` is the JavaScript entry point.
100
99
101
100
You can delete or rename the other files.
102
101
103
102
You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.
104
103
You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them.
105
104
105
+
Only files inside `public` can be used from `public/index.html`.
106
+
Read instructions below for using assets from JavaScript and HTML.
107
+
106
108
You can, however, create more top-level directories.
107
109
They will not be included in the production build so you can use them for things like documentation.
108
110
@@ -320,7 +322,7 @@ function Header() {
320
322
exportdefaultfunction Header;
321
323
```
322
324
323
-
This is currently required for local images. This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.
325
+
This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.
324
326
325
327
This works in CSS too:
326
328
@@ -334,7 +336,51 @@ Webpack finds all relative module references in CSS (they start with `./`) and r
334
336
335
337
Please be advised that this is also a custom feature of Webpack.
336
338
337
-
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). However it may not be portable to some other environments, such as Node.js and Browserify. If you prefer to reference static assets in a more traditional way outside the module system, please let us know [in this issue](https://github.com/facebookincubator/create-react-app/issues/28), and we will consider support for this.
339
+
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
340
+
An alternative way of handling static assets is described in the next section.
341
+
342
+
## Using the `public` Folder
343
+
344
+
>Note: this feature is available with `[email protected]` and higher.
345
+
346
+
Normally we encourage you to `import` assets in JavaScript files as described above. This mechanism provides a number of benefits:
347
+
348
+
* Scripts and stylesheets get minified and bundled together to avoid extra network requests.
349
+
* Missing files cause compilation errors instead of 404 errors for your users.
350
+
* Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
351
+
352
+
However there is an **escape hatch** that you can use to add an asset outside of the module system.
353
+
354
+
If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use a special variable called `PUBLIC_URL`.
Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.
363
+
364
+
When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.
365
+
366
+
In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes:
367
+
368
+
```js
369
+
render() {
370
+
// Note: this is an escape hatch and should be used sparingly!
371
+
// Normally we recommend using `import` for getting asset URLs
372
+
// as described in “Adding Images and Fonts” above this section.
* None of the files in `public` folder get post-processed or minified.
380
+
* Missing files will not be called at compilation time, and will cause 404 errors for your users.
381
+
* Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
382
+
383
+
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.
338
384
339
385
## Adding Bootstrap
340
386
@@ -558,69 +604,19 @@ HTTPS=true npm start
558
604
559
605
Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
560
606
561
-
## Adding `<link>` and `<meta>` Tags
562
-
563
-
You can edit the generated `index.html` and add any tags you’d like to it.
564
-
565
-
### Referring to Static Assets from `<link href>`
566
-
567
-
>Note: this feature is available with `[email protected]` and higher.
568
-
569
-
Sometimes, you might want to refer to static assets from `index.html`. Create React App intentionally does not support serving static assets from a folder because it is too easy to forget to arrange cache invalidation for their filenames. Instead, we recommend that all assets are [handled as part of build process with `import`s](#adding-images-and-fonts).
570
-
571
-
However, you can’t `import` anything from an HTML file. This is why Create React App automatically treats any `<link href>` attributes that start with `./` as a hint that this file needs to be included in the build process. For example, you can use paths like this in `index.html`:
Files starting with `./` in `<link href>` attribute will be copied to the `static` folder inside your `build` output, and HTML will reference them instead. Webpack will throw a compilation error if any of these files was accidentally deleted or misspelled.
604
-
605
-
Their names will also contain the content hashes to make sure the browser cache is busted when the file changes. The only file that is handled specially is `favicon.ico` which, if present and referenced from HTML, will be always placed at the root so that browsers can find it even when requesting files from the server (such as PDF documents).
606
-
607
-
Currently, only `<link href>` attributes are treated this way. If you need similar support for other HTML tags and attributes, please file an issue describing your use case.
608
-
609
-
If you need to use an asset from code rather than from HTML, please read [Adding Images and Fonts](#adding-images-and-fonts). For example, to integrate a library like [`react-mdl`](https://github.com/tleunen/react-mdl) that depends on global scripts and styles, [`import` them from JavaScript](https://github.com/tleunen/react-mdl/pull/388).
610
-
611
-
### Generating Dynamic `<meta>` Tags on the Server
607
+
## Generating Dynamic `<meta>` Tags on the Server
612
608
613
609
Since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `$OG_TITLE`, `$OG_DESCRIPTION`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
619
+
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `%OG_TITLE%`, `%OG_DESCRIPTION%`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
624
620
625
621
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases.
0 commit comments