Vitejs stuck at connecting

I’m using Vitejs & Vue 3. When I run command npm run dev to open dev server, it keeps trying to reload and shows this error:

image

Hey @mnismt, welcome to the Gitpod community! :tangerine:

I was able to get a Vue 3 + Vite example up and running successfully. Maybe there is something misconfigured in the example you are running? Could you share a minimal, reproducible example?

1 Like

It was my mistake. Gitpod still works great :grin:

1 Like

Thanks for confirming, @mnismt! :ping_pong:

1 Like

I am having same issue can you tell how you solved it?

I have the same issue.

  • yes, I run npm run dev, not npm run serve or alike
  • the dev server option --host does not help
  • exposing the port 3000 as public does not help

How did you solve it, @mnismt?

Update: Vite does not infer the dev server port correctly from the url. Because Gitpod urls use the https protocol, we need to inform the vite client to establish websocket connections on port 443. Add this to your vite config as a workaround for Gitpod. However, it will break your local development env:

server: {
  hmr: {
    port: 443
  }
}

FIX / WORKAROUND (that works across environments): add a gitpod specific start script + vite config

// package.json
{
  "scripts": {
      "dev": "vite",
      "dev:gitpod": "APP_ENV=gitpod vite"
  }
}

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig(Object.assign({
  build: {
    // ... your config ...
  }
}, gitpodConfig()));

function gitpodConfig() {
  if (process.env.APP_ENV === 'gitpod') {
    return {
      server: {
        hmr: {
          clientPort: 443
        }
      }
    };
  }
}

Hello,

I have the very same problem. Specifying the hmr port gives me

listen EACCES: permission denied 0.0.0.0:443

Is there something else I missed?
Thanks