Bundling a library entrypoint

[woodhull]

My application consists of two parts:

• A single-page-app bundled by vite, with a rails backend and vuejs frontend. This is working great.
• A js library that customers embed on their site by including a script tag.

There is shared code between these two parts of the product, and in my head these are just two different entrypoints to the same code base.

I think from reading the docs that I should be using Vite library mode for this second entrypoint? https://vitejs.dev/guide/build.html#library-mode

Yet... I'm not sure how to make that happen while using vite_ruby for the rest of the product. Is there a recommended way to set this sort of thing up in vite_ruby? My only idea so far is to create a new vite config for the js library entrypoint that doesn't use vite_ruby at all, with two separate builds, but this seems complicated to setup.

[ElMassimo]

Hi Nathan!

If I understood correctly, your JS library would be built and released separately from the Rails deployment.

If that's the case, it makes sense to use a different config to build that. You should be able to share most of the config by importing one file, for example:

// vite.library-config.ts

import { defineConfig } from 'vite'
import vite from './vite.config'

export default defineConfig({
  ...vite,
  build: {
    lib: {
      ...
    },
  },
})

I haven't had a similar use case, so not sure if library mode will "win" at setting rollupOptions.input—which is configured by vite-plugin-ruby based on your entrypoints—or if the plugin would override your config.

If the latter happens, you could create a shared vite.base-config.ts file without vite-plugin-ruby (and add the default aliases manually), and import it both in vite.library-config.ts and vite.config.ts.

As a reminder, Vite supports the --config flag to specify which config you want to use, so you can build the library by running npx vite build --config vite.library-config.ts or bin/vite build -- --config vite.library-config.ts if it depends on some kind of Ruby-specific settings.

Finally, I'd recommend not placing the JS library "entrypoint" in the entrypoints dir if you are not referencing it in your Rails app, to avoid building it unnecessarily, and ensure Rollup can do a better job at code-splitting.