Learn how to migrate away from Rails Webpacker as you upgrade your Rails 6 to Rails 7. Our useful guide covers every step on how to upgrade your Rails 6 to Rails 7 smoothly.
There are two ways to do the migration process. Those are:
Migrate from webpacker to jsbundling-rails
Jsbundling-rails is a gem that helps you set up webpack, which is a module bundler that lets you specify the dependencies for your application and generates a single bundle file that you can include in your app.
Migrate from webpacker to importmaps
Which option you choose will depend on your specific needs and preferences. In this article, we will explore both options and help you decide which one is best for your application.
Migrating from Webpacker to jsbundling-rails can seem intimidating, but with this step-by-step guide, it's actually quite straightforward. Here's what you need to do:
In order to enable bundling, jsbundling-rails acts as an installer to set up webpack.
To add jsbundling-rails gem to gemfile:
(We generate a Gemfile to list the gem dependencies of Ruby applications. A gem is a grouping of Ruby scripts that may be extracted and called later as a "collection". It enables you to specify the gems and versions of those gems to use)
In the terminal, rebuild the bundle and create a baseline configuration:
Stimulus controllers alter the DOM without reloading the page completely.
To import stimulus controllers, run the install command in your terminal again to replace any conflicting modifications, even if you have already installed stimulus. This will accurately import every existing stimulus controller.
After installing stimulus, run the following command to auto-generate the controllers/index.js file.
This file is used by Stimulus to keep track of all of the controllers in your application. It's important to run this command after installing Stimulus to ensure that all of your controllers are correctly imported and registered.
Once you have imported your Stimulus controllers, you should be able to use them in your application to create dynamic, interactive features without the need for a full page refresh.
The module that webpack should use to start constructing its internal dependency structure is indicated by an entry point. Webpack will identify the additional modules and packages that are required for that entry point.
This is an important step in the migration process, as it will ensure that your application is fully freed from Webpacker and that the upgrade to Rails 7 works error-free.
1. Remove webpacker gem from your gemfile. The gemfile is a file that lists the gem dependencies of your application. To remove the webpacker gem, simply delete the line that includes it in your gemfile.
- gem 'webpacker'
2. Remove all webpack packages, plugins, config files, and start-up files. This will ensure that your application is completely free from Webpacker. Here is a list of the files and directories that you will need to delete:
GitHub Actions is a tool that allows you to automate your software development workflows.
The build step specified in your package.json file will be triggered by yarn build.
To include this build step in your workflow file, you will need to add the following code:
name: Build Esbuild
run: yarn build
This will help to prevent any issues that may occur during the testing process and ensure that your application is fully upgraded to Rails 7.
It's important to note that this process may involve some trial and error, as every application is unique and may have different dependencies or configurations.
However, by following these steps carefully and making sure to test your application thoroughly, you should be able to successfully migrate from Webpacker to jsbundling-rails and upgrade your application to Rails 7.
This is a significantly lighter solution for applications that mostly rely on external scripts.
Delete the webpacker gem from your gemfile and add the importmap-rails gem.
Use the below command to run the importmap installer.
This will create the following new files.
config/importmap.rb: Contains URLs to the libraries you use in your app such as jQuery, Turbo.
Remove the old pack file and move the custom code into the new file.
Importmaps might not be for everyone, but there is a workaround. For more insight, watch the following video from Winston Codes On.
In this step, we will be migrating dependencies from package.json to importmap.rb. With importmaps, dependencies are now automatically downloaded by the browser and are managed using a file called "importmap.rb" instead of being listed in package.json.
Run the following command to add dependencies to importmap.
./bin/importmap pin jquery
This will automatically add the CDN-URL of jQuery into importmap.
Next, delete the package.json and the node_modules folder.
This can help to improve the performance of your website and make it feel more responsive. However, Turbo is an alternative to Turbolinks that is designed to be even faster and more efficient.
Delete the turbolinks gem from your gemfile and replace it with turbo-rails.
It does this by altering the Document Object Model (DOM) in the browser, which is the structure of the web page that represents the content and layout of the page.
Add stimulus-rails to the gemfile.
Upgrading a Rails application requires careful planning and execution, as different versions of Rails may have different setup defaults and may deprecate certain features.
In order to upgrade an existing application to Rails 7, you'll need to have Ruby 2.7.0 or newer installed.
Here are the steps to consider when upgrading a Rails application to version 7:
To identify the current version of your application, you can use the below command.
To update the Rails gem to the latest version, add the following line to your Gemfile:
gem 'rails', '7.0.0'
Run the following command in the terminal to replace the current version.
This will start an interactive session where it will create new files and update existing ones to make your application compatible with the newer version of Rails.
During this process, you will be asked to review and confirm the changes that will be made to your application. It's important to carefully review these changes, as they may affect the functionality of your application.
Once the update process is complete, you should test your application to ensure that it is still functioning as expected. If you encounter any issues, you may need to make additional changes to your application to resolve them.
It’s possible that the new Rails version will have different setup defaults than the old version. Rails creates a new_framework_defaults_7.0.rb file to help you to upgrade the new default settings one-by-one.
You can go through this file and update your application's configuration accordingly. Once you have made all the necessary changes, you can delete this file and flip the config_load_defaults value to activate the new configuration defaults.
- Activate the new configuration defaults by uncommenting these settings in the file.
Sprockets is basically a Ruby library. This is used to create and deliver web assets. It has a sophisticated preprocessing pipeline that enables you to create assets in scripting languages including Sass and SCSS.
This is an optional dependency, but it can be useful for creating and managing assets in your application.
Add Sprockets to the gemfile to enable its features.
Once you have added this line, you can run bundle install to install the Sprockets gem and all of its dependencies. With Sprockets installed, you can then use its features to manage and create assets in your application.
Ruby 7 has depreciated some features from Ruby 6., so you need to verify and identify any depreciated methods in your application.
This is important because using depreciated methods can potentially break your application or cause it to function improperly.
To do this, you can use the Rails Upgrade Guide, which lists all of the depreciated methods and provides guidance on how to update your code to use the newer, supported methods.
You can also use a tool like the Ruby Deprecated Finder to automatically scan your codebase and identify any depreciated methods that you might have missed.
There are numerous advantages you will have when using the latest version of Rails.
The most recent versions' new tools and resources will be utilized by your development team and the application will be faster, more optimized, and more secure for the end users.
In the 2000s, Ruby on Rails first became popular. Since then, it has had a significant impact on web app development.
This is primarily due to its novel features, which include migration, scaffolding for views, and the seamless construction of database tables.
These capabilities have facilitated the development of applications more quickly. Learning Ruby on Rails is beneficial for a variety of reasons.
At Learn Enough, we provide a carefully designed course to take you from a beginner to a professional-grade developer.
If you manage a team of developers, Learn Enough for Teams boosts the skills of your junior devs and gets your senior devs quickly up to speed with the latest version of Ruby on Rails.
Get free access to all 10 Learn Enough courses (including the Ruby on Rails Tutorial) for 7 days!
We require a credit card for security purposes, but it will not be charged during the trial period. After 7 days, you will be enrolled automatically in the monthly All Access subscription.
BUT you can cancel any time and still get the rest of the 7 days for free!
All Learn Enough tutorials come with a 60-day 100% money-back guarantee.