-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Document what npm build does and pushState #933
Conversation
Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at [email protected]. Thanks! If you are contributing on behalf of someone else (eg your employer): the individual CLA is not sufficient - use https://developers.facebook.com/opensource/cla?type=company instead. Contact [email protected] if you have any questions. |
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
@@ -863,7 +863,20 @@ This feature is experimental and still [has major usage issues](https://github.c | |||
|
|||
## Deployment | |||
|
|||
## Building for Relative Paths | |||
`npm run build` creates a `build` directory with a production build of your app. Set up your favourite http server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.<hash>.js` is served with the contents of the `/static/js/main.<hash>.js` file. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please uppercase HTTP.
requests [...] are served
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
@@ -863,7 +863,20 @@ This feature is experimental and still [has major usage issues](https://github.c | |||
|
|||
## Deployment | |||
|
|||
## Building for Relative Paths | |||
`npm run build` creates a `build` directory with a production build of your app. Set up your favourite http server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.<hash>.js` is served with the contents of the `/static/js/main.<hash>.js` file. | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This jumps to an example too abruptly. Maybe mention "For example, you can serve static files with Python:"?
And then maybe add an Express example.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
|
||
If you use routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`), many static file servers will fail. For example, if you used react-router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but the python3 http.server serving a production build as above will not. | ||
|
||
This is because when there is a fresh page load for a `0.0.0.0/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This describes the problem but doesn't describe the solution.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe this describes the solution
The server needs to be configured to respond to a request to
/todos/42
by servingindex.html
.
The way to configure the server to do so depends on the server used; there's some server-specific information, eg in the Github Pages section.
Slightly tweaked and merged. Thank you so much! |
* master: (30 commits) Relax peerDependencies for ESLint preset (facebook#1191) Update Webpack to fix source map issues (facebook#1188) Update webpack prod config (facebook#1181) Chrome 'open tab' reuse an empty tab when possible (facebook#1165) Use file-loader for svgs (facebook#1180) Fix Babel issues in tests by applying the right transforms (facebook#1179) [babel-preset-react-app] Temporary fix missing babel plugins (facebook#1177) Add Subresource Integrity support (facebook#1176) Remove path module from webpack config on eject. (facebook#1175) Don't strip stack traces of evaluated webpack bundles (facebook#1050) Add deploy to Firebase CDN on template's README (Closes facebook#374) (facebook#1143) Update e2e.sh (facebook#1167) Document what npm build does and pushState (facebook#933) Fix minor typo/grammar (facebook#1099) Add "npm run build silently fails" to Troubleshooting (facebook#1168) Add testURL to jest config (facebook#1120) Make jsx-no-undef rule an error (facebook#1159) Update CHANGELOG.md Publish Update changelog for 0.8.1 ...
* Document what npm build does and pushState * Fix typos, add express example * Tweaks * Update README.md
* Document what npm build does and pushState * Fix typos, add express example * Tweaks * Update README.md
The User Guide does not actually document what
npm run build
does. The docs also don't describe how exactly to "deploy" the resultingbuild
directory.This PR describes what
npm run build
does and what it means to deploy the build in the Users Guide.Additionally, it describes the
pushState
gotcha which was previously only described in reference to specific servers (eg github pages).