All threads / How to use Hotwire in Rails Discussion

Ask A Question

Notifications

You’re not receiving notifications from this thread.

How to use Hotwire in Rails Discussion

Can you please provide the repository for this also?

I had a problem running the repo, I got an error: ActionView::Template::Error (The asset "importmap.json" is not present in the asset pipeline.
):
I had to create the folder "libraries" in app/assets/javascripts and then it ran fine.

Reply

I laughed too hard when you took your jab at Twitter with editing tweets.

Reply

PRO TIP: If you are having issues with Turbo frames not working, make sure you remove/comment out the following from the packs/application.js

// Rails.start()
// Turbolinks.start() <-- This will break stuff

Can we make DHH get rid of turbolinks.... nothing but problems

Reply

Just curious on what is the app would looks like when we got js disable. I got a feeling that it might still work

Reply

What is the thinking behind moving the javascript components back to the asset pipeline?

I'd also like the answer to that :)

Reply

It seems strange to me that Turbo has the same problem out of the box that Turbolinks has when it comes to validation errors. Turbo takes over your forms by default and doesn't render a HTML response unless you use a Turbo Frame (judging from this video). So a standard Rails scaffold won't work with form errors straight away?

Reply

Read somewhere: 'Rails 6 defaults to using Webpacker for Javascript instead of the asset pipeline'
Turbolinks is dead. Rails 6.1, few hours later hotwire and one can manage javascript via the asset pipeline. Turbo [something]. A Phoenix was sighted.

Wait!

So what happens when one migrates an app from 5 to 6, then realizes this is hot and loads the gem.
What conflicts could arise?

Errant tangential thought:
God forbid Jack has a remote control over Chris's fan when he invokes editing a tweet.

Reply

This works with either the asset pipeline or webpacker. The point of showcasing it in the asset pipeline and not with the use of webpacker, I think, is to underline the fact that this is supposed to be minimizing the javascript needed to be written for these features. Why use something as overwhelming as webpack if you aren't going to use it for much (rhetorical)? But it works in either case. Check out the readme: https://github.com/hotwired/turbo-rails (hotwire-rails just packages up turbo-rails and stimulus-rails together for you).

Reply
Reply

I love how clearly excited Chris is about this, trying not to crack a huge smile every other minute! There's nothing like listening to someone talk about what they're passionate about :)

Reply

prob the best xmas gift he got...

Reply

Can someone help me? I'm confused about Hotwire and some of the latest stuff that came out.

1) What is exactly Hotwire does?
2) And how can be it compared to StimulusJS, Stimulus Reflex and Actioncable?

I'm just having dificulties to understand what each of those are and how each can be used.

Thanks in advance.

Hotwire: the umbrella project for Turbo, StimulusJS, and Strada

Turbo: the sucessor to turbolinks, it provides frames and mechanisms updating them over ajax or websockets. The entire video is about Turbo's integration with rails via the turbo-rails gem.

SitmulusJS: a minimal javascript framework that's been around for a few years. It provides mechanisms to link javascript class instances to blocks of DOM, register event handlers, and keeps everything in sync via the MutationObserver API. It's a very good match for sites using Turbolinks/Turbo

Actioncable: Rails' built-in websocket implementation. Used behind the scenes by both StimulusReflex and Hotwire.

StimulusReflex: an independent project for doing HTML-over-the-wire in Rails that has been around for a few years and gained a lot of attention this year. Built with StimulusJS, ActionCable, and CableReady, it uses websockets for everything and uses fast DOM diffing to update the page. Not as tightly integrated with the standard Rails' scaffold patterns, it offers more flexibility for apps that break out of CRUD patterns.

CableReady: sister project to StimulusReflex, it provides a variety of tools for pushing updates to the client via websocket.

Reply

so when i try to broadcast the creation of an item i get actioncable error not able to connect to redis

rescue in establish_connection': Error connecting to Redis on localhost:6379 (Redis::TimeoutError) (Redis::CannotConnectError)

