Manage multiple Vite SPAs with separate config files

[franzliedke]

Hello and thanks for this gem,

our app consists of multiple Vue single-page apps, some of which we are currently finally migrating from Vue 2 to Vue 3.

As a first step, we are migrating the bundling from Webpack to Vite for the Vue 2 apps. (Another Vue 3 app is already on Vite.) Because we need different Vite plugins (e.g. the Vue 2 one) for each app, I think I need a different Vite config file for each, essentially two Vite build processes. Native Vite supports this with e.g. vite build --config other.file.config.js.

Can this somehow be achieved with vite_ruby? Or is there another attempt I can try out?

[ElMassimo]

Hi Franz!

It's possible, but it's not supported out of the box, it requires a bespoke setup.

I'd recommend that you try restricting the vue plugins via include and exclude, so that the Vue 2 one only processes the old code, while the Vue 3 only processes the new code (ideally place the code in different dirs, and use regexes based on those dirs).

If you need a separate bundle for each app...

An approach I'm using in a Rails app that requires 6 different builds involves manually specifying the entrypoints per "bundle":

const bundles = {
  admin: {
    entrypoints: [
      'entrypoints/admin.ts',
    ],
  },
  main: {
    entrypoints: [
      'entrypoints/main.ts',
      'entrypoints/main_styles.scss',
    ],
  },
  // 4 additional apps.
}

const separateBundlesPlugin: Plugin = {
  name: 'build:separate-bundles',
  apply: 'build',
  enforce: 'post',
  configResolved ({ build: { rollupOptions } }) {
    const bundleName = process.env.VITE_RUBY_BUNDLE_NAME
    const bundleConfig = bundles[bundleName]

    if (!bundleConfig)
      throw new Error(`Unknown frontend bundle ${bundleName}.`)

    console.info('Building', { bundleName, ...bundleConfig })

    rollupOptions.input = Object.fromEntries(Object.entries(rollupOptions.input)
      .filter(([name, value]) => bundleConfig.entrypoints.includes(name)))

    console.info(rollupOptions.input)
  },
}

That way I can start a single dev server and use all "apps" in development, while at build time each one gets its own manifest:

# app/helpers/vite_build_helper.rb

# Override: We want to use separate builds for each frontend app, since the
# users of these apps don't have a lot of overlap, and we want to optimize each
# bundle separately.
module ViteBuildHelper
  # Override: Returns a different ViteRuby instance for each app.
  #
  # In development, we want the convenience of a single dev server.
  # In production, use a separate build output dir and manifest for each app.
  def vite_ruby_instance
    @vite_ruby_instance ||= if Rails.env.local? && ViteRuby.instance.dev_server_running?
      ViteRuby.instance
    else
      ViteBuildHelper.instances[vite_bundle_name]
    end
  end

  # Internal: Infer the corresponding Vite bundle based on the controller's config, shared through inheritance.
  def vite_bundle_name
    controller.vite_bundle_name
  end

  class << self
    def instances
      @instances ||= Hash.new { |instances, bundle_name|
        instances[bundle_name] = new_instance(name)
      }
    end

    def new_instance(name)
      config = ViteRuby::Config.resolve_config

      ViteRuby.new(
        auto_build: Rails.env.development? || (Rails.env.test? && !ENV["CI"]),
        public_output_dir: "#{config.public_output_dir}/#{name}",
        build_cache_dir: "tmp/cache/vite/#{name}",
      ).tap do |instance|
        instance.define_singleton_method(:bundle_name) { name }
        instance.env["VITE_RUBY_BUNDLE_NAME"] = name.to_s
        instance.logger = ViteRuby.instance.logger
      end
    end
  end
end

In this case, I also take advantage of the fact that I can configure certain plugins to only process a portion of the app (via include, exclude), so for example, I have six instances of unplugin-vue-components configured differently.

If possible, I'd suggest trying to find a different approach, as this gets quite complex.

[franzliedke]

@ElMassimo Hey, thanks again. I think I'm almost there, I'm just having trouble with the details.

What I achieved so far: I simplified the two separate Vite configs, so that they are now very similar. My plan was to bridge the differences using include and exclude as you suggested.

I have differences in which Vite plugins I want applied depending on path (plugin-vue and plugin-vue2), and also have some resolve.alias mappings that should only apply to one of the two apps.

So, concrete questions:

• Where exactly do I apply include / exclude? The only thing I found in documentation was createFilter(), deep within Rollup internals. That sounds like I need to define a new plugin - or can I apply this to the existing plugins I import?
• From what you wrote, it sounded like include and exclude only work for plugins. Can I achieve the same for resolve.alias?

[franzliedke]

Looks like include/exclude won't be usable for the vue2 plugin, this person has the exact same problem: vitejs/vite-plugin-vue2#102

[ElMassimo]

In that case, using two separate builds:

bin/vite build -- --config vite-vue2.config.ts

You will probably need two Vite dev servers, along with a way to manage two ViteRuby.instance that render script tags targeting one or the other depending on which "app" should be rendered.

Simplifying how that might look at build time:

task build_vue_apps: :'vite:verify_install' do
  ViteRuby.vue3_instance.commands.build_from_task # ("--config", "vite.config.ts") 
  ViteRuby.vue2_instance.commands.build_from_task("--config", "vite-vue2.config.ts") 
end

Supporting this in Vite Ruby out of the box is definitely out of scope, but as I mentioned before, it's already possible to get something like this working given you can have multiple instances of ViteRuby and configure them differently.

Since you will need two different dev servers, you might as well simplify the ViteBuildHelper example above and customize entrypointsDir differently for each app so that the Vue2 and Vue3 entrypoints are separate, by passing entrypoints_dir to ViteRuby.new, allowing you to skip a manual list of entrypoints as in the example above.

[zealot128]

Great starters @ElMassimo !

We want to reintegrate several different Rails Apps (That already are built by Vite-Rails) back into one Monolith using "packs" (Similar to engines, but co-located in packs/NAME/app/javascript) to simplify our inter-apps dependencies, synchronization and deployments.

We already had great success with configuring Vite to also look there via aliases (e.g. aliases: { "app_name": "packs/app_name/app/javascript/*" } }) and TSConfig-paths, but for some bigger reintegrated apps, that have a different frontend, design, we'd like to supply a completely different package.json + vite.config.ts in the pack root file. (like packs/NAME/package.json + packs/NAME/vite.config.ts + packs/NAME/.postcss.yml)

Why different package.json: Because there might be older Bootstrap4 oder Vue 2.7, vs. Vue 3 etc. in the app together that would conflict in a singular package.json

If you ever have built something like that, I would be grateful if you could share your experiences. Especially regarding separating the package.json or bin/vite cli tool, like bin/vite-SUBAPP etc.
Otherwise, I will report back my findings in January when we try to accomplish this :)

[ElMassimo]

Haven't had the need for separate config files, but should be easy to achieve if you use a custom binstub that can set the --config flag for Vite accordingly.

Have in mind that you can use imports in the Vite configs to share plugins and configuration, both for consistency and to avoid duplication.