Skip to content
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

Merged
merged 4 commits into from
Dec 5, 2016
Merged

Conversation

ldct
Copy link
Contributor

@ldct ldct commented Oct 19, 2016

The User Guide does not actually document what npm run build does. The docs also don't describe how exactly to "deploy" the resulting build 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).

@facebook-github-bot
Copy link

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 cla@fb.com. 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 cla@fb.com if you have any questions.

@facebook-github-bot
Copy link

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.
Copy link
Contributor

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

Copy link
Contributor Author

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.

Copy link
Contributor

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.

Copy link
Contributor Author

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`.
Copy link
Contributor

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.

Copy link
Contributor Author

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 serving index.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.

@gaearon gaearon merged commit b61dc67 into facebook:master Dec 5, 2016
@gaearon
Copy link
Contributor

gaearon commented Dec 5, 2016

Slightly tweaked and merged. Thank you so much!

mofelee added a commit to xiaohu-developer/create-react-app that referenced this pull request Dec 7, 2016
* 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
  ...
alexdriaguine pushed a commit to alexdriaguine/create-react-app that referenced this pull request Jan 23, 2017
* Document what npm build does and pushState

* Fix typos, add express example

* Tweaks

* Update README.md
randycoulman pushed a commit to CodingZeal/create-react-app that referenced this pull request May 8, 2017
* Document what npm build does and pushState

* Fix typos, add express example

* Tweaks

* Update README.md
@lock lock bot locked and limited conversation to collaborators Jan 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants