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?

Reply

hotwire-rails repo: https://github.com/hotwired/hotwire-rails

lesson repo: ?

Reply

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
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

Reply

Thanks Michael!

Reply

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

Reply

Thanks Michael. This worked for me.

For those who might have Turbolinks.start, comment out - 'ActiveStorage.start'.

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

Yes. I still work. Me too!
solitaire

Reply

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

Reply

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

great thanks

Reply

No problem 😊

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.

Reply

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

Fantastic, Rafe! Thanks so much!

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)

Reply

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

Reply

I am facing the same error when trying to create new tweet. Don't know what to try and fix. Never heard of redis before and never used action_cable before this. What might be the problem?

Reply
Reply

Same problem here. I thought redis was installed on mac but it wasn't.

brew install redis
brew services start redis
https://gist.github.com/tomysmile/1b8a321e7c58499ef9f9441b2faa0aa8

Reply

thanks Caroline, it helps me! (reinstall redis and run "brew services start redis")

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.

Reply

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.

Reply

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?

Reply

Same! Has anyone figured out how to deploy yet?

Reply

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.

Reply

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?

Reply

Yeah.

Reply

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

Reply

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)

Reply

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
Join the discussion
Create an account Log in

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

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

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