@ArnaudBarre done!

@iansu@Timer@gaearon@amyrlam@ianschmitz@petetnt@bugzpodder please review this PR, if all good merge it ASAP and make release please 🙏 , my projects requires and also I don't want to eject since we don't have enough resource to setup packer env 😢

@sambathl I'm chasing a second review on this, and then we can merge it in.

I don't think it works when"homepage": ".".

Ithink all that needs to change is webpackDevServer.config.js needs to check for the relative path when setting publicPath.

publicPath:paths.servedPath==="./" ?"/" :paths.servedPath.slice(0,-1)

There is also a problem when setting homepage/something and opening/,
manifest.json and favicon.ico return 404 trying to loadhttp://localhost:3000/%PUBLIC_URL%/manifest.json andhttp://localhost:3000/%PUBLIC_URL%/favicon.ico

Edit: In this case dev server just served clearindex.html content without injecting dynamic vars

@iamandrewluca Hm, I'm actually not getting that anymore with my changes, so maybe the PUBLIC_URL thing was fixed by ad7e29b? But the dev server is definitely serving index.html when requests forfavicon.ico are made if homepage is set.

@iamandrewluca not sure if merging in master will fix the build issue / or at least rerun the build?

@raix made a rebase to trigger the build. It seems there is a babel plugin dependency error comming from master.

I'm trying this branch. I'm curious about why the public url have to end with a slash?

If I set the public_url with for example: "PUBLIC_URL=/test" and browsehttp://localhost:3000/test, it redirects the url to:http://localhost:3000/test/test

Btw, thanks for this PR, it's very useful.

If I set the public_url with for example: "PUBLIC_URL=/test" and browsehttp://localhost:3000/test, it redirects the url to:http://localhost:3000/test/test

It should not, I'll check.

Another thing I noticed is that when reloadinghttp://localhost:3000/test/some-path, it returns a 404 error. Reloadinghttp://localhost:3000 works.

I don't know if it's related, but I'm running the apps behind a reverse proxy (nginx).

listen 3000;# App with PUBLIC_URL=/testlocation /test {    proxy_pass http://localhost:3020;    proxy_set_header Host $host;    proxy_set_header X-Real-IP $remote_addr;    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location / {    proxy_pass http://localhost:3010;    proxy_set_header Host $host;    proxy_set_header X-Real-IP $remote_addr;    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}

@lucasmogari onhttp://localhost:3000 is your nginx proxy?

@lucasmogari shouldn't it be:

location /test {    proxy_pass http://localhost:3020/test;

It actually works both ways. According to nginx docs:

https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

If the address is specified without a URI, or it is not possible to determine the part of URI to be replaced, the full request URI is passed

The refresh problem happens in both ways too. I think there's something related to what is described in the docs, but there's no guide for nginx.

https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

@lucasmogari onhttp://localhost:3000 is your nginx proxy?

Yes. What I'm trying to do:

http://localhost:3000 proxies tohttp://localhost:3010/ (main app)
http://localhost:3000/test proxies tohttp://localhost:3020/test (test app)

In dev, refreshinghttp://localhost:3000/some-path works, buthttp://localhost:3000/test/some-path returns 404.

I found that adding the option (index: paths.publicUrlOrPath) to webpackDevServer.config.js fixed the problem with refreshing:

historyApiFallback: {      // Paths with dots should still use the history fallback.      // See https://github.com/facebook/create-react-app/issues/387.      disableDotRule: true,      index: paths.publicUrlOrPath,},

Just a kind reminder - in 5 days / the 26th of January the original pr for this pull-request turns 1 year. Not often pull-requests live this long so I'm not sure if I should bring cake or flowers? :)

(Disclaimer: I'm not trying to push or rush things - even if we desperately want this to be merged)

@raix 😄 will live till will be merged 🌹 🌷 💮

@iamandrewluca Can you rebase locally and push?

@lucasmogari I addressed the issues you encoutnered, can you try again with the proxy?

/test now will not redirect to/test/
/test/some-path returns 200

@andriijas done!

PR Blocked by awebpack-dev-server patch release
webpack/webpack-dev-server/pull/2374

@iamandrewluca In case we forget, ping whenwebpack-dev-server releases a new version! Thanks for your patience!

Ok, I'll ping. Contacted a webpack maintaner for an ETA.

@lucasmogari I addressed the issues you encoutnered, can you try again with the proxy?

/test now will not redirect to/test/
/test/some-path returns 200

With PUBLIC_URL=/test
/test is redirecting (returns 302) to /test/test
/test/some-path (returns 200)

With PUBLIC_URL=/test/
/test/ (returns 200)

Maybe it's some configuration here. I'm sorry, but I don't have too much time to debug right now.

Thanks again!

@lucasmogari Try in incognito mode. Or clear all data forlocalhost:3000
For me when I tested also redirected to/test/.
If previous was any 301 redirect fromlocalhost:3000/test tolocalhost:3000/test/, browser remembers that, and will always redirect.

If I openlocalhost:3000/test in incognito mode, it stays on this path.

@andriijas all done! Need review.

Thanks for your patience everyone, specially @iamandrewluca

If anyone wants to do additional testing on their projects - please do!

Well done!

I encountered some problems when using proxy with this feature. Investigating. Think I should reorder in a right way proxy middlewares.

Also one case
Having/test homepage, any fetch ex:/api/resource will redirect to/test/api/resource which I think is wrong.

Do we revert the PR, and create a new one with fixed problems, or we fix the problem till the next release?

Found the issue. Will make a PR soon. Internal proxy that decides to proxy or not, does not know about public path