Gitpod and Vite UX is not great

[MangelMaxime]

Objective

Hello,

I am using Gitpod and prefer to use the VSCode Desktop for a better experience with the shortcuts/terminal.

When using Vite with Gitpod we need to specify some setting for HMR to work correctly:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        hmr: {
            clientPort: process.env.GITPOD_WORKSPACE_URL ? 443 : 3000,
            host: process.env.GITPOD_WORKSPACE_URL
                ? process.env.GITPOD_WORKSPACE_URL.replace("https://", "3000-")
                : "localhost"
        }
    }
})

The problem is that when running Gitpod inside of VSCode Desktop, then Gitpod open the application on localhost and then Vite HMR is unable to connect to the websocket.

A workaround I found, is to manually open the external URL https://3000-XXXX-jgvnoxr8tqr.ws-eu64.gitpod.io/.

But finding this URL is a manual process and not intuitive to the end user of my template.

Do you know a way to make Vite and Gitpod works seamlessly over VSCode Desktop?

I found this discussion on Discord but it didn't help:

• https://discordapp.com/channels/816244985187008514/959977556692574248

---

This repository can reproduce the problem: https://github.com/MangelMaxime/template-gitpod-fable-3-vite-react

Open it in the browser and see that the website stay alive for more than a few seconds.

Open it inside VSCode Desktop, click on the open in browser button (which open https://localhost:3000) and see that the webpage reload every few seconds.

[MangelMaxime]

When using VSCode Desktop, this is the configuration which works:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        hmr: {
            clientPort: 3000,
            host: "localhost"
        }
    }
})

[axonasif]

Relates with #459

Included in #10701

[geropl]

@MangelMaxime is this issue resolved with the configuration you found? If yes, I think #459 is the solution here.

[MangelMaxime]

@geropl The second configuration I gave is what should be used when running inside of VSCode Desktop.

But it doesn't solve my problem, because I want to be able to run the project from both Gitpod Web and Gitpod VSCode Desktop.

Current situation

Note: The configuration I am mentioning below is what is computed when executing the project

Native desktop

The configuration currently used is:

hmr: {
    clientPort: 3000,
    host: "localhost"
}

and this works fine.

Gitpod Web

The configuration currently used is:

hmr: {
    clientPort: 443,
    host: "https://3000-xxxx-jgvnoxr8tqr.ws-eu64.gitpod.io/"
}

this works too.

Gipod VSCode Desktop

The configuration currently used is:

hmr: {
    clientPort: 443,
    host: "https://3000-xxxx-jgvnoxr8tqr.ws-eu64.gitpod.io/"
}

and this doesn't really integrate with the default experience proposed by Gitpod VSCode Desktop.

Indeed, when Gitpod VSCode Desktop detect an opened port it will propose to "Open in the browser" but it will open at http://localhost:3000 but because HMR is configured to run using the external URL it cannot connect to the server.

If I manually go to https://3000-xxxx-jgvnoxr8tqr.ws-eu64.gitpod.io/ when running from Gitpod VSCode Desktop, then it is working correctly. But there no easy way to find this URL, you need to run the gp command or find the GITPOD_WORKSPACE_URL url and prefix it with 3000-.

I don't know if the solution is to propose to open the external URL or if there is something to fix to redirect the HMR connection settings too like done for the localhost:3000 which redirect/proxy the request to the external URL I think.

[megafinz]

@MangelMaxime not sure if it will actually help you solve your problem, but you can try setting up Tailscale network between your dev machine and gitpod workspace. By enabling MagicDNS in Tailscale you will have predictable URL for the workspace (you can even customize the URL yourself).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MangelMaxime]

For me the problem still exist.

I looked at Tailscale but I didn't understand everything about it and it seems to add more complexity to the project. Plus it seems like Tailscale is a paid product (with free tier but not sure what I would need)

I wanted to provide Gitpod because I tough it would be good for demo, tutorials, etc. but to me right now it feels like it is still easier to ask people to install the requirement on their machines and clone the repos because we can't have a configuration which works for both the browser editor or the on machine editor.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.