Rails 7 without node.js, importmap, etc

Coming back to Rails after many years absence I want to build a small application using only Sprockets for CSS/JS processing. It’s a static website with a (self-built) minimal CMS, which will not use any JavaScript other than where it is strictly necessary (which is mostly in the CMS). I am more than happy with the functionality provided by Sprockets, Sass and ERB. The only JS framework I want to use is JQuery. I want to host every dependency myself (no CDN). How can I get rid of the unwanted components? I’m talking about importmap, node.js, etc. Happy to start fresh if that’s required! rails new --help lists the following option:

  -j, --js, [--javascript=JAVASCRIPT] # Choose JavaScript approach 
[options: importmap (default), bun, webpack, esbuild, rollup]

What if I don’t want any of those?

Perhaps the --skip-javascript switch is what I need, but what does it do?

GPT4 says:

If you’re returning to Rails and want to build an application using only Sprockets for CSS/JS processing, without modern JavaScript bundlers like Webpack or importmap, you can definitely do that. Rails still supports the asset pipeline with Sprockets for managing assets like CSS, JavaScript, and images. Here’s how you can set up your Rails application:

1. Create a New Rails Application without JavaScript Bundlers

When creating a new Rails application, you can skip JavaScript completely or choose a minimal option. If you don’t specify the -j option, Rails 7 defaults to importmap. Since you don’t want any of the listed JavaScript options, you can either skip JavaScript altogether or manually remove configurations later. To skip JavaScript, you can use:

rails new my_app --skip-javascript

This command creates a new Rails application without setting up any JavaScript bundling system.

2. Remove Unwanted Components

If your Rails application has already been created with default configurations (like importmap), you can remove or ignore these parts:

  • Importmap: Simply don’t use the config/importmap.rb file and avoid pin directives in your application.
  • Node.js Dependencies: If you’re not using any Node.js packages, you can ignore package.json and yarn.lock or delete them. Rails with Sprockets doesn’t require Node.js unless you use Webpacker or other Node-based tools.
  • Application JavaScript: Manage your JavaScript files in the app/assets/javascripts directory as you would traditionally do with Sprockets.

3. Using jQuery

To include jQuery:

  1. Download jQuery: Get the jQuery file from the jQuery website and place it in app/assets/javascripts.

  2. Include in Application.js: In your app/assets/javascripts/application.js, you can include jQuery like this:

    //= require jquery
    //= require_tree .
    

4. Using SASS/SCSS and ERB

  • Sprockets supports SASS/SCSS and ERB out of the box. You can create .scss or .sass files in app/assets/stylesheets and they will be processed by Sprockets.
  • For ERB, you can use .html.erb templates in your views as usual.

5. Hosting Dependencies Yourself

Since you want to host all dependencies yourself and avoid CDNs, make sure all required assets like stylesheets, JavaScript libraries (e.g., jQuery), fonts, and images are located in your app/assets or public directories and referenced correctly in your application.

Conclusion

By following these steps, you can set up a Rails application that relies solely on Sprockets for asset management, uses jQuery, and avoids modern JavaScript frameworks or bundlers. This approach suits applications where simplicity and full control over assets are preferred.

is the right approach. It would prevent any of the importmap/esbuild/webpack stuff being generated.

Then, more or less, you can use Sprockets as before. Some hints:

  • In your Gemfile, check that you have gem "sprockets-rails"
  • Add file /app/assets/javascripts/application.js
  • Add = javascript_include_tag 'application' to /app/views/layouts/application.html.haml

In-depth documentation is on GitHub - rails/sprockets: Rack-based asset packaging system.

Another approach might be to generate a fresh 5.2 app (this was the last release with Sprockets for JavaScript as default), and check how the JavaScript setup looks there.

1 Like

Thanks! After half a dozen false starts, this is what worked in the end:

--database=postgresql 
--skip-docker 
--skip-hotwire 
--skip-bootsnap 
--skip-javascript 
--minimal

This got rid of the cruft, but also some things I needed - though those were pretty easy to add back in. I also found the excellent dartsass-sprockets gem, which is an up-to-date implementation of Dart Sass for Sprockets: GitHub - tablecheck/dartsass-sprockets: Integrate Dart Sass with Sprockets (Ruby on Rails asset pipeline) I’m now rolling with Rails 7 and it feels great to be back! Happy days!

2 Likes

Ideally the rails generator should ask questions to walk through these options and generate just like Node based frameworks. This would be great enhancement to Rails to make it more developer friendly.

3 Likes

Yes, agree with that

Don’t forget, once you find the right switches and preferred gems for the way you want to build your Rails app you can set them in the .railsrc file so next time you won’t need all those switches and you’ll be able to just do rails new some_app.

1 Like

Why are you skipping Bootsnap? Has nothing todo with frontend assets, I would keep it for fastest app boot times. Just my2cents

Because I’m a rebel :pirate_flag: And it’s not needed; my app is very minimalistic and boots in 5 seconds (Puma, from cmdline). Rendering is ridiculously fast:

 Completed 200 OK in 49ms (Views: 40.1ms | ActiveRecord: 6.9ms | Allocations: 11315)

Plus it will all be fragment cached anyway, with automatic cache breaking on updates.

This prompted me to implement some basic fragment caching of the menu and page content. Rendering is now down to 12ms for a cached page:

Completed 200 OK in 12ms (Views: 7.1ms | ActiveRecord: 1.3ms | Allocations: 1516)

Fast enough?

Pingdom seems to think so…