Dev server not working on GitHub Codespaces

[Koenkk]

I'm trying to run the Vite Dev server with the vite-remote example on GitHub Codespaces but it doesn't work. This issue is not limited to GitHub Codespaces, it fails whenever the dev server is not reachable on localhost (which is also the case when you run the dev server behind a reverse proxy, Coder or GitLab workspaces).

Issue

The issue is that it tries to load remoteEntry-[hash].js from localhost:5173 which is both the wrong hostname and port. For the example below, it should have used https://upgraded-journey-pg6jpg4vp539wr-5176.app.github.dev:443/testbase/remoteEntry-[hash].js.

Steps to reproduce

• Create a new Codespace on Koenkk/vite-plugin-federation-issue
• Execute:

cd vite-remote
pnpm i --frozen-lockfile
pnpm run dev

• A new tab should open in the browser which shows the issue

Analysis

I did some analysis on why this occurs. I believe the code below should allow specifying a different host and port (hacking this manually
in the node_modules folder fixes the issue)

vite/src/plugins/pluginProxyRemoteEntry.ts

Line 60 in aaa23f5

typeof viteConfig.server?.host === 'string' && viteConfig.server.host !== '0.0.0.0'

Alternatively, I tried changing the Vite config as follows but then pnpm run dev doesn't work:

  server: {
    open: true,
    port: 5176,
+   host: 'upgraded-journey-pg6jpg4vp539wr-5176.app.github.dev',
    origin: 'http://localhost:5176',
  },

@Koenkk ➜ /workspaces/vite-plugin-federation-issue/vite-remote (main) $ pnpm run dev

> [email protected] dev /workspaces/vite-plugin-federation-issue/vite-remote
> vite

Forced re-optimization of dependencies
error when starting dev server:
Error: listen EADDRNOTAVAIL: address not available 20.103.221.187:5176

[gioboa]

Thanks @Koenkk for the commitment you put into this issue. Would you like to find a solution to make it works?

[Koenkk]

@gioboa yes but I would need some guidance on how a proper fix should look like, does adding a new config option for this make sense?

[gioboa]

The first step is to figure out how to solve this problem and make it works, you can hack the library and modify it directly.
Then we can figure out what we need to change in the library. Does that make sense to you?

[Koenkk]

I already hacked it locally and then it works, made the following change (pseudo, because I modified the transpiled JS version):

host = 'upgraded-journey-pg6jpg4vp539wr-5176.app.github.dev'
port = 443
const {init} = await import("//${host}:${port}${viteConfig.base + options.filename}")

[gioboa]

@Koenkk That's great 👏
we can config host and port with viteConfig.server.host viteConfig.server.port
Here is the code

[Koenkk]

@gioboa that's what I already tried, but then Vite refuses to start, see the OP.

Alternatively, I tried changing the Vite config as follows but then pnpm run dev doesn't work:

I think this should be a separate optional option, and in case it's not specified use the Vite config.

[gioboa]

@Koenkk Let's try the separate option, make it work. then we can decide whether we need it or not.
WDYT?

[Koenkk]

@gioboa sounds good! Will give it a shot.