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.

[mfrieling]

I have a similar use case but am not sure if that will be covered by the environment API after reading the docs. I'm working on a Drupal 10 site with two Drupal themes and one or more Drupal modules containing UI parts. I'm using Single Directory Components (SDC). The purpose of the modules is to contain UI components and widgets which are shared between the different themes and therefore cannot be part of any theme. The SDCs consist of Twig templates (this must not be handled by Vite), component specific styles (SMACSS module and eventually layout categories) and scripts.
The themes have SDCs as well but those are more like building blocks, aka putting things together (i. e. a full article teaser display/card/...) and the Drupal Twig templates, theme styles and scripts.

You don't need to know Drupal, only the file structure is relevant here:

<root>: # Repository root
  vendor: # PHP dependencies, like the node_modules folder in JS world.
  web: # Web root, this folder is exposed by the webserver
    modules:
      contrib: # Contains all 3rd-party modules
      custom: # Our own modules
        my_ui_components:
          dist: # Vite build output of the module should go here.
          components: # The root folder of the SDCs in the module.
    themes:
      custom: # Our own modules
        theme_a:
          dist: # Vite build output of the theme should go here.
          components: # The root folder of the SDCs in the theme.
          src: # Theme styles and scripts in subfolders (css and js usually).
          templates: # Theme Twig templates (with Drupal context).
        theme_b: # Same structure as theme_a.
    index.php: # Drupal entry point

I tried to put the vite.config.js into <root> but that doesn't work. By default the output would be in <root>/dist/, and even if I change it to <root>/web/dist/ I have no chance to get the files where they need to be (<root>/web/[modules|themes]/custom/[module_name|theme_name]/dist/ as

error during build:
Invalid pattern "../themes/custom/theme_name/components/title/style" for "output.entryFileNames", patterns can be neither absolute nor relative paths. If you want your files to be stored in a subdirectory, write its name without a leading slash like this: subdirectory/pattern.

output.entryFileNames, output.assetFileNames etc. cannot contain ../ to get out of the dist folder.

[mitar]

@mquandalle Any update on how you are addressing this these days?

[chrisjcthomas]

I don't think a single Vite build pass can be both:

• a normal app build driven by HTML entry points
• and a library-mode build driven by build.lib

The docs describe those as two different build shapes:

• app build: HTML entry (index.html, MPA HTML inputs, etc.)
• library mode: build.lib

So your current instinct is basically right: once you switch on build.lib, you're in a different output mode than the website build.

The practical solution is usually not "force one config to do both in one build", but:

• keep a shared base config
• run two builds with small overrides

For example:

• one build for the site
• one build for the embeddable script/library

That can still be cleaner than maintaining two fully separate configs if you factor out the shared pieces and call Vite twice (or use two npm scripts / a small JS build runner).

So my read is:

• no, there isn't really a single built-in "simultaneous app build + library-mode build" switch
• the clean path is shared config + two build invocations