This content originally appeared on DEV Community and was authored by Stefan Buhrmester
Rails 7 has been released and Webpacker is being phased out.
If you're like me and prefer to use component frameworks over DHH's new Hotwire thing, you might want to look for alternatives now. I'm happy to say that I found vite_ruby to be a more than capable replacement.
So here is a quick guide how to set up a new Rails 7 app using my favorite frameworks out there (Inertia and Svelte) and bundle it all up with Vite. You can also skip all this and download the endresult directly from here: https://github.com/buhrmi/rails7-starter
Let's go
Start off by initializing a new Rails 7 app without Javascript and asset pipeline:
rails new app --skip-javascript --skip-asset-pipeline
Once this is done, add the inertia_rails and vite_rails gems to your Gemfile:
bundle add inertia_rails
bundle add vite_rails
The vite_rails gem adds an installer to your project. Run it with
bundle exec vite install
This generates some default config file, and also your frontend directory. Find the application.js in your app/frontend directory and replace its contents with:
import axios from 'axios'
import { createInertiaApp } from '@inertiajs/inertia-svelte'
import { InertiaProgress } from '@inertiajs/progress'
document.addEventListener('DOMContentLoaded', () => {
const csrfToken = document.querySelector('meta[name=csrf-token]').content
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
InertiaProgress.init()
createInertiaApp({
id: 'app',
resolve: name => import(`../pages/${name}.svelte`),
setup({ el, App, props }) {
new App({ target: el, props })
},
})
})
Last but not least, add the node packages to your app:
npm install --save-dev axios svelte @sveltejs/vite-plugin-svelte @inertiajs/inertia @inertiajs/inertia-svelte @inertiajs/progress
Now you can place your Inertia page components into app/frontend/pages, start your rails server with rails s, and it should all work as usual.
HMR
Once this PR made its way into a released version, HMR should also work out of the box and you can start the vite dev server with ./bin/vite dev
Happy coding :)
Ps.: I'm working on a new browser-based game using exactly this approach. I'd be super happy if you'd check it out.
This content originally appeared on DEV Community and was authored by Stefan Buhrmester
Stefan Buhrmester | Sciencx (2021-12-22T11:45:08+00:00) Setting up a new Rails 7 app with Vite, Inertia, and Svelte. Retrieved from https://www.scien.cx/2021/12/22/setting-up-a-new-rails-7-app-with-vite-inertia-and-svelte/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.