Svelte + Rails

This is a template of an app with a setup that allows Svelte components to be used in combination with ERB templates to render views.

This also includes:

• Hot module replacement for .svelte files
• Hot reloading for changes to routes.rb and Rails view files. See vite.config.ts for details.
• A Rails helper to allow for easy addition of .svelte components into .html.erb templates using <svelte-*> syntax. See app/frontend/svelte/index.ts for details.
• TailwindCSS for styling

Dev

You will find Svelte components in app/frontend/svelte/. To add them to a Rails view (.html.erb file), see details in app/frontend/svelte/index.ts.

Example:

See app/views/home/index.html.erb:

<svelte-home data-props="<%= @data.to_json %>"></svelte-home>

Setup

bundle install
yarn

Run app:

bundle exec rails s
bin/vite dev