Purpose
To provide a reusable reference for myself to add Shoelace to a ViteRails project.
Setup ViteRails
I will not cover this here. Instead go check out the ViteRails documentation here: https://vite-ruby.netlify.app/guide/
And come back once youre all setup!
Install Packages
1.) Install Shoelace and rollup-plugin-copy via yarn
yarn install @shoelace-style/shoelace rollup-plugin-copy
Setup CSS entrypoint file
When using vite I usually have a file called:
app/frontend/entrypoints/application.css
This is my entrypoint CSS file.
Heres what it should look like:
/* app/frontend/entrypoints/application.css */
@import '@shoelace-style/shoelace/dist/shoelace/themes/base.css';
/* if you want to use the dark theme, uncomment this */
/* @import '@shoelace-style/shoelace/dist/shoelace/themes/dark.css'; */
Setup JS entrypoint file
In Vite, you will also have a app/frontend/entrypoints/application.js file. In this file, add the following lines:
// app/frontend/entrypoints/application.js
import './application.css'
// import shoelace components here
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js'
const mode = import.meta.env.MODE || "development"
const paths = {
production: "",
development: "-dev",
test: "-test"
}
let rootUrl = `/vite${paths[mode]}`
setBasePath(rootUrl)
Setup vite.config.ts
Finally, setup your vite.config.ts like so:
// vite.config.ts
import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import * as path from "path"
import copy from 'rollup-plugin-copy';
const mode = process.env.NODE_ENV || "development"
const paths = {
production: ``,
development: `-dev`,
test: `-test`
}
const vitePath = `public/vite${paths[mode]}/assets`
export default defineConfig({
build: {
rollupOptions: {
plugins: [
copy({
targets: [
{
src: path.resolve(__dirname, 'node_modules/@shoelace-style/shoelace/dist/assets/icons'),
dest: path.resolve(__dirname, vitePath)
}
],
// https://github.com/vitejs/vite/issues/1231
hook: 'writeBundle'
})
]
}
},
plugins: [
RubyPlugin(),
],
})
and BAM! youre good to go!
Sorry this was so brief and I don't have any examples to share, this was a quick down and dirty that I may revise in the future.
Top comments (1)
Hi, thank you for writing this. Do you have an updated version of how you would do it?
After following the guide, a few things I have to change:
Also, I couldn't get the icons to work, I think that is related to how the basePath is set. How did you do it on local development? Do you recommend installing shoelace via CDN or bundling?