Webpacker is dead! Upgrading to Rails 7 with Importmaps, then ESBuild for SCSS and compiled JS!

preview_player
Показать описание
Please support my work on Patreon!

Tip me in BTC! Bitcoin Address: 13FKUusPH1UPvgSkoQRRy6hEg4hyMqKzLS

0:00 Overview
1:29 Rails upgrade process and strategy
3:54 Rails gem upgrade and rake app:update
7:07 Importmap feature install
11:34 F*** importmap-rails, let's use ESBuild
13:49 Installing ESBuild (jsbundling-rails) to replace Webpacker
16:09 Return of Sprockets (asset pipeline) for SCSS!
19:33 Switching Hotwire Turbo/Stimulus from Webpacker to ESBuild

Outtro Music:
CO.AG - Escape the Apex

Useful links:
  1. Winston Codes On
  2. ruby on rails
  3. rails 7
  4. importmaps
  5. import maps
  6. esbuild
Рекомендации по теме
Webpacker is dead! 0:22:42

Webpacker is dead! Upgrading to Rails 7 with Importmaps, then ESBuild for SCSS and compiled JS!

Episode #319 - 0:01:41

Episode #319 - From Webpacker to esbuild | Preview

Webpacker with Rails 0:11:59

Webpacker with Rails 6.1 to import stylesheets, Javascript, and images!👨🏾‍💻Lets Code!

Moving away from 0:09:27

Moving away from importmaps to esbuild in Rails 7

How to include 0:15:01

How to include SCSS in your ESBuild Javascript deliverable with hot reloading (auto-watch)

Migrating from Webpacker 0:44:10

Migrating from Webpacker to Vite - AJ Esler

Upgrading a Nightmare 0:21:12

Upgrading a Nightmare - Taking an old Legacy Rails App up to Rails 6

Rails 6 for 0:06:18

Rails 6 for Beginners Part 31: Tweet Partial

Webpacker Basics for 0:44:59

Webpacker Basics for a Scalable Frontend

Introduction to Webpacker 0:06:42

Introduction to Webpacker

Upgrading a Rails 0:21:15

Upgrading a Rails 6.1 application to Rails 7 - clearbnb - Part 7

Still 100% Java 0:46:34

Still 100% Java for frontend development – A.Mahdy AbdelAziz

How to use 0:15:07

How to use ESBuild with JS Bundling in Rails

Comparing Rails 7 0:11:50

Comparing Rails 7 Import Maps, bundled JS with ESBuild, and API-only frontend setups

Upgrading Rails 3 0:18:42

Upgrading Rails 3 code for JQuery/AJAX to Rails 7 with Turbo

Ruby on Rails 0:05:39

Ruby on Rails vs. React JS

React with Rails 0:19:13

React with Rails with webpacker

Using Webpacker with 1:13:00

Using Webpacker with Rails with @CodingItWrong (Josh Justice)

React On Rails, 0:27:16

React On Rails, a Webpacker Approach - Singapore Ruby Group

A Quick and 0:04:19

A Quick and Easy Guide to the Asset Pipeline in Rails 7

Ruby on Rails 0:30:13

Ruby on Rails 7, урок #22 | Миграция с Webpacker на ESBuild и DartSass

Javascript ImportMaps - 0:15:34

Javascript ImportMaps - Bye Bye Build Tools??

RR 352: React 1:15:38

RR 352: React on Rails and Webpacker with Justin Gordon and Rob Wise

React On Rails 0:11:46

React On Rails 7 With Importmaps

Комментарии
Автор

Winston the bit about ESBuild is very helpful. Thanks for sharing.

carltanner
Автор

I think this is the best video that I've seen on this topic. Of course by now it's probably a tiny bit out of date on the specifics, but the great thing is the coverage of the issues.

jmcbri
Автор

Thank you Winston for detailed explanation, and walk-trough the process of the upgrade.

Alenko
Автор

Amazing video, very informational and thorough. Thank you for your video

NinjaBranDizzzle
Автор

Exactly what I was looking for - thanks! :)

BluRRedVsIN
Автор

Are you using this strategy for React apps? I have not seen any production apps that use React and Rails using import maps. I'm the maintainer of Shakapacker, the successor to Webpacker.

justingordon
Автор

My God did you just answer the question I have been having for a while since they introduced importmaps. You mentioned in another comment that this video is out of date now... do you have an updated one?

tonypetruzzi
Автор

Can you serve the JavaScript out of the asset pipeline by using sprockets-rails gem like you would do in older Rails? I have a couple of Rails 6 apps that I didn't use webpacker on due to a lot of custom JavaScript written by a developer before me. They run perfect and fast and I have NO issues with them at all. I just used the javascript_include_tags for the application.css and application.js files, removed the webpacker gem and it worked perfect.

I would like to upgrade a couple of these apps to Rails 7 BUT continue to use the regular old asset pipeline for both JavaScript and CSS. Is that still possible? These older apps also don't use Hotwire or Stimulus. I just don't see any advantage to converting them? Perhaps it is just me but this new version of Rails seems like kind of a mess when it comes to JavaScript. It is very confusing for a newer developer like myself.

scottmilella
Автор

Importmaps doesn't natively support react/angular integrations. Unless someone is using stimulus it doesn't make sense to use importmaps. Maybe in release 8 or 9 they might support it natively sonehow but it doesn't seem like that.

ashishgaur