Allow preview mode for libraries

[yarinsa]

Clear and concise description of the problem

I am building a web SDK.
I used the lib mode to configure my outputs.
I am developing the library in esm and my library is gonna be served in cjs. In order to make sure it's working (tests and manually) I need to copy/create index.html file and reference the output script (vite does it on regular mode OOO).

Suggested solution

Therefore I want to allow 'lib preview' let me explain:

1. Developer run yarn vite preview
2. Preview server is starting (same as today), but it copies the HTML file to the dist and do the following (this piece of code I wrote in a vite plugin)

    transformIndexHtml: async (htmlString) => {
      const htmlStringWithScript = htmlString.replace(
        `<script type="module" src="./src/index.ts"></script>`,
        `<script src="sdk.cjs.js"></script>`,
      );
      return htmlStringWithScript;
    },

Alternative

Allow configuring 'preview' options to serve libraries

Additional context

I am also willing to contribute and open PR, if the authors will see this feature as meaningful to the platform

Validations

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

[chardin1]

@Niputi What's the status on this?

[vilbergs]

Upvoting this. It would be great if this was possible so that we can more easily run our e2e tests on the production bundle.

[ursnj]

This is definitly needed

[mattsouth]

A workaround Ive used is a second config file, i.e. vite.preview.js that's based on the default but doesnt have the library config. Then change your packages.json preview script to be vite build -c vite.preview.js && vite preview.

[RomainSF]

+1, I need to run transformIndexHtml during preview only

[morganney]

This produces a build of the index.html file used to demo my lib in the output directory:

rollupOptions: {
  input: {
    'index.html': 'index.html',
  },
},

allowing me to npm run build and then npm run preview.
If you don't want the demo index.html file in your published build use an env var to adjust the config.

[FreekVR]

@morganney your solutions works, kinda, but it transforms the index.html script tag so that the umd variant is being loaded, which results in browser errors. I can confirm it works if I only build the es variant, but it looks like there's some part of vite that's giving the correct HTML in this case.

<script type="module" crossorigin src="/main.umd.cjs"></script>

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/node".

Anyone else run into anything like this?