Skip to content

Advanced Usage

This section discusses settings that most projects don't need to configure explicitly.

Additional Entrypoints

By default, any files inside the entrypointsDir will be considered entries to be bundled, allowing them to be referenced in tag helpers.

If you need to reference files outside entrypointsDir, you can use additionalEntrypoints to configure additional entries to be bundled by Vite.

By default, it's configured to: ["~/{assets,fonts,icons,images}/**/*"], since it's common to reference these files in tag helpers:

vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg

If you would like to opt out from bundling these files, configure it as:

    "additionalEntrypoints": []

Bundling files outside sourceCodeDir

When using a library such as ViewComponent, it can be convenient to group JS and CSS files within each component folder, which is called sidecar assets.

There are a few options to achieve this, each with their pros and cons.


Make sure to add app/components/**/* to watchAdditionalPaths, to ensure the build is triggered when any of the component files changes.

Import every component

The simplest option is to leverage glob imports to import all components in a single entrypoint, which is suitable for cases where there are few components, or when all components should be registered in all pages.

// app/frontend/entrypoints/application.js

Any files imported from each .js file will be bundled as well.

One entrypoint per component

To bundle each component independently, configure additionalEntrypoints:

    "additionalEntrypoints": [

and then reference them as needed in views or partials:

<%= vite_javascript_tag '/app/components/comment_component' %>
Advanced Usage has loaded