vite_javascript_tag to dev server instance

[dflynn15]

I was curious if you would be able to help validate or help me understand something that I'm seeing.

For an entry, I use vite_javascript_tag and in the browser's Network tab it requests the file from localhost:3000/vite-dev. I'm looking at trying to have Vite's dev server run HTTP/2 (https: true https://vitejs.dev/config/#server-https) to help with serving the number of imports my application contains. However, because puma and Rails do not currently have an easy way to serve H2 I was curious if there was the ability to have the vite_javascript_tag hit the development server directly instead of proxying through Rails (i.e. src="https://localhost:3036/vite-dev dev server).

[ElMassimo]

Hi Daniel.

Currently, the library is based around the use of a proxy for ease of use.

Thanks to some fixes contributed upstream, the use of the proxy is not as critical as it used to be, as Vite should behave correctly and request assets respecting the original host in each script and link tag.

I provide the following notes as a workaround that you can try out, if you try it let me know how it goes. Also, out of curiosity, why do you want to enable HTTP/2 locally, is the amount of requests very high?

---

Provided that your CSP configuration allows connections to a different server (Vite's dev server), you should be able to bypass the proxy and connect with Vite directly.

If you are not using sprockets nor webpacker, a way to achieve it is by configuring asset_host, so that Rails tag helpers use the Vite dev server as the source for all assets:

# config/development.rb

Rails.application.configure do
  vite_host = "#{ViteRuby.instance.config.protocol}://#{ViteRuby.instance.config.host_with_port}"
  config.action_controller.asset_host = vite_host
 
  # Ensures the URL in the client tag matches the host of the script and stylesheet tags, else HMR won't work as expected.
  ViteRuby.reload_with(asset_host: vite_host)

Otherwise, it might be necessary to manually provide host option to the Vite Ruby tag helpers.

def vite_options
  Rails.env.development? ? { host: vite_host } : {}
end

<%= vite_typescript_tag 'application', **vite_options %>

Sidenote: if you are using Sass, you might also need to avoid an extra .css extension added by the stylesheet_link_tag helper, which is currently handled by the proxy.

<%= vite_stylesheet_tag('styles.scss', **vite_options).sub('.scss.css', '').html_safe %>