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
adding a note on how to resolve "Could not find a required file." dep… (#1391)
* adding a note on how to resolve "Could not find a required file." deployment errors because of deleted or ignored files
* Tweak
* Unrelated style nits
Copy file name to clipboardexpand all lines: packages/react-scripts/template/README.md
+34-15
Original file line number
Diff line number
Diff line change
@@ -283,7 +283,7 @@ Start your app by running `npm start`, and start debugging in VS Code by pressin
283
283
284
284
You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else.
285
285
286
-
Note that normally you wouldn't edit files in the `public` folder very often. For example, [adding a stylesheet](#adding-a-stylesheet) is done without touching the HTML.
286
+
Note that normally you wouldn’t edit files in the `public` folder very often. For example, [adding a stylesheet](#adding-a-stylesheet) is done without touching the HTML.
287
287
288
288
If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library.
289
289
@@ -721,7 +721,7 @@ Note that the caveats from the above section apply:
721
721
722
722
### Adding Temporary Environment Variables In Your Shell
723
723
724
-
Defining environment variables can vary between OSes. It's also important to know that this manner is temporary for the
724
+
Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the
725
725
life of the shell session.
726
726
727
727
#### Windows (cmd.exe)
@@ -1173,7 +1173,7 @@ For an example, a simple button component could have following states:
1173
1173
1174
1174
Usually, it’s hard to see these states without running a sample app or some examples.
1175
1175
1176
-
Create React App doesn't include any tools for this by default, but you can easily add [React Storybook](https://github.com/kadirahq/react-storybook) to your project. **It is a third-party tool that lets you develop components and see all their states in isolation from your app**.
1176
+
Create React App doesn’t include any tools for this by default, but you can easily add [React Storybook](https://github.com/kadirahq/react-storybook) to your project. **It is a third-party tool that lets you develop components and see all their states in isolation from your app**.
If you're using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this:
1218
+
If you’re using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this:
1219
1219
1220
1220
```javascript
1221
1221
constexpress=require('express');
@@ -1281,9 +1281,9 @@ See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azu
1281
1281
1282
1282
### Firebase
1283
1283
1284
-
Install the Firebase CLI if you haven't already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account.
1284
+
Install the Firebase CLI if you haven’t already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account.
1285
1285
1286
-
Then run the `firebase init` command from your project's root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`.
1286
+
Then run the `firebase init` command from your project’s root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`.
1287
1287
1288
1288
```sh
1289
1289
=== Project Setup
@@ -1388,7 +1388,7 @@ Then run:
1388
1388
npm run deploy
1389
1389
```
1390
1390
1391
-
#### Step 4: Ensure your project's settings use `gh-pages`
1391
+
#### Step 4: Ensure your project’s settings use `gh-pages`
1392
1392
1393
1393
Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch:
1394
1394
@@ -1400,7 +1400,7 @@ You can configure a custom domain with GitHub Pages by adding a `CNAME` file to
1400
1400
1401
1401
#### Notes on client-side routing
1402
1402
1403
-
GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
1403
+
GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
1404
1404
1405
1405
* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router.
1406
1406
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
@@ -1410,27 +1410,46 @@ GitHub Pages doesn't support routers that use the HTML5 `pushState` history API
1410
1410
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).<br>
1411
1411
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
1412
1412
1413
-
#### Resolving "Module not found: Error: Cannot resolve 'file' or 'directory'"
1413
+
#### Resolving Heroku Deployment Errors
1414
1414
1415
-
Sometimes `npm run build` works locally but fails during deploy via Heroku with an error like this:
1415
+
Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases.
1416
+
1417
+
##### "Module not found: Error: Cannot resolve 'file' or 'directory'"
1418
+
1419
+
If you get something like this:
1416
1420
1417
1421
```
1418
1422
remote: Failed to create a production build. Reason:
1419
1423
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
1420
1424
MyDirectory in /tmp/build_1234/src
1421
1425
```
1422
1426
1423
-
This means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
1427
+
It means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
1424
1428
1425
1429
This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes.
1426
1430
1431
+
##### "Could not find a required file."
1432
+
1433
+
If you exclude or ignore necessary files from the package you will see a error similar this one:
In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`.
1445
+
1427
1446
### Modulus
1428
1447
1429
1448
See the [Modulus blog post](http://blog.modulus.io/deploying-react-apps-on-modulus) on how to deploy your react app to Modulus.
1430
1449
1431
1450
## Netlify
1432
1451
1433
-
**To do a manual deploy to Netlify's CDN:**
1452
+
**To do a manual deploy to Netlify’s CDN:**
1434
1453
1435
1454
```sh
1436
1455
npm install netlify-cli
@@ -1467,7 +1486,7 @@ See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-t
1467
1486
1468
1487
### Surge
1469
1488
1470
-
Install the Surge CLI if you haven't already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You just need to specify the *build* folder and your custom domain, and you are done.
1489
+
Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You just need to specify the *build* folder and your custom domain, and you are done.
1471
1490
1472
1491
```sh
1473
1492
email: email@domain.com
@@ -1535,7 +1554,7 @@ brew reinstall watchman
1535
1554
1536
1555
You can find [other installation methods](https://facebook.github.io/watchman/docs/install.html#build-install) on the Watchman documentation page.
1537
1556
1538
-
If this still doesn't help, try running `launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist`.
1557
+
If this still doesn’t help, try running `launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist`.
1539
1558
1540
1559
There are also reports that *uninstalling* Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
1541
1560
@@ -1546,7 +1565,7 @@ It is reported that `npm run build` can fail on machines with no swap space, whi
1546
1565
### `npm run build` fails on Heroku
1547
1566
1548
1567
This may be a problem with case sensitive filenames.
1549
-
Please refer to [this section](#resolving-module-not-found-error-cannot-resolve-file-or-directory).
1568
+
Please refer to [this section](#resolving-heroku-deployment-errors).
0 commit comments