DEV Community

loading...

Using Shoelace with Vite Rails

paramagicdev profile image Konnor Rogers ・2 min read

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'; */
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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(),
  ],
})
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide