code-server's reverse proxy seems to always return index.html for all resources

[erlloyd]

• Web Browser: Chrome 86
• Local OS: Mac OS X
• Remote OS: Ubuntu 20.04 (using docker)
• Remote Architecture:
• code-server --version: 3.5.0 de41646

I'm running a vanilla react project created via create-react-app. I'm trying to use code-server's built-in proxy to view my application. I set my sites 'website' field as expected by react to be http://<code-server-machine-ip>:8443/proxy/3000. However, when I go to that address, every one of the assets loaded (all .js files, the favicon) seem to be the index.html. I get an error like this in the console:

Uncaught SyntaxError: Unexpected token '<' bundle.js:1

This feels like a bug in the proxy layer of code-server, but I'm hoping I just have something configured incorrectly. I'm running code-server via docker image if that makes a difference.

[code-asher]

code-server rewrites the URL by stripping the base out when proxying so when a request is made for code-server.tld/proxy/3000/static/js/main.chunk.js it rewrites that to localhost:3000/static/js/main.chunk.js.

It looks like create-react-app is expecting the base path to not be stripped out (localhost:3000/proxy/3000/static/js/main.chunk.js) so the request is a 404 and it serves the root HTML for 404s.

So I think we need some kind of mechanism for deciding when we should rewrite the URL and when we shouldn't although maybe we should just default to not rewriting it since I think that might be the more common behavior.

[Gilinho]

I'm having a similar problem, but with flutter. When I try to open https://mydomain.org/code/proxy/8990/ I can see the error:
GET https://mydomain.org/main.dart.js net::ERR_ABORTED 404 (Not Found)

Even when trying on my local network, https://192.168.1.94:8443/proxy/8990/ :
GET http://192.168.1.94:8443/main.dart.js net::ERR_ABORTED 404 (Not Found)

Looks like is also not expecting the base path to be stripped out.

[nhooyr]

when we shouldn't although maybe we should just default to not rewriting it since I think that might be the more common behavior.

I think the base path should be adjusted to work behind the proxy correctly. It's the most portable solution as you can easily remove the proxy in front and your app will still work if you access it locally.

I do think it'd be useful to check what popular proxies do by default.

[jsjoeio]

Hey @erlloyd - sorry to hear about the issue! We'll see what we can do about this.

I'm familiar with React but haven't used it with a proxy or "the 'website' field expected by React" that you're referring to.

Do you mind providing steps to reproduce your issue locally (i.e. without Docker)? That'll help me resolve this faster.

Thank you!

[erlloyd]

@jsjoeio The problem is actually very easy to repro, I'll list the steps here. The confusion might be that I mistakenly said 'website' field, when I meant the 'homepage' field in package.json. So here are the repro steps: (Note: I did this repro on macOS Catalina 10.15.7)

1. Create a brand new, unchanged react app from create react app. I used the following command: yarn create react-app basic-cra-spa

2. Install code-server with all defaults brew install code-server

3. Start code server code-server

4. Go to http://localhost:8080 and sign in to code-server

5. In the code server instance, open the basic-cra-spa folder that was created earlier

6. In the code server instance, open the package.json file

7. Add the following line under version: "homepage": "http://localhost:8080/proxy/3000",

8. In the code server instance, open a terminal and run yarn start

9. Now, notice that if you open a new browser window and navigate to http://localhost:3000/proxy/3000, the site loads

If you navigate to http://localhost:8080/proxy/3000 (which is going through code-server's proxy) you get the issue I reported.

Let me know if that isn't working for you to repro the problem!

[jsjoeio]

@erlloyd Thanks a ton for the quick response and the detailed steps 🙏

I was able to reproduce it locally.

I'll see what options we have to fix this.

[jsjoeio]

Update: I was able to get it working.

I need to write some tests and figure out how we want the base path to be adjusted moving forward. I'll be on vacation until the 4th but should be able to get a PR up that week.

[erlloyd]

Awesome @jsjoeio! Thanks for the update and enjoy your vacation.

[jsjoeio]

