title: A way to run vite dev on remote server (like Laravel Mix)
body: <p>I've switched from Laravel Mix to Vite, and am trying to accomplish same thing &quot;npm run watch&quot; does for Laravel Mix. Caveat: our staging servers are not local (i.e. staging.app-domain-name.com). If I run npm run dev with Vite it revs up the &quot;dev&quot; server that's supposed to be at http://ip:3000, but that obviously does not work. Aside from not having an active watcher, I can't get the dev to be used with Vue Devtools plugin (since vite only can spit out prod on server).</p>
  <p>My vite.config.js:</p>
  <pre><code>const { resolve } = require('path');
  import vue from '@vitejs/plugin-vue';
  
  export default ({ command }) =&gt; ({
      base: command === 'serve' ? '' : '/dist/',
      publicDir: 'fake_dir_so_nothing_gets_copied',
      build: {
          manifest: true,
          outDir: resolve(__dirname, 'public/dist'),
          rollupOptions: {
              input: 'resources/js/app.js',
          },
      },
  
      server: {
          host: true,
          port: '8080',
          hot: true
      },
  
      plugins: [vue()],
  
      resolve: {
          alias: {
              '@': resolve('./resources/js'),
          },
      },
  });
  </code></pre>
  <p>My app.js</p>
  <pre><code>import &quot;./bootstrap&quot;;
  import '../css/app.css';
  import { createApp, h } from 'vue';
  import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
  import { InertiaProgress } from '@inertiajs/progress';
  
  let asyncViews = () =&gt; {
      return import.meta.glob('./Pages/**/*.vue');
  }
  
  const el = document.getElementById('app');
  
  createApp({
      render: () =&gt;
          h(InertiaApp, {
              initialPage: JSON.parse(el.dataset.page),
              resolveComponent: async name =&gt; {
                  if (import.meta.env.DEV) {
                      return (await import(`./Pages/${name}.vue`)).default;
                  } else {
                      let pages = asyncViews();
                      const importPage = pages[`./Pages/${name}.vue`];
                      return importPage().then(module =&gt; module.default);
                  }
              }
          }),
  })
      .mixin({ methods: { route } })
      .use(InertiaPlugin)
      .mount(el);
  </code></pre>
  <p>And package.json scripts:</p>
  <pre><code>&quot;scripts&quot;: {
      &quot;predev&quot;: &quot;printf \&quot;dev\&quot; &gt; public/hot&quot;,
      &quot;dev&quot;: &quot;vite&quot;,
      &quot;preprod&quot;: &quot;printf \&quot;prod\&quot; &gt; public/hot&quot;,
      &quot;prod&quot;: &quot;vite build&quot;
  }
  </code></pre>
  <p>Desired outcome to generate dev bundle on a remote server by running</p>
  <pre><code>npm run dev
  </code></pre>
  <p>Currently it tries to create localhost dev. I assume something in vite.config.js needs to be set to get that done. I've gone over the docs but could not find anything clear enough.</p>