cli icon indicating copy to clipboard operation
cli copied to clipboard

CLI automatically rewrites to /index.html but production deploys do not

Open mjswensen opened this issue 2 years ago • 4 comments

Describe the bug

When using netlify dev with create-react-app auto-configuration, requests to localhost:8888/some-sub-path automatically get rewritten to /index.html, but when deploying to Netlify /some-sub-path will throw a 404 unless the appropriate redirect rule is set up.

To Reproduce

Steps to reproduce the behavior:

  1. Create a React application with client-side routing
  2. Run netlify dev
  3. Navigate in the browser directly to a path other than /
  4. See that the dev server responds with /index.html and the client-side routing takes effect
  5. Deploy to Netlify
  6. Navigate to a production path other than /
  7. See that Netlify returns a 404

Expected behavior

I expected netlify dev to behave like Netlify production deploy—only performing the redirects/rewrites if they were configured explicitly. This caused me to deploy the site without the needed configuration to perform the redirects correctly, because netlify dev was already performing the redirects without the configuration in place. The behavior should match between netlify dev and Netlify production.

mjswensen avatar Feb 15 '22 14:02 mjswensen

This happens with Vue as well. I don't believe it is (the fault of) Netlify CLI.

If you run react-script start or vue-cli-service serve (without using ntl dev) there is no need to have a redirect (i.e. /* /index.html 200) as the framework is handling everything. This (as I understand things; @erezrokah would know more than I) is how Netlify interacts with the framework, enabling the updating app files so that the changes are immediately visible in the browser.

If you run the build command (e.g react-scripts build), serve that output using ntl dev and hit refresh on a route when the above redirect isn't in place, a Not Found message is returned (as I would expect). I would argue that ntl dev does replicate the environment of a deploy on Netlify as the result of the build script is what is deployed and not that of the dev (or start, or serve) script.

coelmay avatar Feb 21 '22 03:02 coelmay

Correct @coelmay the issue here seems to be how some frameworks work in dev mode. Some will run a dev server (e.g. create-react-app) and some will run a build command in watch mode (e.g. 11ty).

The latter is closer to how static hosting production environments work. The former might have other advantages (speed? could be very framework/platform specific).

erezrokah avatar Feb 21 '22 13:02 erezrokah

Good call @coelmay / @erezrokah , that makes sense. I wonder if a callout in the create-react-app Netlify docs might be helpful, to give folks a heads up. (Feel free to close this either way.)

mjswensen avatar Feb 21 '22 20:02 mjswensen

Interesting to note that documentation CRA documentation @mjswensen linked to does not contain mention of redirects although the Angular documentation does.

Under the Common configurations -> CRA it does not mention redirects either, though there is a link to the CRA Deployment -> Netlify documentation that does mention the redirect requirement.

coelmay avatar Feb 21 '22 20:02 coelmay

Closing as stale. Please re-open if needed

sarahetter avatar Sep 14 '23 19:09 sarahetter