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

Running Multiple Strategies in Parallel Using Goroutines in Go

I recently revisited a project I had worked on some time ago, where the system was required to take multiple parameters, query data from various sources, and then return a unified response. Reflecting on that project, I became curious about how I would approach building this process today. As a result, I decided to create a simple template to run multiple strategies concurrently. A Simple Version In this example, we’ll explore how to run multiple strategies in parallel using goroutines and channels. We’ll build a simple system that processes multiple strategies concurrently and returns a unified response from all of them. package main import ( "context" "fmt" "sync" ) func main() { // Create a context with a timeout ctx := context.Background() // Create a WaitGroup to synchronize goroutines var wg sync.WaitGroup // List of strategy names strategies := []Strategy{ &strA{}, &strB{}, } // start a response channel responseCh := ...
Post a Comment
Read more

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