Development w/ ngrok + HMR (recipe)

[matoni109]

Hi Everyone,

1st thanks to @ElMassimo for the gem ❤️

We are developing a embedded React Shopify app across a team of developers, each with their own dev environments & ngrok (paid) domains for the development Stores.

Below is how we are making that happen at the moment with vite-rails. I've seen a couple of threads on folks having issues / asking how to do it, & that is where I've got the pieces for below so thanks to the community here.

We use foreman for our Procfile.local

Always open to different ways of config if you've got ideas, I'd love to hear them 💯

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import RubyPlugin from 'vite-plugin-ruby'
const whoami = process.env.WHOAMI;

export default defineConfig({
  server: {
    strictPort: true,
    hmr: {
      host: `dev-shopify-vite-${whoami}.ngrok.io`,
      clientPort: 443,
    },
  },
  plugins: [

    RubyPlugin(),
    react(),
  ],
})

// vite.json
{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "host": "0.0.0.0",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

# Procfile.local
vite: WHOAMI=$(whoami) bin/vite dev
ngrok_rails: echo "http --subdomain=dev-shopify-$(whoami) 3001" | xargs ngrok --log stdout
ngrok_vite: echo "http --subdomain=dev-shopify-vite-$(whoami) 3036" | xargs ngrok --log stdout
redis: pgrep redis-server > /dev/null && echo "already running" && while :; do sleep 1; done || redis-server
web:  bundle exec rails s -p3001