Vite

A component written in JSX, TypeScript, a Vue or Svelte file needs a build. Vite makes it - and PAD links the result by the name of the source, so a template never names a hashed file (the islands application builds its components this way):

<div data-island="Cart" data-props="{^cart}"></div>

{vite 'src/main.js'}

In production that is the entry's stylesheet, its chunks as modulepreload and its <script type="module">, from the manifest the build wrote. While the dev server runs it is the dev server - with hot module replacement, a save in the editor shows at once.

The build

Vite writes into the application's www/ directory - build/ unless $padViteBuild says otherwise - with its manifest on, and its base the address of that directory:

// vite.config.js
import fs from 'node:fs';
import path from 'node:path';

export default {
  base: '/myapp/build/',
  build: {
    outDir: '../../www/myapp/build',
    manifest: true,
    rollupOptions: { input: [ 'src/main.js' ] }
  },
  plugins: [ padHot() ]
}

// the dev server's address in build/hot while it runs - {vite} asks it then
function padHot () {
  const file = '../../www/myapp/build/hot';
  return {
    name: 'pad-hot',
    configureServer ( server ) {
      server.httpServer.once('listening', () => {
        const { port } = server.httpServer.address();
        fs.mkdirSync(path.dirname(file), { recursive: true });
        fs.writeFileSync(file, `http://localhost:${port}`);
      });
      process.once('exit', () => fs.rmSync(file, { force: true }));
      for (const signal of ['SIGINT', 'SIGTERM', 'SIGHUP'])
        process.once(signal, () => process.exit());
    }
  };
}