Svelte is told to be a new kid on the block that is different from its colleagues — React and Vue.js. Key difference between the two and Svelte, is that Svelte doesn’t use virtual DOM technique to update your app when state changes. Instead, Svelte writes code that “surgically updates the DOM when the state of your app changes”. That sounds pretty assuring, but what does it really mean?
BTW, Svelte is pronounced “svelt” and it’s an adjective meaning attractively thin, stylish and graceful.
Why use it with Rails?
Rails is not the fastest framework out there, but is pretty known to be “fast enough”. Meaning it will give you a lot of traction if you’re starting out a project. Developing features in Rails is pretty fast, there are tons of resources that will help you out and the learning curve is gentle.
But also, I’d say why not? Svelte promises high performance, and Rails is fast enough. Combining the two could be interesting and a pioneering move. I’m using it in my pet project and I’m happy with both right now.
How to get started with Svelte and Rails?
Before we dive into how to get two of them working, here are some requirements that you’re supposed to have:
Ensure that you have these available in your environment and continue.
OK, now that you’ve installed everything that’s needed, we can go ahead and jump into our first step.
Generating Rails application
We will use Rails’ command to generate our app that will use Svelte.
rails new rails-6-svelte
We can go ahead and check whether everything is alright by running Rails server:
And visiting https://localhost:3000. You should see“Yay! You’re on Rails!” page. Pretty nice, let’s move on.
Installing Svelte into Rails app
Now we need to install Svelte into our fresh Rails application. An easy way to do this is to use webpacker gem which is already installed in our Gemfile. At the time this post was written, support for Svelte is not yet published, but it’s available on the gem’s GitHub repo here https://github.com/rails/webpacker.
In order to have these changes in our project right now, we need to install the gem from GitHub repo directly. To do this, you can open up your Gemfile in file editor and swap this line:
g̵e̵m̵ ̵'̵w̵e̵b̵p̵a̵c̵k̵e̵r̵'̵,̵ ̵'̵~̵>̵ ̵4̵.̵0̵'̵
gem 'webpacker', git: 'https://github.com/rails/webpacker'
bundle install, wait for the command to finish, and we’re ready for our next step.
In order to install all the needed dependencies and files to run Svelte in our Rails project, we can use webpacker’s task that will do this for us. Run
Awesome! Now our project has Svelte! Let’s actually use it.
Rendering of simple Svelte app
As you see in your console, previous command generated and modified couple of files. Some of those files are needed to properly configure and run Svelte inside our Rails app. In this post we will concentrate on 2 files:
If we go to
The above code shows a simple setup with the app component accepting a prop of name and targets a place in the HTML file, in this case, body of a page.
Notice the comment on the second line of the file. In order to have this show up in our app, we will need to include it in the main Rails layout file. Let’s go ahead and do that. Open
app/views/layouts/application.html.erb and put
<script> tag that will include all our Svelte code.
If we go ahead and load http://localhost:3000, we will still see “Yay! You’re on Rails!” page which we don’t want. In order to get our Svelte app to render, we need to create Rails controller and an action. Don’t worry, this is not hard. We will use Rails’ generate command which will help us a lot.
rails generate controller welcome index
This will generate
WelcomeController together with
index action. We will use this as our root point of our app. When a user visits our app, he will see this page. We just need to make one addition to
config/routes.rb file in our app.
root 'welcome#index' like we did on the line 4. This will tell Rails to open index action of Welcome controller when someone visits our website domain.
Now we can open http://localhost:3000 and see our Svelte app:
We have our app show up! Finally! But we’re seeing this “Welcome#index” text on our page. This got generated when we created Welcome controller. Let’s get rid of it 🔪. Go to
app/views/welcome/index.html.erb file and delete everything from it. Save it, and reload the page. You should be seeing just the Svelte part like this:
The actual Svelte code that’s responsible for this is inside
All Svelte components are saved with
.svelte extension. This is a typical implementation of a Svelte component which is divided into three blocks:
- Style section: The style section contains CSS code which is scoped to the component.
- Template section: The template section contains the markup code (and Svelte specific enhancements) which are used to generate the HTML output of the component.
And there you have it, you’ve managed to start out with Svelte and Rails 6 🎉! In the next post I’ll talk about how to create something more complex with Svelte and Rails, so click that “Follow” button.
Also, retweeting this is a great way to help spread the word with your friends:
Good luck! 🍻