Hey all! I wanted to post an update. This is my first priority this week. I’ve had some laptop issues which should get resolved tomorrow. I have made a little bit of progress though which you can see if you look at the commits for issue-2222-reverse-proxy.

[nhooyr]

I don't think this is a bug. Its just how the proxy works.

See #2485

[nhooyr]

e.g. for your create-react-app example, you wouldn't need to set the website field at all, things would just work by default!

[erlloyd]

@nhooyr I would love if you could provide an example react app created via create-react-app where this would work!

If you don't provide the homepage field, then the problem is that react projects are always set to look up relative to the base url. So you get a bunch of 404 errors when the index.html tries to load the js, css, etc generated files.

[erlloyd]

This is what you get with a default create-react-app install trying to access it via the proxy:

The index.html file is loaded fine, but you can see that react has generated non-relative paths. The default index.html has the following block explaining:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

[nhooyr]

My bad. I guess it wouldn't work by default but see that note at the bottom:

Learn how to configure a non-root public URL by running npm run build.

I'll give it a shot hopefully sometime tomorrow and see what the correct configuration here is and then we can document it as part of #2485

[erlloyd]

Thanks @nhooyr . Funny enough, that note at the bottom refers to setting the homepage property in the package.json, which is what the repro steps I described earlier does!

[nhooyr]

There appears to be a bunch of create-react-app specific drama re the homepage field. Setting it to . is supposed to work but doesn't appear to anymore?

See

• https://stackoverflow.com/a/44048328/4283659
• https://stackoverflow.com/questions/43011207/using-homepage-in-package-json-without-messing-up-paths-for-localhost
• Support setting "homepage" to "." to generate relative asset paths facebook/create-react-app#1489

It appears to work correctly for yarn build but does not work with yarn start... So something's wrong in their webpack configuration. I guess the idea is that you only use homepage to specify the production homepage? But then the default dev configuration should use relative paths...

Let's add a configuration flag here to allow the proxy to pass through paths. We should still report this to the create-react-app team and have them properly fix it.

I'm thinking --proxy-path-passthrough?

[nhooyr]

Actually, we can read the Referrer header on the requests to automatically add the proxy prefix to the path when needed. If a page accessed from under the /proxy path requests a resource outside the proxy path, it's wrong. There's nothing for it to actually access there and so us prepending the /proxy/<port> prefix to the request path will work in such cases!

[nhooyr]

Fixed with --proxy-path-passthrough in the next release!

[meetmangukiya]

I think we should look into being able to specify this flag for each workspace / folder separately since there will be some projects that use relative paths, some that don't and restarting the code-server with changed flag is not feasible?

[nhooyr]

@meetmangukiya Perhaps we could add a second proxy endpoint that passes through the path? Like /absproxy?

[nhooyr]

Added in #2674

[meetmangukiya]

@nhooyr this is awesome, thanks! wont need to restart the server now and still have project specific choice between absolute and relative paths

[raychunghk]

I posted this on stackoverflow because I am one of the many learning react from udemy/youtube with vs code server who get stucked.
https://stackoverflow.com/questions/74010074/solution-for-running-react-web-app-on-visual-studiocode-server-behind-the-prox/74010075#74010075

[zakrian07]

i dont see any option to work with expo cli

[jsjoeio]

@zakrian07 what are you trying to do?

[zakrian07]

I’m on expo cli web and trying to do /proxy/19006

…

On Sat, Jan 21, 2023 at 3:40 AM Joe Previte ***@***.***> wrote: @zakrian07 <https://github.com/zakrian07> what are you trying to do? — Reply to this email directly, view it on GitHub <#2222 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABPI5XKXDU3ILMJEIXNK6GDWTMH6FANCNFSM4S2SFARA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[jsjoeio]

Feel free to open a Discussion with more information and I'd be happy to help!

[amypo-tech]

PUBLIC_URL=/absproxy/3000 WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node BROWSER=none npm start

This will give you the React app preview instead of npm start with the above command.

Happy Hacking!