Will Little Subscribe

How to upgrade Ruby on Rails using Visual Studio Code's source control interface

This post is designed for those following along this series, which is teaching people how to develop web and mobile applications with skills for business, product design, and collaboration.

Rails has a fantastic guide (here) for upgrading versions, so in this post we are going to walk through it using Visual Studio Code, our code editor of choice in this series.

Specifically, we’re going to use an example of upgrading from Rails 6.0 to Rails 6.1, which had a large number of feature updates. When upgrading Rails, it’s generally a good idea to update gems and Javascript libraries at the same time, so we’ll discuss examples of doing that as well.  

Upgrading to the latest Rails version

To begin, we’re going to follow the Upgrading Ruby on Rails guide. As of this writing, Rails 6.1 is the latest, but you should check here if there are any newer versions and go with that. With VSC, we’ll first open up our Gemfile in the root of our quotesapp folder and make line 7 (or whichever line has your rails gem declaration) read:

gem 'rails', '~> 6.1'

Then in our terminal, at the quotesapp folder root like before, we’ll:

  • gem install rails

….to get the latest Rails version, and then we’ll:

  • bundle update

...to upgrade to the latest version of the gems needed for our application.

Finally, we’ll:

  • rails app:update

And we’ll go ahead and overwrite all the files it says to (i.e. press “y” for each prompted file).

You may also see a note to upgrade something on the JavaScript side of things.  For us in this example, I got a note to upgrade to stimulus_reflex@3.4.0, so we’ll go ahead and:

  • yarn upgrade stimulus_reflex@3.4.0

...to get that upgraded. And then we’ll go ahead and do a general:

  • yarn upgrade

Now, in VSC, go to the diff editor menu tab (for those in my exact scenario, you’ll see 25 files that have been changed/added) and you are going to want to copy and paste the left part of two files into the right part. Those two files are cable.yml and routes.rb. (As you have a more built-out app, you’ll need to merge back in a lot more content from various files most likely). You’ll want to click on those files in the diff editor and then make the right window look the same as the left window. For example:  

When you save these files, they will disappear from your source code diff tab since you are bringing them back to a state of being unmodified.

Since part of the upgrade from Rails 6.0 to 6.1 requires an upgrade to the way images work, we also need to:

  • rails db:migrate

From here, fire up your Rails server (“rails s”) and double check that everything is working correctly at http://localhost:3000 

Assuming all your functionality looks correct, double check your changes (via VSC or git status and git diff) - which should look like this commit diff if you are following along this series real-time) and then:

  • git add .
  • git commit -a -m "upgrade to Rails 6.1 and update gems and js packages"
  • git push

And that’s it! Next, let’s go ahead and work on our Hello World tutorial with Hotwire using Turbo.