WS doesn't connect #327

phbou72 · 2022-12-22T20:36:07Z

phbou72
Dec 22, 2022

Hi! I'm getting those errors when trying to make Vite + Ruby work :
client.ts:78 WebSocket connection to 'wss://an-host.io:3036/vite-dev/' failed:
an-host:3036/vite-dev/ net::ERR_CONNECTION_CLOSED

The assets are loading but no HMR. My local dev server is hosted on https. Not sure if it impact the connection for the WS. However, I also can't connect on https://127.0.0.1:3036/vite-dev/. I'm met with a 404 error.

Any idea what could be the problem?

Here's my configurations
vite.config.ts

import {defineConfig} from 'vite';
import RailsPlugin from 'vite-plugin-rails';
import react from '@vitejs/plugin-react-swc';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    RailsPlugin(),
    react(),
    tsconfigPaths(),
  ],
  base: '/',
  css: {
    modules: {
      scopeBehaviour: 'local',
      globalModulePaths: [new RegExp('app/ui')],
      localsConvention: 'camelCaseOnly',
    },
  },
});

vite.json

{
  "all": {
    "sourceCodeDir": "app/ui",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Vite+Ruby</title>
    <meta charset="UTF-8" />
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= vite_client_tag %>
    <%= vite_react_refresh_tag %>
    <%= vite_typescript_tag 'application.tsx' %>
  </head>

  <body>
    <div id="app" />

    <%= yield %>
  </body>
</html>

routes.rb_

Rails.application.routes.draw do
  ...
  root "welcome#index"
  get '*path', to: "welcome#index"
end
...

Answered by ElMassimo

Jan 16, 2023

My local dev server is hosted on https

In that case, you'll need to configure Vite dev server to use https by providing a valid certificate.

You will also need to set "https": true so that Vite Ruby is aware, or use the skipProxy experimental setting so that assets are requested from the Vite dev server directly.

View full answer

phbou72 · 2022-12-22T22:21:13Z

phbou72
Dec 22, 2022
Author

Here's a demo repo you can pull : https://github.com/phbou72/vite-ruby-test

0 replies

phbou72 · 2023-01-03T21:53:21Z

phbou72
Jan 3, 2023
Author

Is this issue related to this ? https://vite-ruby.netlify.app/guide/troubleshooting.html#making-hmr-work-with-puma-dev-in-https-apps

0 replies

ElMassimo · 2023-01-16T15:17:14Z

ElMassimo
Jan 16, 2023
Maintainer

My local dev server is hosted on https

In that case, you'll need to configure Vite dev server to use https by providing a valid certificate.

You will also need to set "https": true so that Vite Ruby is aware, or use the skipProxy experimental setting so that assets are requested from the Vite dev server directly.

0 replies

phbou72 · 2023-01-16T16:37:23Z

phbou72
Jan 16, 2023
Author

If I tried this config with the plugin @vitejs/plugin-basic-ssl:

import {defineConfig} from 'vite';
import RailsPlugin from 'vite-plugin-rails';
import react from '@vitejs/plugin-react-swc';
import tsconfigPaths from 'vite-tsconfig-paths';
import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({
  plugins: [basicSsl(), RailsPlugin(), react(), tsconfigPaths()],
  base: '/',
  css: {
    modules: {
      scopeBehaviour: 'local',
      globalModulePaths: [new RegExp('app/ui')],
      localsConvention: 'camelCaseOnly',
    },
  },
  server: {
    cors: {
      origin: '*',
    },
    https: true,
    hmr: {
      protocol: 'wss',
    },
  },
});

I end up with this kind of error: https://app.io/vite-dev/@vite/client net::ERR_ABORTED 500

However, if I set server.https = false and server.hrm.protocol = 'ws' the app load but not the HMR :
[vite] failed to connect to websocket (SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.).

Feel like I'm missing something?

2 replies

ElMassimo Jan 16, 2023
Maintainer

Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

That makes sense, updated my answer to remove this as it's not a viable option, and added a mention of skipProxy which might be useful in this scenario.

Make sure that you configure the host correctly as well. What does app.io resolve to in your configuration, localhost?

phbou72 Jan 16, 2023
Author

OK, so I figured out the right config :

This work for me! Thanks for your help @ElMassimo !

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WS doesn't connect #327

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

WS doesn't connect #327

phbou72 Dec 22, 2022

Replies: 4 comments · 2 replies

phbou72 Dec 22, 2022 Author

phbou72 Jan 3, 2023 Author

ElMassimo Jan 16, 2023 Maintainer

phbou72 Jan 16, 2023 Author

ElMassimo Jan 16, 2023 Maintainer

phbou72 Jan 16, 2023 Author

phbou72
Dec 22, 2022

Replies: 4 comments 2 replies

phbou72
Dec 22, 2022
Author

phbou72
Jan 3, 2023
Author

ElMassimo
Jan 16, 2023
Maintainer

phbou72
Jan 16, 2023
Author

ElMassimo Jan 16, 2023
Maintainer

phbou72 Jan 16, 2023
Author