Are you running an installed version of redid on your development machine?

Reply

Thanks for the vid, Chris!

Didn't actually get one thing. For some reason, I can't afford broadcasting with a model callback (like it's shown in the lesson), and I therefore need to broadcast from the controller action.

I checked the docs, and here's how I made it:

...
if @tweet.save
format.turbo_stream do
render turbo_stream: turbo_stream.prepend(:tweets, partial: "tweets/tweet",
locals: { tweet: @tweet })
end
format.html { redirect_to tweets_url, notice: 'Tweet was successfully created.' }
format.json { render :show, status: :created, location: @tweet }
else
...

This approach works pretty much like the original from the lesson, but! The new tweets don't appear in another browser tab! New tweet does show up on the author's tab, but on any other tab/browser/device -- it simply doesn't.

Frankly, I didn't really spend much time digging in the docs, did I miss anything maybe?

Best.

Where is the broadcast? I don't see one in the controller. You will still need to perform a broadcast somewhere to send the new HTML down the ActionCable pipe to other browsers. Currently, you are only responding to the request using Turbo. That is not the same as broadcasting. I hope this helps.

Yeah, I REALLY don't like that in this implementation. IMO, a Model should be about validation and data management, not causing things to happen on a front-end. I feel like these types of broadcasts should always be coming from the controller. It feels icky to put that in there when we've been working on separation of concerns for so long.

I guess the benefit is that you are sure it happens on every save, and you don't forget to send a broadcast from one controller action to the next. But it still feels wrong to me.

Reply

Great video- much easier to follow than DHH's!

Reply

Well done Chris. Keep it up.

Reply

Only 2 more major changes and Rails is back to good old days: swap Webpack for Snowpack and ActionCable for AnyCable

Reply

Has anyone tried to tet a deployment of this with Heroku? I have been getting the "Precompiling assets failed." error,

The trace starts with.
Errno::ENOENT: No such file or directory @ dir_initialize - /tmp/build_00ed1b07/app/assets/javascripts/libraries

Any help before I move to stack overflow?

Same! Has anyone figured out how to deploy yet?

It's because the "libraries" folder is empty thus not committed to Git. You can add an empty .keep file to the folder to avoid the problem.

Thanks figured it out! You can also run this.

echo > app/assets/javascripts/libraries/.gitkeep
git add app/assets/javascripts/libraries
git commit -m "Adding app/assets/javascripts/libraries

Reply

do you have a /assets/javascripts/libraries folder? installed it for asset pipeline or webpack?

but it is an empty folder, what should be there?

HAHA, I got it to work. I added the libraries folder to a .gitkeep file. all good now!

Reply

How we can make it works with modals? 🤔
I mean, share feedback to the element (like close it after created tweet)

You'd have to wire it up with StimulusJS controller to close the form on submission. Or roll your own JS function for that.

Reply

Has anyones destroy action for an object stopped working? And when clicked, it redirects to the show page without destroying the object?

Try a button_to instead of a link_to (still using method: :delete)

Thanks Bryce! - I managed to get link_to working after re-adding [email protected]. Button_to also works too.

Reply

Hotwire is amazing. I tired different mini-apps to using Hotwire feature. While I know I can edit a form, could i edit an attribute (such as an email) on its own without editing/submitting the whole form?

You probably have to create a separate controller to handle the editing/updating of that attribute and then wrap that attribute in hotwired form. Or use regular CRUD controller but still wrap each field in a separate form. Or do some javascripting.

Reply

Hi guys, has anyone tried broadcasting from a model (or a background Active Job worker, in my case using Shoryuken) for a resource that is nested.

broadcast_replace_to is complaining about /project/:project_id/files/:id missing keys (e.g. project_id) for the resources show route

solved: my issue was a link_to in the partial being rendered by broadcast_replace_to
Chris spotted my issue right away, i switched the offending instance variables to locals - all working super well now.

Reply
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 41,443+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2021 GoRails, LLC. All rights reserved.