Vite Preview Watch Mode

[danwetherald]

trafficstars

Clear and concise description of the problem

When using vite without a index.html file for strictly a "library" or other script where /dis/.... is the only asset in interest, the only way we can currently run this locally is with vite build --watch paired with http-server for instance.

Is there any way to get a local http server for the static /dist assets with a watcher?

Suggested solution

vite preview --watch

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[mismith]

How we're doing it, essentially: vite build --watch & vite preview

Though I agree it would be nice to have a built-in so we could chain args onto that, and avoid & cross-env issues, etc.

[silentmantra]

I think there should be a live reload also

[bluwy]

We have discussed this yesterday and are open to implement vite preview --watch. It would watch the outDir and trigger a page reload via websocket. I suppose we could reuse the dev client.ts for that handling, if it makes it easier to implement.

[silentmantra]

How we're doing it, essentially: vite build --watch & vite preview

Though I agree it would be nice to have a built-in so we could chain args onto that, and avoid & cross-env issues, etc.

we need a live reload also

[bluwy]

Of course, I think it was implied that --watch would trigger that reload.

[Shakeskeyboarde]

I also want this. I think for me it would be a valid alternative to having tree shaking for the dev server (see also https://github.com/vitejs/vite/issues/8237). In fact, I already turn off HMR (which I generally am not a fan of) in favor of full page reloads (plugin).

[silentmantra]

I also want this. I think for me it would be a valid alternative to having tree shaking for the dev server (see also #8237). In fact, I already turn off HMR (which I generally am not a fan of) in favor of full page reloads (plugin).

I'm about to turn HMR off too. It doesn't keep full state of a component (props, provides, parent DOM event listeners and so on). It's ok for CSS styles though.

[ftzi]

This is what is blocking me from migrating from Parcel.

[patricknelson]

I think vite preview --watch would be fantastic when compiling to iife/umd as well, since there's no obvious way that I can find to easily develop for that output format (it's very esm centric when in dev mode). At least not with Vite on its own.

[patricknelson]

One potentially suitable alternative that I found for now: alive-server (updated fork of live-server).

If it helps anyone else, here's what I'm doing:

1. Setup alive-server either globally or as a dev dependency

2. Separate dev script to build/watch + serve/watch, e.g. where build:iife is my alias to build the alternate

   {
     "scripts": {
       "preview:watch": "vite build --watch & alive-server --port=4173 dist/",
     }
   }
   

I figured port 4173 would make it a good drop in replacement for vite preview at http://localhost:4173. 🙂

[antoniogiroz]

That is my workaround using concurrently:

{
  "scripts": {
    "preview:watch": "concurrently \"vite preview -l silent\" \"vite build --watch\"",
  }
}

[acupofspirt]

Vite has JavaScript API, so it is possible to run both build --watch and preview as a single command:

dev.js

import { build, preview } from 'vite';

let previewServer;

build({ build: { watch: {} } }).then((buildWatcher) => {
  buildWatcher.on('event', async ({ code }) => {
    if (code === 'END') {
      previewServer = previewServer || (await preview());

      console.log('\n');
      previewServer.printUrls();
    }
  });
});

package.json

{
  "scripts": {
    "dev": "node dev"
  }
}

[ccaspanello]

@acupofspirt - This is a great suggestion. How can this be configured to pass in a --port XXXX via the package.json script? This would be useful for micro frontends.

[acupofspirt]

@ccaspanello Smth like this

import minimist from 'minimist';
import { build, preview } from 'vite';

const { port } = minimist(process.argv.slice(2))

let previewServer;

build({ build: { watch: {} } }).then((buildWatcher) => {
  buildWatcher.on('event', async ({ code }) => {
    if (code === 'END') {
      previewServer = previewServer || (await preview({preview: { port }}));

      console.log('\n');
      previewServer.printUrls();
    }
  });
});

and

{
  "scripts": {
    "dev": "node dev --port 5555"
  }
}

[animeshk874]

Is there any update on this? It would be really useful to have the vite preview --watch command shipped out of the box. As @patricknelson mentioned, it'd make iife/umd dev experience smoother and faster

[Shakeskeyboarde]

While I still think it would be useful to add --watch to preview, I realized that at the moment, the preview command has a single responsibility (starting a server) that does not include building. That does complicate adding the option to the preview command, because it should probably also include adding build specific command line options, and the --watch option would imply building, where the preview command currently does not. It might actually be better to add a --preview option to the build command, so vite build --preview instead of vite preview --watch.

So, I took the Vite API solution @acupofspirt posted, added auto page reloading, and turned it into a separate tool as a stand-in for the (hopefully) future vite preview --watch or vite build --preview command.

• https://www.npmjs.com/package/vite-live-preview
• https://github.com/Shakeskeyboarde/vite-live-preview

Hope this helps some of you. Feel free to post issues on the repo or contribute.

[nChauhan91]

So, I took the Vite API solution @acupofspirt posted, added auto page reloading, and turned it into a separate tool as a stand-in for the (hopefully) future vite preview --watch or vite build --preview command.

* https://www.npmjs.com/package/vite-live-preview

* https://github.com/Shakeskeyboarde/vite-live-preview

Hope this helps some of you. Feel free to post issues on the repo or contribute.

I do get this output about the page reloading but the page doesn't reload & has to be reloaded manually

`9:31:16 PM [vite] page-reload

9:31:16 PM [vite] preview server ready`

[Shakeskeyboarde]

So, I took the Vite API solution @acupofspirt posted, added auto page reloading, and turned it into a separate tool as a stand-in for the (hopefully) future vite preview --watch or vite build --preview command.

* https://www.npmjs.com/package/vite-live-preview

* https://github.com/Shakeskeyboarde/vite-live-preview

Hope this helps some of you. Feel free to post issues on the repo or contribute.

I do get this output about the page reloading but the page doesn't reload & has to be reloaded manually

`9:31:16 PM [vite] page-reload

9:31:16 PM [vite] preview server ready`

There was a bug. Try updating to the latest version (0.1.8).

[nChauhan91]

@Shakeskeyboarde I used (0.1.8) only, I again cross-checked by re-installing. The build is successful & the output is in the console [vite] page-reload but the page must be reloaded manually.

[Shakeskeyboarde]

@Shakeskeyboarde I used (0.1.8) only, I again cross-checked by re-installing. The build is successful & the output is in the console [vite] page-reload but the page must be reloaded manually.

Okay. Could you report a bug on the repo please? Include the browser, os, package manager, and a minimal repro if you can.

[nChauhan91]

@Shakeskeyboarde Done 👍🏻 https://github.com/Shakeskeyboarde/vite-live-preview/issues/1