Skip to main content

Working with Rails Importmap and Sprockets

When starting a new Rails project, you may find yourself juggling different asset management tools. In my recent project, Rails came pre-configured with both:


gem "sprockets-rails"
gem "importmap-rails"

I was keen to use `importmap-rails`, as it offers a modern, gem-free way to manage JavaScript dependencies. However, I was already familiar with `sprockets-rails` from previous projects, which made the mixed setup feel a bit confusing.

Since my project uses Bootstrap 5 alongside Turbo and Stimulus, it took some trial and error to get everything working smoothly—especially in production.

The Challenge: Importmap in Production

According to the Importmap documentation, JavaScript files should be served directly from the `/app/javascript` folder. This works perfectly in development. However, in production, I noticed that the JavaScript files were not being correctly referenced, leading to missing assets and broken functionality.

The solution? Precompiling the JavaScript files for production and ensuring they were properly linked.

Final Production Setup

Here’s how I configured my Rails app to use Importmap and Sprockets together effectively.

1. Precompile JavaScript in Production

To ensure that JavaScript files were precompiled and available in the public assets folder, I added the following configuration to `config/environments/production.rb`:


# config/environments/production.rb
config.assets.precompile += %w(application.css application.js controllers/*)

This ensures that my CSS, JS, and Stimulus controllers are precompiled during deployment.

2. Include JavaScript Files in the Manifest

In order for Sprockets to properly include the assets, I added my JavaScript files to the manifest:


# admin-portal/app/assets/config/manifest.js
//= link application.scss
//= link application.css
//= link application.js

//= link controllers/application.js
//= link controllers/index.js
//= link controllers/offcanvas_controller.js

The `//= link` directives ensure that the necessary JavaScript files are part of the asset pipeline and properly linked in production.

3. Add Importmap Tags in the Layout

In my main layout file, I included the necessary Importmap tags along with the stylesheet links:


# admin-portal/app/views/layouts/application.html.erb

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>

This ensures that the Importmap configuration is properly included in both development and production environments.

The Result

With this configuration, the JavaScript files were:

  • Precompiled into the `public/assets` folder during production build.
  • Correctly linked via Importmap tags.
  • Properly loaded and executed in production.

Final Thoughts

While this setup worked, I’m not entirely sure if it’s the "Rails way" of handling these components. It feels a bit clunky mixing Sprockets with Importmap, but it did the job for now. 

I’ll continue exploring this setup and follow up with any refinements or best practices I discover. If you’ve faced similar challenges, feel free to share your approach or tips!

Labels:

Comments

Post a Comment

Popular posts from this blog

Simple Go HTTP Server Template

When working on various Go projects for clients, one recurring need is setting up a basic HTTP server. Whether it’s for health checks, APIs, or serving simple content, having a lightweight server template is essential. In this post, I’ll share a simple template I use to quickly spin up an HTTP server. This template can be extended to suit any project, and I’ll walk you through the key components. The Main Package In the main.go file, we initialize and start the server. I’ve also integrated graceful shutdown capabilities using the bsm/shutdown package to ensure that the server stops cleanly when interrupted. package main import ( "fmt" "log" "net/http" "../simple-server/internal/server" "github.com/bsm/shutdown" ) func main() { // Start the server fmt.Println("Starting server...") srv, err := server.New() if err != nil { log.Fatalln("failed to start server:", err) } defer func() { err := srv.Stop(...
Post a Comment
Read more

Using Ruby on Rails and AWS SQS for Website Crawling

Recently, I returned to Ruby on Rails , one of my favourite web application frameworks. This time, I aimed to build a simple management tool for scheduling website crawls—a key component of a side project I'm working on. The tool's purpose is straightforward: Maintain a list of websites to crawl. Schedule crawls for these websites. Trigger a Golang process for the actual crawling task. To facilitate communication between the Rails app and the Golang service, I chose AWS SQS (Simple Queue Service). SQS provides a reliable way to send, receive, and manage messages between distributed systems. Adding an SQS Service in Rails In Rails, services are often used to encapsulate business logic that doesn’t belong in the standard MVC structure. For my application, I created a services/sqs_send_service.rb to handle sending messages to SQS queues. Here’s the implementation:   require "aws-sdk-sqs" class SqsSendService # Client is a class method that ...
Post a Comment
Read more