Using https for HMR with puma-dev

[ledermann]

Hey @ElMassimo, thanks for this great project! I'm trying to migrate some Rails projects from webpacker to vite_ruby and it seems a bit hard to configure Vite for https with puma-dev in development.

In the puma-dev docs there is a recipe for webpack-dev-server (via proxy):
https://github.com/puma/puma-dev#webpack-dev-server

I was successful to adopt this for Vite with the following configuration, which I would like to share:

Set up puma-dev:

puma-dev link -n myapp
echo 3036 > ~/.puma-dev/vite.myapp

Edit vite.json:

  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "host": "vite.myapp.test",
    "port": 3036
  },

Add this vite.config.ts:

server: {
  hmr: {
    host: 'vite.myapp.test',
    clientPort: 443,
  },
},

Edit content_security_policy.rb:

Rails.application.configure do
  config.content_security_policy do |policy|
    if Rails.env.development?
      policy.style_src :self, :unsafe_inline
      policy.script_src :self, :unsafe_eval, :unsafe_inline, :blob, "https://#{ViteRuby.config.host}"
      policy.connect_src :self, "wss://#{ViteRuby.config.host}"
      # ...

Now the app is available locally at https://myapp.test using HMR via https, too.

[ElMassimo]

Hi Georg! Glad that you find it useful, and thank you for the Rails version of pingcrm 😃

Thanks for sharing this recipe! I've added a link in the FAQs to this discussion.

[ledermann]

Great, thanks!

[jisuanjixue]

Thanks for @ledermann I use your the Rails version of templatus-inertia add puma-dev , There are some errors, I don't know where

I went wrong, I don't know much about some back-end technologies, I hope you can help me take a look.

[ledermann]

@jisuanjixue Seems there is something wrong with your puma-dev setup, see the Getting Started section in my repo. Please open a new issue in my repo if it still fails.

Here we are in the vite_ruby repo, which appears to be unrelated.

[jisuanjixue]

@ledermann OK, thanks!