No NPM Required with Rails 7+ Importmap

Simplifying JavaScript with Rails 7+ Importmaps

Managing JavaScript dependencies in Rails has traditionally involved setting up Node.js and npm (or yarn). However, Rails 7+ introduced importmaps, a new way to manage JavaScript libraries that skips Node.js altogether. This approach can make your Rails project faster and easier to set up, especially if your JavaScript needs are moderate. Let’s explore how importmaps work, why they’re beneficial, and how to use them with a simple example of adding the local-time library.

What Are Importmaps?

Importmaps let you specify JavaScript dependencies and load them directly from Content Delivery Networks (CDNs) instead of installing them with npm and storing them locally. This is a shift from the traditional approach where JavaScript libraries are downloaded and managed in a node_modules folder, then bundled together with tools like Webpack or esbuild. By using importmaps, Rails fetches these JavaScript modules directly from the web as needed.

In short, importmaps simplify JavaScript management by:

• Eliminating Node.js and npm: You no longer need to install Node.js to use JavaScript libraries.
• Loading modules from CDNs: JavaScript libraries are fetched from CDNs, meaning fewer files are stored in your app.
• Reducing configuration: Skipping npm and Webpack/esbuild also means skipping configurations for bundling JavaScript files.

Setting Up Importmaps in Rails

Rails includes importmap support by default in Rails 7+, making it very simple to set up. You can find your importmap file in config/importmap.rb. This file allows you to specify which libraries your application will use.

Here’s what the default config/importmap.rb might look like:

pin "application" # Pins your main application JavaScript file
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true

This configuration pins Turbo and Stimulus directly from a CDN, enabling Rails’ Hotwire features without needing to install them via npm.

Adding a New Library: Local-Time Example

Suppose we want to add the local-time library, which helps format times based on the user’s timezone, all without relying on Node.js.

1. Add the Local-Time Library:
   Open config/importmap.rb and add:

pin "local-time", to: "https://ga.jspm.io/npm:local-time@2.1.0/index.js"

Here, we specify the URL to the exact version of local-time hosted on a CDN. You can change the URL to another CDN or version if needed.

2. Use the Library in Your JavaScript:
Now, open app/javascript/application.js and import local-time:

import "local-time"
LocalTime.start() // Start local-time to auto-update dates on the page

This code will load local-time directly from the CDN and start it in your application.

3. Update the HTML:
In your views, you can use local-time to automatically format dates. For example:

<time class="local-time" datetime="2024–10–27T12:00:00Z">Oct 27, 2024</time>

With these simple steps, you have integrated `local-time` without touching Node or npm.

Advantages of Using Importmaps in Rails

Here’s a summary of why importmaps can be advantageous for your Rails project:

1. No Node.js or npm Required: Say goodbye to setting up Node.js, npm, or yarn. Importmaps allow you to keep your JavaScript dependencies lightweight and server-driven.

2. Faster Setup: Without Node.js, your Rails project becomes simpler to configure and deploy, especially useful for smaller or backend-heavy applications.

3. Less Configuration: Importmaps remove the need for bundling configurations (like Webpack or esbuild). You simply specify the libraries, and Rails does the rest.

4. Smaller Project Footprint: By not storing node_modules, your project has fewer files and uses less storage. Libraries are fetched directly from CDNs, and updates are as simple as changing the URL in importmap.rb.

5. Improved Load Times: Importmaps preload dependencies, improving page load times since dependencies are loaded only when needed.

6. Quick Experimentation: Adding or removing a library is as simple as adding or deleting a line in config/importmap.rb. This flexibility makes it easy to test out different JavaScript libraries without committing to a complex setup.

When to Use Importmaps vs. Traditional Approaches

While importmaps are fantastic for Rails applications with moderate JavaScript requirements, some projects may still benefit from traditional bundling tools if they heavily rely on JavaScript, especially for single-page applications (SPAs). If your project needs extensive JavaScript handling, frameworks like React, Vue, or Angular might still benefit from npm and bundling.

However, for many Rails applications that use JavaScript sparingly, importmaps simplify the development process, making Rails projects lighter, faster, and easier to manage.

Conclusion

Importmaps in Rails 7+ offer a modern way to include JavaScript libraries without the complexity of Node.js and npm. By fetching JavaScript directly from a CDN, you can simplify your Rails setup and focus on developing features instead of managing dependencies. For those building Rails applications where JavaScript is present but not overwhelming, importmaps are a streamlined, developer-friendly solution. Give it a try by adding a simple library, like local-time, and experience the difference!