Build a script in lib mode and a website at the same time

[mquandalle]

I use to Vite to :

• build my website
• build a script that people can reference to transparently integrate a module on their site (think iframe with extra features).
  It uses Vite library mode

Currently I have to use two different vite config : website and external script. These 2 distincts configs introduce some complexity (slightly harder to launch the two build in dev or production mode, maybe some issues with vite internal cache reset when a change is detected on the config), and I wonder if I could simplify it.

It's already possible to have multiple entry points on a vite config, but as far as I know all of them have to be in library mode or not. It isn't possible to generate at the same time a script in library mode and a website alongside. Any idea to solve this?

[sunnynk19]

Did you get the solution?

[laurentlahmy]

Pointers would be helpful

[seb-lean]

Still totally stuck on this. Need to build a lib and demo site for local dev

[laurentlahmy]

only success I've had was changing (commenting out parts of) the vite.config file. How about a build script that includes a step of modifying the vite.config or renaming config files to the vite.config you need to use?

[mquandalle]

We did this by having two distincts vite.config files.

However the upcoming Vite 6 environnement API will unlock this use case of having distincts builds for different environnements using a single build step.

[guradia]

@mquandalle did you successfully test it yet?

I'm have the same idea: a lib (Lib-Mode) and a "more filled" testing page (Default-Mode).
A concern just for the build process. The Environment API is mostly targeted at the Dev Server and all my tries with envirneoments: {} had zero effect.

My solution than stays with this:

    "build": "pnpm build:lib && pnpm build:site",
    "build:lib": "vite build",
    "build:site": "vite build --config vite.config.site.js",

So i have to separately start two --watch processes, if i need them.