Websocket issue in shopify Express App on server : server connection lost. polling for restart

Retired Boards Appdev Partners Discussion
1

This is the errro i am getting in console
client.ts:28 WebSocket connection to ‘wss://website.com:24678/’ failed:
(anonymous) [email removed] client:188
client.ts:228 [vite] server connection lost. polling for restart…
client.ts:22 [vite] connecting…

I am getting this error when I deployed my Shopify on the server it’s working fine in the local environment when I tried to run this app on the server giving an infinite loop of this error…

my code looks like this

* @type {import('vite').ViteDevServer}
   */
  let vite;
  if (!isProd) {
    vite = await import("vite").then(({ createServer }) =>
      createServer({
        root,
        logLevel: isTest ? "error" : "info",
        server: {
          port: PORT,
          strictPort: true,
          https: true,
          host: "https://website.com",
          hmr: {
            protocol: "ws",
            host: "https://website.com",
            port: 64999,
            clientPort: 64999,
          },
          middlewareMode: "html",
        },
      })
    );
    app.use(vite.middlewares);
  } else {
    const compression = await import("compression").then(
      ({ default: fn }) => fn
    );
    const serveStatic = await import("serve-static").then(
      ({ default: fn }) => fn
    );
2

@rajatzade Hi, were you able to solve it? I have exactly the same issue!

Everything works fine in my local environment but when I run the app on the server I get an infinite loop with the same error you mentioned

3

Hi! I have exactly same issue with you

Every thing work fine on auth process but vite somehow keep pooling and fail

Have you solved it yet ?

4

Yes, the problem was that it was not finding app’s bundle correctly.

We use nginx and a redirect to the server root was not being able to be done. For us was enough to add a proxy_pass to / location:

location / { proxy_pass http://localhost:3001; }

Explanation:

If you check your /index.html you will find

When you run a npm run build you will find /dist/client/index.html file with something like this

The entire app was bundled to

...

...

So now if you go to https://yourdomain.com/assets/index.fa8a16g2.js and see a bundle of your js files the issue should disappear.

In my case when I was going to /assets/index.fa8a16g2.js I did not see anything but adding the proxy_pass and getting to the bundle file correctly solved it.

5

Hello @JuanH

Thank’s for your response, i am new in Shopify developpement app. And i got the same issue.

First where do you add exact the pass proxy ?

location / { proxy_pass http://localhost:3001; }

And secondly , i’m searching a way to push my app code on a server i don’t know really know how to do it. i don’t really understand, currently from command line my labtop i using “shopify serve” to start the server on my localhost and it’s working fine. However how do you start your server with nginx ?

Is there any tutorial to achieve this. i’m currently stuck to launch my app from local machine

Any help would save me !