### Install Dependencies
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite_plugin_legacy/README.md
After adding the gem to your Gemfile, run bundle install to install the necessary dependencies.
```bash
bundle install
```
--------------------------------
### Install Vite Ruby
Source: https://github.com/elmassimo/vite_ruby/blob/main/README.md
After adding the gem to your Gemfile, run bundle install and then execute the vite install command to generate configuration files and a sample setup.
```bash
bundle install
bundle exec vite install
```
--------------------------------
### Install Vite Ruby
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/index.md
Run the installation command to set up Vite Ruby. This command adds necessary executables, installs Vite and its plugins, creates configuration files, and injects tag helpers into your layout.
```bash
bundle exec vite install
```
--------------------------------
### Run Development Server
Source: https://github.com/elmassimo/vite_ruby/blob/main/examples/hanami_bookshelf/README.md
Start the Hanami development server.
```bash
% bundle exec hanami server
```
--------------------------------
### Install Dependencies
Source: https://github.com/elmassimo/vite_ruby/blob/main/CONTRIBUTING.md
Run these commands to install Ruby and pnpm dependencies for the development environment.
```shell
bundle install
```
```shell
pnpm install
```
--------------------------------
### Avoid Double Dependency Installation
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
Example of a deployment script that could lead to double dependency installation. Ensure your deployment process avoids pruning development dependencies.
```bash
npm ci
# later
NPM_CONFIG_INCLUDE="dev" npm ci
```
--------------------------------
### Install vite-plugin-rails
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-rails/README.md
Install the plugin using npm or yarn.
```bash
npm i vite-plugin-rails # yarn add vite-plugin-rails
```
--------------------------------
### Start Vite Development Server
Source: https://github.com/elmassimo/vite_ruby/blob/main/README.md
To start the Vite development server, run the bin/vite dev command. This command is essential for the development workflow.
```bash
bin/vite dev
```
--------------------------------
### Run Development Console
Source: https://github.com/elmassimo/vite_ruby/blob/main/examples/hanami_bookshelf/README.md
Start the Hanami development console for interactive use.
```bash
% bundle exec hanami console
```
--------------------------------
### Install vite-plugin-ruby
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-ruby/README.md
Install the plugin using npm or yarn. This is typically handled by framework-specific gems like vite_rails.
```bash
npm i vite-plugin-ruby # yarn add vite-plugin-ruby
```
--------------------------------
### Start Rails Server
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-ruby/src/dev-server-index.html
Run this command in your terminal to start the Rails server, which integrates with the Vite development server for HMR.
```bash
bin/rails s
```
--------------------------------
### Directory Structure Example
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Illustrates the typical file structure for Vite entrypoints and components within a Ruby project. It highlights the roles of `sourceCodeDir` and `entrypointsDir`.
```text
app/frontend: sourceCodeDir
├── entrypoints: entrypointsDir
│ # only Vite entry files here
│ │── application.js
│ └── typography.css
│── components:
│ └── App.vue
│── channels:
│ │── index.js
│ └── chat.js
│── stylesheets:
│ └── my_styles.css
└── images:
└── logo.svg
```
--------------------------------
### Start Vite Dev Server for Tests
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Starts an additional Vite dev server specifically for integration tests, enabling Hot Module Replacement (HMR) and avoiding rebuilds.
```bash
bin/vite dev --mode=test
```
--------------------------------
### Vite Development Server Output
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/index.md
This is the expected console output when the Vite development server starts successfully.
```text
Vite ⚡️ Ruby
```
--------------------------------
### Install vite_plugin_legacy Gem
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugin-legacy.md
Add the vite_plugin_legacy gem to your application's Gemfile to enable legacy browser support.
```ruby
gem 'vite_plugin_legacy'
```
--------------------------------
### Basic Vite Configuration
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
This snippet shows the default vite.config.ts setup when using vite-ruby. It includes importing defineConfig and RubyPlugin.
```js
import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
export default defineConfig({
plugins: [
RubyPlugin(),
],
})
```
--------------------------------
### Importing Controllers with Vite 3
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-to-vite-3.md
Example of how import.meta.glob works in Vite 3, showing the change in module key paths. This can impact usages relying on full paths, such as with stimulus-vite-helpers.
```javascript
const controllers = import.meta.glob('../**/*_controller.js', { eager: true })
```
--------------------------------
### Start Debugging Session with --inspect Flag
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/debugging.md
Use the `--inspect` flag with Vite Ruby commands to start a Node.js debugging session. This enables the use of DevTools for setting breakpoints and inspecting code execution.
```bash
vite --inspect
```
--------------------------------
### Get Vite Ruby Information
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Displays information about Vite Ruby and related libraries.
```bash
bin/vite info
```
--------------------------------
### Replace require.context with import.meta.glob
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
Replace Webpacker's 'require.context' with Vite's 'import.meta.glob' for dynamic imports. This example shows how to import Stimulus controllers.
```diff
- const context = require.context("./controllers", true, /\.js$/)
+ const controllers = import.meta.glob('./**/*_controller.js', { eager: true })
```
--------------------------------
### Using vite_stylesheet_tag Helper
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Example of how to include a stylesheet in your ERB view templates using the `vite_stylesheet_tag` helper. This assumes the stylesheet is located in the entrypoints directory.
```erb
<%= vite_stylesheet_tag 'styles.scss' %> # app/frontend/entrypoints/styles.scss
```
--------------------------------
### Configure Rails Plugin with Environment Variables
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Configure the Rails plugin to manage environment variables for development. This is part of the vite-plugin-rails setup.
```typescript
plugins: [
Rails({
envVars: { RAILS_ENV: 'development' },
}),
],
```
--------------------------------
### Configure vite-plugin-ruby in vite.config.js
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-ruby/README.md
Add vite-plugin-ruby to your Vite configuration file. This example shows integration with the Vue plugin.
```javascript
// vite.config.js
import Vue from '@vitejs/plugin-vue' // Example, could be using other plugins.
import ViteRuby from 'vite-plugin-ruby'
export default {
plugins: [
Vue(),
ViteRuby(),
],
};
```
--------------------------------
### Configure Vite Ruby Source Directory
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
When Vite Ruby is installed, it checks for the existence of the 'app/javascript' directory. If found, it uses this directory in 'config/vite.json' instead of the default.
```json
{
"all": {
"sourceCodeDir": "app/javascript",
...
}
}
```
--------------------------------
### Reference Component JavaScript Tag
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/advanced.md
Example of how to reference a component's JavaScript file using the vite_javascript_tag helper, based on the configured additionalEntrypoints.
```erb
<%= vite_javascript_tag '/app/components/comment_component' %>
```
--------------------------------
### Install Vite Ruby Rake Tasks
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/deployment.md
Manually add Vite Ruby Rake tasks to your Rakefile if not using Rails.
```ruby
require 'vite_ruby'
ViteRuby.install_tasks
```
--------------------------------
### Development Output for Vite JavaScript Tag
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Example of the HTML output generated by vite_javascript_tag when the development server is running. Dependencies are loaded directly by Vite, so extra tags are omitted.
```html
```
--------------------------------
### Production Output for Vite JavaScript Tag
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Example of the HTML output generated by vite_javascript_tag in a production environment, including hashed asset URLs and preloaded modules.
```html
```
--------------------------------
### Generating Asset Paths with Vite Ruby
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/rails.md
Use `vite_asset_path` to get the URI for assets like favicons or prefetch links. This helper resolves names relative to `entrypointsDir` unless a directory is specified.
```erb
```
--------------------------------
### Reference Other Assets with vite_asset_path in Hanami
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/hanami.md
Use the vite_asset_path helper to get the URI for any asset, such as images or other CSS files, and then use it with standard HTML tags or other helpers.
```erb
```
--------------------------------
### Prepare Database for Development
Source: https://github.com/elmassimo/vite_ruby/blob/main/examples/hanami_bookshelf/README.md
Create and migrate the database for the development environment.
```bash
% bundle exec hanami db prepare
```
--------------------------------
### Prepare Database for Test Environment
Source: https://github.com/elmassimo/vite_ruby/blob/main/examples/hanami_bookshelf/README.md
Create and migrate the database specifically for the test environment.
```bash
% HANAMI_ENV=test bundle exec hanami db prepare
```
--------------------------------
### Run Test Suite
Source: https://github.com/elmassimo/vite_ruby/blob/main/CONTRIBUTING.md
Execute this command to run the complete test suite for the project.
```shell
bin/m
```
--------------------------------
### Build Production Bundle with Vite
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Creates a production-ready bundle using Vite and Rollup.
```bash
bin/vite build
```
--------------------------------
### Simulate Production Build Locally
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Passes the `--mode production` flag to simulate a production build during local development.
```bash
bin/vite dev --mode production
```
--------------------------------
### Reference application entrypoint
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
Reference the main application entrypoint located in the `entrypoints` directory.
```ruby
vite_javascript_tag 'application' # entrypoints/application.js
```
--------------------------------
### Import Aliases for Source Code Directory
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Demonstrates how to use `~/` and `@/` aliases to import modules from the `sourceCodeDir`, simplifying import paths in your JavaScript or Vue components.
```javascript
import App from '~/components/App.vue'
import '@/channels/index.js'
```
--------------------------------
### Using Aliases with import.meta.glob in Vite 3
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-to-vite-3.md
Demonstrates how to use aliases with import.meta.glob in Vite 3 to maintain explicit and robust path management, especially when full paths are needed or refactoring occurs.
```javascript
const controllers = import.meta.glob('~/controllers/**/*_controller.js', { eager: true })
```
--------------------------------
### Heroku Buildpack Configuration
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/deployment.md
Set up Heroku buildpacks for Node.js and Ruby to ensure Vite and its plugins are available during deployment.
```bash
heroku buildpacks:set heroku/ruby
heroku buildpacks:add --index 1 heroku/nodejs
```
--------------------------------
### Configure Vite Host for `::1` Localhost
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
If `localhost` defaults to `::1`, configure the `host` to explicitly use `127.0.0.1` in your Vite configuration to match Vite's default.
```json
"development": {
"host": "127.0.0.1",
"port": 3036,
```
--------------------------------
### Configure Additional Entrypoints for Components
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/advanced.md
Configure additionalEntrypoints to include component JavaScript and TypeScript files, alongside default assets.
```json
"additionalEntrypoints": [
"app/components/**/*_component.{js,ts}",
"~/{assets,fonts,icons,images}/**/*"
]
```
--------------------------------
### Configure Additional Entrypoints
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
Specify additional entrypoints that can be referenced using tag helpers without placing them inside the entrypointsDir. Globs are relative to the sourceCodeDir or root.
```ruby
vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg
```
```ruby
vite_asset_path '/app/components/header.js' # leading slash is required
```
--------------------------------
### Add Vite Ruby Gem to Gemfile
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/index.md
Add the vite_rails gem to your application's Gemfile for Rails integration. Ensure you run 'bundle install' afterwards.
```ruby
gem 'vite_rails'
```
--------------------------------
### Precompile Assets for CI
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Runs `vite build` as part of the asset precompilation process for CI environments, ensuring assets are available before tests run.
```bash
bin/rake assets:precompile
```
--------------------------------
### Configure WindiCSS Plugin
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Integrates Windi CSS for faster development. Configure the root directory and scan paths for template files.
```typescript
plugins: [
WindiCSS({
root: __dirname,
scan: {
fileExtensions: ['erb', 'haml', 'html', 'vue', 'js', 'ts', 'jsx', 'tsx'],
dirs: ['app/views', 'app/frontend'], // or app/javascript, or app/packs
},
}),
```
--------------------------------
### Run Tests
Source: https://github.com/elmassimo/vite_ruby/blob/main/examples/hanami_bookshelf/README.md
Execute all project tests using Rake.
```bash
% bundle exec rake
```
--------------------------------
### Enabling Empty Output Directory for Builds
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
This Vite configuration explicitly enables the emptyOutDir option for build processes. This ensures the output directory is cleared before each build.
```js
export default defineConfig({
build: { emptyOutDir: true },
})
```
--------------------------------
### Padrino JavaScript Tag with Smart Output
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Render the main application JavaScript entrypoint using vite_javascript_tag. This helper automatically injects tags for imported styles or other entries.
```haml
= vite_javascript_tag 'application'
```
--------------------------------
### Disable Additional Entrypoints
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/advanced.md
Configure additionalEntrypoints as an empty array to opt out of bundling default additional files.
```json
"additionalEntrypoints": []
```
--------------------------------
### Open Gem Locally with Bundler
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/debugging.md
Use the `bundle open` command to open a specific gem in your configured text editor. This is useful for inspecting or modifying the gem's code directly from your project.
```ruby
gem 'vite_ruby', path: '../vite_ruby' # Assuming the same parent directory
```
--------------------------------
### Reference asset using vite_asset_path
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
Use `vite_asset_path` to reference assets located in the default additional entrypoint directories.
```ruby
vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg
```
--------------------------------
### Heroku Asset Precompilation Configuration
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/deployment.md
Configure Heroku to include dev dependencies during asset precompilation to ensure Vite and vite-plugin-ruby are available.
```bash
heroku config:set NPM_CONFIG_INCLUDE='dev' YARN_PRODUCTION=false
# or NPM_CONFIG_PRODUCTION=false in versions of npm < 7
```
--------------------------------
### Reference nested application entrypoint
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
Reference a nested application entrypoint with its explicit path.
```ruby
✅ vite_javascript_tag 'entrypoints/nested/application'
```
--------------------------------
### Reference asset in additional entrypoints directory
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
Reference assets placed in the additional entrypoints directories, such as `app/frontend/images/logo.svg`.
```ruby
✅ vite_asset_path 'images/logo.svg'
```
--------------------------------
### Importing Styles from JavaScript
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Shows how to import CSS files directly from your JavaScript entrypoints. Vite will automatically inject the CSS into the page when the script is loaded.
```javascript
import '~/styles/theme.css'
```
--------------------------------
### Padrino View with Vite Asset Tags
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Include Vite client, stylesheets, and TypeScript entrypoints in your Padrino view's head section. Ensure the Vite client is loaded to enable HMR.
```haml
%head
%title Example
= vite_client_tag
= vite_stylesheet_tag 'styles'
= vite_typescript_tag 'application'
```
--------------------------------
### Configure Vite Alias for Assets
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
Define an import alias for the app/assets directory to reference assets during migration. This requires the `path` module.
```javascript
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
'@assets': resolve(__dirname, 'app/assets'),
},
},
})
```
--------------------------------
### Register Stimulus Controllers with vite-plugin-stimulus-helpers
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Use vite-plugin-stimulus-helpers and import.meta.glob to easily register all Stimulus controllers in your application.
```typescript
const controllers = import.meta.glob('./**/*_controller.js', { eager: true })
registerControllers(application, controllers)
```
--------------------------------
### Vite 3 import.meta.glob Path Transformation
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-to-vite-3.md
Illustrates the transformation of import.meta.glob keys in Vite 3 compared to previous versions. The keys change from full paths to paths relative to the current module.
```javascript
const controllers = {
'../controllers/home_controller.js': () => {}
}
const controllers = {
'./home_controller.js': () => {}
}
```
--------------------------------
### Vite Asset Path Resolution Logic
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Demonstrates how vite_asset_path resolves asset names based on whether they are in the entrypoints directory or a subdirectory. This helps in understanding asset linking.
```ruby
vite_asset_path 'logo.svg' # app/frontend/entrypoints/logo.svg
vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg
```
--------------------------------
### Configure environment variables
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-rails/README.md
Set environment variables for client code with defaults or required values.
```typescript
ViteRails({
envVars: {
API_KEY: null,
OPTIONAL_KEY: '',
},
}),
```
--------------------------------
### Replace Webpacker Tag Helpers with Vite Ruby Equivalents
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
Replace Webpacker's stylesheet and javascript tag helpers with Vite Ruby's corresponding functions. Also, update asset path helpers.
```diff
+ <%= vite_client_tag %>
- <%= javascript_pack_tag 'application' %>
+ <%= vite_javascript_tag 'application' %>
- <%= stylesheet_pack_tag 'mobile' %>
+ <%= vite_stylesheet_tag 'mobile' %>
-
+
```
--------------------------------
### Configure Full Reload Plugin for Rails Views
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Set up the FullReload plugin to automatically reload the page when server-rendered layouts and templates change. Specify files to watch and an optional delay.
```typescript
plugins: [
FullReload(['config/routes.rb', 'app/views/**/*'], { delay: 200 })
```
--------------------------------
### Setting Runtime Environment Variables
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
This Ruby code demonstrates how to set runtime environment variables within config/vite.rb for use in the Vite configuration.
```ruby
# config/vite.rb
ViteRuby.env['ADMINISTRATOR_ASSETS_PATH'] =
"#{ Gem.loaded_specs['administrator'].full_gem_path }/app/frontend"
```
--------------------------------
### Proxy Vite Assets with Caddy
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
Configure Caddy to proxy Vite development assets directly to the Vite dev server. This bypasses the Rails server for improved performance.
```nginx
myapp.localhost {
handle /vite-dev/* {
reverse_proxy localhost:3036
}
reverse_proxy localhost:5400
tls internal
}
```
--------------------------------
### Explicitly Referencing Pre-processor Files
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/rails.md
When using pre-processors like JSX or SCSS, specify the file extension explicitly in the tag helper calls.
```erb
<%= vite_javascript_tag 'application.tsx' %>
<%= vite_stylesheet_tag 'theme.scss' %>
```
--------------------------------
### Add Vite Padrino to Gemfile
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite_padrino/README.md
Add the vite_padrino gem to your application's Gemfile to integrate Vite with your Padrino project.
```ruby
gem 'vite_padrino'
```
--------------------------------
### Glob Import All Component JS Files
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/advanced.md
Import all component JavaScript files using Vite's glob import feature. This bundles all found component files into a single entrypoint.
```javascript
// app/frontend/entrypoints/application.js
import.meta.glob('../../components/**/*_component.js', { eager: true })
```
--------------------------------
### Configure additional paths for full reload
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-rails/README.md
Customize the paths that trigger a full page reload.
```typescript
ViteRails({
fullReload: {
additionalPaths: ['app/serializers/**/*']
},
}),
```
--------------------------------
### Add Alias for Non-Prefixed Imports
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
If importing your own source code without an absolute path prefix (e.g., '@/' or '~'), you can either prefix all imports or define an alias for each folder under 'sourceCodeDir'.
```diff
- import MyModule from "admin/components/MyModule.vue"
+ import MyModule from "@/admin/components/MyModule.vue"
```
--------------------------------
### Generating Asset Paths in Padrino
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Use vite_asset_path to generate URIs for various assets like images and CSS files. This is useful for linking assets that are not direct entrypoints.
```haml
%img{ src: vite_asset_path('images/logo.svg') }
%link{ rel: 'prefetch', href: vite_asset_path('typography.css') }
```
--------------------------------
### Expose Environment Variables with vite-plugin-environment
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Use vite-plugin-environment to expose specific environment variables to your client code. This is useful when VITE_ prefixing or import.meta.env is not an option.
```typescript
plugins: [
Environment(['NODE_ENV', 'API_KEY', 'APP_VERSION'])
```
--------------------------------
### Clear Vite Cache and Builds
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Clears the Vite cache, temporary files, and previous builds.
```bash
bin/vite clobber
```
--------------------------------
### Link Local JavaScript Package with pnpm
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/debugging.md
Configure your `devDependencies` to use a local copy of a JavaScript package by specifying a `file:` path. This is an alternative to `yarn link` or `npm link` when using pnpm.
```json
"devDependencies": {
"vite": "file:../vite/packages/vite",
```
--------------------------------
### Explicitly reference nested entrypoints
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
When referencing nested entrypoints, the path must now be explicit, including the `entrypoints/` prefix.
```ruby
❌ vite_javascript_tag 'nested/application'
✅ vite_javascript_tag 'entrypoints/nested/application'
❌ vite_asset_path 'images/logo.svg'
✅ vite_asset_path 'entrypoints/images/logo.svg'
```
--------------------------------
### Smart Asset Injection with vite_javascript in Hanami
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/hanami.md
The vite_javascript helper automatically injects tags for styles or other JavaScript entries imported by the main script. This feature is active in production builds.
```erb
<%= vite_javascript 'application' %>
```
--------------------------------
### Link JavaScript, TypeScript, and Stylesheets in Hanami Views
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/hanami.md
Use vite_javascript, vite_typescript, and vite_stylesheet helpers to link assets managed by Vite in your Hanami ERB templates. These helpers automatically resolve asset paths.
```erb
Example
<%= favicon %>
<%= vite_client %>
<%= vite_stylesheet 'styles' %>
<%= vite_typescript 'application' %>
```
--------------------------------
### Configure Vite Aliases in vite.config.js
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
This JavaScript configuration sets up aliases for directories within 'app/javascript' and other asset folders, allowing for cleaner import paths.
```javascript
// vite.config.js
import path from 'path';
import fs from 'fs'
const sourceCodeDir = "app/javascript"
const items = fs.readdirSync(sourceCodeDir)
const directories = items.filter(item => fs.lstatSync(path.join(sourceCodeDir, item)).isDirectory())
const aliasesFromJavascriptRoot = {}
directories.forEach(directory => {
aliasesFromJavascriptRoot[directory] = path.resolve(__dirname, sourceCodeDir, directory)
})
export default defineConfig({
resolve: {
alias: {
...aliasesFromJavascriptRoot,
// can add more aliases, as "old" images or "@assets", see below
images: path.resolve(__dirname, './app/assets/images'),
},
},
```
--------------------------------
### Enable Stimulus HMR with vite-plugin-stimulus-hmr
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Integrate vite-plugin-stimulus-hmr to enable Hot Module Replacement for Stimulus controllers, allowing instant updates without page refreshes.
```typescript
plugins: [
StimulusHMR(),
```
--------------------------------
### Configure vite-plugin-rails in vite.config.ts
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-rails/README.md
Add ViteRails to your Vite configuration file.
```typescript
// vite.config.ts
import Vue from '@vitejs/plugin-vue' // Example, could be using other plugins.
import ViteRails from 'vite-plugin-rails'
export default {
plugins: [
Vue(),
ViteRails(),
],
};
```
--------------------------------
### Inject Breakpoint with tap and binding.pry
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/debugging.md
Use the `tap` method to inject a breakpoint with `binding.pry` without altering the value being processed. This is useful for inspecting intermediate values in a chain of operations.
```ruby
.tap { |val| binding.pry }
```
--------------------------------
### Add Vite Ruby Gem to Gemfile
Source: https://github.com/elmassimo/vite_ruby/blob/main/README.md
Add the vite_rails gem to your application's Gemfile. Use vite_hanami for Hanami apps or vite_ruby for generic Rack apps.
```ruby
gem 'vite_rails' # vite_hanami for Hanami apps, vite_ruby for Rack apps
```
--------------------------------
### Enable Vite Debug Output
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/debugging.md
Pass the `--debug` flag to Vite commands to increase the verbosity of its core plugins. This helps in identifying issues by providing more detailed logs during the build or development process.
```bash
vite --debug
```
--------------------------------
### Basic Vite Tag Helpers in Rails Layout
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/rails.md
Include these helpers in your Rails layout's head section to link JavaScript and CSS entrypoints managed by Vite. Ensure `vite_client_tag` is present for HMR.
```erb
Example
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= vite_client_tag %>
<%= vite_javascript_tag 'application' %>
<%= vite_stylesheet_tag 'typography', media: 'print' %>
```
--------------------------------
### Migrate JavaScript Imports with File Extensions
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
When migrating from Webpacker, ensure that all non-JS imports explicitly include their file extensions. This applies to .vue, .svelte, and .scss files.
```diff
- import TextInput from '@/components/TextInput'
+ import TextInput from '@/components/TextInput.vue'
```
--------------------------------
### Check Vite Dev Server Status
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
Verify if the Vite dev server is running by checking `ViteRuby.instance.dev_server_running?` in a console session. If it returns false, consider increasing `devServerConnectTimeout`.
```ruby
> ViteRuby.instance.dev_server_running?
```
--------------------------------
### Upgrade Vite Ruby Gems and Packages
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Updates Vite Ruby gems and npm packages to compatible versions.
```bash
bin/vite upgrade
```
--------------------------------
### Force Bundler Binstub Regeneration
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
If your `bin/bundle` is outdated, this command can regenerate it. Be aware of potential side effects on other gem binstubs.
```bash
bundle binstubs bundler --force
```
--------------------------------
### Include Legacy JavaScript and Polyfills
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugin-legacy.md
Use vite_legacy_javascript_tag to render module script tags for modern browsers and legacy nomodule script tags with polyfills for older browsers. Ensure vite_javascript_tag is still used for module tags.
```erb
Example
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= vite_client_tag %>
<%= vite_javascript_tag 'application' %>
<%= yield %>
<%= vite_legacy_javascript_tag 'application' %>
```
--------------------------------
### Capistrano Asset Manifests Configuration
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/deployment.md
Configure Capistrano to recognize Vite Ruby's manifest files for asset management.
```ruby
# config/deploy.rb
append :linked_dirs, "public/vite"
append :assets_manifests, "public/vite/.vite/manifest*.*"
```
--------------------------------
### Generate API Methods and Path Helpers with JS From Routes
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Utilize js_from_routes to generate path helpers and API methods from Rails routes, avoiding hard-coded URLs and improving API safety.
```typescript
import { videoClips } from '~/api'
const video = await videoClips.get({ id: '5' })
const path = videoClips.download.path(video) // "/video_clips/5/download"
```
--------------------------------
### Add Vite Hanami Gem
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite_hanami/README.md
Add the vite_hanami gem to your application's Gemfile to integrate Vite with your Hanami project.
```ruby
gem 'vite_hanami'
```
--------------------------------
### Configure Base Path for Nested Routing
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
Set the base path when hosting your Ruby app in a nested route. This is necessary for Vite to correctly resolve assets.
```json
"base": "/nested_path"
```
--------------------------------
### Vite Image and Picture Tag Helpers
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/rails.md
Use `vite_image_tag` for standard images and `vite_picture_tag` for advanced responsive images (Rails 7.1+).
```erb
<%= vite_image_tag 'images/logo.jpg' %>
<%= vite_picture_tag 'images/logo.avif', 'images/logo.jpg', image: {alt: 'example'}) %>
```
--------------------------------
### Reference CSS with `cssCodeSplit: false`
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
When `cssCodeSplit` is false, use the `~/` alias to reference assets in the source code directory.
```erb
<%= vite_stylesheet_tag '~/style.css' unless ViteRuby.instance.dev_server_running? %>
```
--------------------------------
### Add Vite Ruby and Vite Rails Gems
Source: https://github.com/elmassimo/vite_ruby/blob/main/CONTRIBUTING.md
Include these lines in your Gemfile to add Vite Ruby and Vite Rails from GitHub for development purposes.
```ruby
gem "vite_ruby", github: "ElMassimo/vite_ruby"
gem "vite_rails", github: "ElMassimo/vite_rails"
```
--------------------------------
### Register HMR Plugin for React
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
For React non-HTML entrypoints with `@vitejs/plugin-react`, explicitly register the HMR plugin using the `vite_react_refresh_tag` helper.
```erb
<%= vite_client_tag %>
<%= vite_react_refresh_tag %>
<%= vite_javascript_tag 'application' %>
```
--------------------------------
### Link Local JavaScript Package with Yarn
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/debugging.md
Use `yarn link` to link a local JavaScript package into your project for debugging. This allows you to make changes in the package and see them reflected in your project without publishing.
```bash
cd packages/vite # Location of the package.json for the library
yarn link
yarn link vite # Name of the library
```
--------------------------------
### Shared Vite Ruby Configuration
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
This JSON structure defines shared configuration for Vite Ruby across different environments. It includes settings like watchAdditionalPaths, autoBuild, publicOutputDir, and port.
```json
{
"all": {
"watchAdditionalPaths": []
},
"development": {
"autoBuild": true,
"publicOutputDir": "vite-dev",
"port": 3036
},
"test": {
"autoBuild": true,
"publicOutputDir": "vite-test",
"port": 3037
}
}
```
```
--------------------------------
### Prepare Database for Development
Source: https://github.com/elmassimo/vite_ruby/blob/main/examples/hanami_bookshelf/README.md
Create and migrate the database for the development environment.
```bash
% bundle exec hanami db prepare
```
--------------------------------
### Prepare Database for Test Environment
Source: https://github.com/elmassimo/vite_ruby/blob/main/examples/hanami_bookshelf/README.md
Create and migrate the database specifically for the test environment.
```bash
% HANAMI_ENV=test bundle exec hanami db prepare
```
--------------------------------
### Run Test Suite
Source: https://github.com/elmassimo/vite_ruby/blob/main/CONTRIBUTING.md
Execute this command to run the complete test suite for the project.
```shell
bin/m
```
--------------------------------
### Build Production Bundle with Vite
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Creates a production-ready bundle using Vite and Rollup.
```bash
bin/vite build
```
--------------------------------
### Simulate Production Build Locally
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Passes the `--mode production` flag to simulate a production build during local development.
```bash
bin/vite dev --mode production
```
--------------------------------
### Reference application entrypoint
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
Reference the main application entrypoint located in the `entrypoints` directory.
```ruby
vite_javascript_tag 'application' # entrypoints/application.js
```
--------------------------------
### Import Aliases for Source Code Directory
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Demonstrates how to use `~/` and `@/` aliases to import modules from the `sourceCodeDir`, simplifying import paths in your JavaScript or Vue components.
```javascript
import App from '~/components/App.vue'
import '@/channels/index.js'
```
--------------------------------
### Using Aliases with import.meta.glob in Vite 3
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-to-vite-3.md
Demonstrates how to use aliases with import.meta.glob in Vite 3 to maintain explicit and robust path management, especially when full paths are needed or refactoring occurs.
```javascript
const controllers = import.meta.glob('~/controllers/**/*_controller.js', { eager: true })
```
--------------------------------
### Heroku Buildpack Configuration
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/deployment.md
Set up Heroku buildpacks for Node.js and Ruby to ensure Vite and its plugins are available during deployment.
```bash
heroku buildpacks:set heroku/ruby
heroku buildpacks:add --index 1 heroku/nodejs
```
--------------------------------
### Configure Vite Host for `::1` Localhost
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
If `localhost` defaults to `::1`, configure the `host` to explicitly use `127.0.0.1` in your Vite configuration to match Vite's default.
```json
"development": {
"host": "127.0.0.1",
"port": 3036,
```
--------------------------------
### Configure Additional Entrypoints for Components
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/advanced.md
Configure additionalEntrypoints to include component JavaScript and TypeScript files, alongside default assets.
```json
"additionalEntrypoints": [
"app/components/**/*_component.{js,ts}",
"~/{assets,fonts,icons,images}/**/*"
]
```
--------------------------------
### Configure Additional Entrypoints
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
Specify additional entrypoints that can be referenced using tag helpers without placing them inside the entrypointsDir. Globs are relative to the sourceCodeDir or root.
```ruby
vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg
```
```ruby
vite_asset_path '/app/components/header.js' # leading slash is required
```
--------------------------------
### Add Vite Ruby Gem to Gemfile
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/index.md
Add the vite_rails gem to your application's Gemfile for Rails integration. Ensure you run 'bundle install' afterwards.
```ruby
gem 'vite_rails'
```
--------------------------------
### Precompile Assets for CI
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Runs `vite build` as part of the asset precompilation process for CI environments, ensuring assets are available before tests run.
```bash
bin/rake assets:precompile
```
--------------------------------
### Configure WindiCSS Plugin
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Integrates Windi CSS for faster development. Configure the root directory and scan paths for template files.
```typescript
plugins: [
WindiCSS({
root: __dirname,
scan: {
fileExtensions: ['erb', 'haml', 'html', 'vue', 'js', 'ts', 'jsx', 'tsx'],
dirs: ['app/views', 'app/frontend'], // or app/javascript, or app/packs
},
}),
```
--------------------------------
### Run Tests
Source: https://github.com/elmassimo/vite_ruby/blob/main/examples/hanami_bookshelf/README.md
Execute all project tests using Rake.
```bash
% bundle exec rake
```
--------------------------------
### Enabling Empty Output Directory for Builds
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
This Vite configuration explicitly enables the emptyOutDir option for build processes. This ensures the output directory is cleared before each build.
```js
export default defineConfig({
build: { emptyOutDir: true },
})
```
--------------------------------
### Padrino JavaScript Tag with Smart Output
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Render the main application JavaScript entrypoint using vite_javascript_tag. This helper automatically injects tags for imported styles or other entries.
```haml
= vite_javascript_tag 'application'
```
--------------------------------
### Disable Additional Entrypoints
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/advanced.md
Configure additionalEntrypoints as an empty array to opt out of bundling default additional files.
```json
"additionalEntrypoints": []
```
--------------------------------
### Open Gem Locally with Bundler
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/debugging.md
Use the `bundle open` command to open a specific gem in your configured text editor. This is useful for inspecting or modifying the gem's code directly from your project.
```ruby
gem 'vite_ruby', path: '../vite_ruby' # Assuming the same parent directory
```
--------------------------------
### Reference asset using vite_asset_path
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
Use `vite_asset_path` to reference assets located in the default additional entrypoint directories.
```ruby
vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg
```
--------------------------------
### Heroku Asset Precompilation Configuration
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/deployment.md
Configure Heroku to include dev dependencies during asset precompilation to ensure Vite and vite-plugin-ruby are available.
```bash
heroku config:set NPM_CONFIG_INCLUDE='dev' YARN_PRODUCTION=false
# or NPM_CONFIG_PRODUCTION=false in versions of npm < 7
```
--------------------------------
### Reference nested application entrypoint
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
Reference a nested application entrypoint with its explicit path.
```ruby
✅ vite_javascript_tag 'entrypoints/nested/application'
```
--------------------------------
### Reference asset in additional entrypoints directory
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
Reference assets placed in the additional entrypoints directories, such as `app/frontend/images/logo.svg`.
```ruby
✅ vite_asset_path 'images/logo.svg'
```
--------------------------------
### Importing Styles from JavaScript
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Shows how to import CSS files directly from your JavaScript entrypoints. Vite will automatically inject the CSS into the page when the script is loaded.
```javascript
import '~/styles/theme.css'
```
--------------------------------
### Padrino View with Vite Asset Tags
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Include Vite client, stylesheets, and TypeScript entrypoints in your Padrino view's head section. Ensure the Vite client is loaded to enable HMR.
```haml
%head
%title Example
= vite_client_tag
= vite_stylesheet_tag 'styles'
= vite_typescript_tag 'application'
```
--------------------------------
### Configure Vite Alias for Assets
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
Define an import alias for the app/assets directory to reference assets during migration. This requires the `path` module.
```javascript
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
'@assets': resolve(__dirname, 'app/assets'),
},
},
})
```
--------------------------------
### Register Stimulus Controllers with vite-plugin-stimulus-helpers
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Use vite-plugin-stimulus-helpers and import.meta.glob to easily register all Stimulus controllers in your application.
```typescript
const controllers = import.meta.glob('./**/*_controller.js', { eager: true })
registerControllers(application, controllers)
```
--------------------------------
### Vite 3 import.meta.glob Path Transformation
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-to-vite-3.md
Illustrates the transformation of import.meta.glob keys in Vite 3 compared to previous versions. The keys change from full paths to paths relative to the current module.
```javascript
const controllers = {
'../controllers/home_controller.js': () => {}
}
const controllers = {
'./home_controller.js': () => {}
}
```
--------------------------------
### Vite Asset Path Resolution Logic
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Demonstrates how vite_asset_path resolves asset names based on whether they are in the entrypoints directory or a subdirectory. This helps in understanding asset linking.
```ruby
vite_asset_path 'logo.svg' # app/frontend/entrypoints/logo.svg
vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg
```
--------------------------------
### Configure environment variables
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-rails/README.md
Set environment variables for client code with defaults or required values.
```typescript
ViteRails({
envVars: {
API_KEY: null,
OPTIONAL_KEY: ' %>){kind=logo}
+  %>){kind=logo}
```
--------------------------------
### Configure Full Reload Plugin for Rails Views
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Set up the FullReload plugin to automatically reload the page when server-rendered layouts and templates change. Specify files to watch and an optional delay.
```typescript
plugins: [
FullReload(['config/routes.rb', 'app/views/**/*'], { delay: 200 })
```
--------------------------------
### Setting Runtime Environment Variables
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/config/index.md
This Ruby code demonstrates how to set runtime environment variables within config/vite.rb for use in the Vite configuration.
```ruby
# config/vite.rb
ViteRuby.env['ADMINISTRATOR_ASSETS_PATH'] =
"#{ Gem.loaded_specs['administrator'].full_gem_path }/app/frontend"
```
--------------------------------
### Proxy Vite Assets with Caddy
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/troubleshooting.md
Configure Caddy to proxy Vite development assets directly to the Vite dev server. This bypasses the Rails server for improved performance.
```nginx
myapp.localhost {
handle /vite-dev/* {
reverse_proxy localhost:3036
}
reverse_proxy localhost:5400
tls internal
}
```
--------------------------------
### Explicitly Referencing Pre-processor Files
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/rails.md
When using pre-processors like JSX or SCSS, specify the file extension explicitly in the tag helper calls.
```erb
<%= vite_javascript_tag 'application.tsx' %>
<%= vite_stylesheet_tag 'theme.scss' %>
```
--------------------------------
### Add Vite Padrino to Gemfile
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite_padrino/README.md
Add the vite_padrino gem to your application's Gemfile to integrate Vite with your Padrino project.
```ruby
gem 'vite_padrino'
```
--------------------------------
### Glob Import All Component JS Files
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/advanced.md
Import all component JavaScript files using Vite's glob import feature. This bundles all found component files into a single entrypoint.
```javascript
// app/frontend/entrypoints/application.js
import.meta.glob('../../components/**/*_component.js', { eager: true })
```
--------------------------------
### Configure additional paths for full reload
Source: https://github.com/elmassimo/vite_ruby/blob/main/vite-plugin-rails/README.md
Customize the paths that trigger a full page reload.
```typescript
ViteRails({
fullReload: {
additionalPaths: ['app/serializers/**/*']
},
}),
```
--------------------------------
### Add Alias for Non-Prefixed Imports
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migration.md
If importing your own source code without an absolute path prefix (e.g., '@/' or '~'), you can either prefix all imports or define an alias for each folder under 'sourceCodeDir'.
```diff
- import MyModule from "admin/components/MyModule.vue"
+ import MyModule from "@/admin/components/MyModule.vue"
```
--------------------------------
### Generating Asset Paths in Padrino
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/padrino.md
Use vite_asset_path to generate URIs for various assets like images and CSS files. This is useful for linking assets that are not direct entrypoints.
```haml
%img{ src: vite_asset_path('images/logo.svg') }
%link{ rel: 'prefetch', href: vite_asset_path('typography.css') }
```
--------------------------------
### Expose Environment Variables with vite-plugin-environment
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/plugins.md
Use vite-plugin-environment to expose specific environment variables to your client code. This is useful when VITE_ prefixing or import.meta.env is not an option.
```typescript
plugins: [
Environment(['NODE_ENV', 'API_KEY', 'APP_VERSION'])
```
--------------------------------
### Clear Vite Cache and Builds
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/development.md
Clears the Vite cache, temporary files, and previous builds.
```bash
bin/vite clobber
```
--------------------------------
### Link Local JavaScript Package with pnpm
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/debugging.md
Configure your `devDependencies` to use a local copy of a JavaScript package by specifying a `file:` path. This is an alternative to `yarn link` or `npm link` when using pnpm.
```json
"devDependencies": {
"vite": "file:../vite/packages/vite",
```
--------------------------------
### Explicitly reference nested entrypoints
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/migrating-from-v2.md
When referencing nested entrypoints, the path must now be explicit, including the `entrypoints/` prefix.
```ruby
❌ vite_javascript_tag 'nested/application'
✅ vite_javascript_tag 'entrypoints/nested/application'
❌ vite_asset_path 'images/logo.svg'
✅ vite_asset_path 'entrypoints/images/logo.svg'
```
--------------------------------
### Smart Asset Injection with vite_javascript in Hanami
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/hanami.md
The vite_javascript helper automatically injects tags for styles or other JavaScript entries imported by the main script. This feature is active in production builds.
```erb
<%= vite_javascript 'application' %>
```
--------------------------------
### Link JavaScript, TypeScript, and Stylesheets in Hanami Views
Source: https://github.com/elmassimo/vite_ruby/blob/main/docs/src/guide/hanami.md
Use vite_javascript, vite_typescript, and vite_stylesheet helpers to link assets managed by Vite in your Hanami ERB templates. These helpers automatically resolve asset paths.
```erb