- Read Tutorial
- Watch Guide Video
This is going to be an exciting episode because right here we're going to get action cable working on our app. Now there are a few things that I want to point out and the first is when I was originally building out the curriculum testing out some of these kind of components I ran into a really nasty bug with Heroku and I'm going to show you exactly what happened. So right here if you try to type a comment (Jordan is submitting a comment on the blogs page) and hit post comment you get an error. Now my initial thought when I was performing debugging with this was that the issue was how I had action cable setup because it was one of the first production apps that I'd use with action cable and Heroku so I thought maybe I just was messing that up after quite a bit of time of debugging. I just could not figure out what the problem was so I decided to take a little break work on some different parts of the site and so then I went over and I went to the portfolio new page and I noticed something very interesting and that is when I started to press Add Technology nothing happened. I'm clicking at a bunch of times all that happens is that I get this little hash up here. So that told me that the javascript here isn't working. Then I also went to some portfolios I created as I started to add content to the site and I noticed something else are drag and drop isn't working anymore. So those are two javascript components, three if you include action cable that we're not working on the live site. That tells me that the issue was not actually with how I had action cable set up but instead it was with javascript specifically. And then I was able to really find out what was happening on the About Me page because if I come here and I click on these components (the Job History and Education buttons) these are still working. These are javascript however, they are utilizing the bootstrap javascript library. So in order to get this working I knew that that was the problem. So open up Sublime Text and as you'll see right here we have our application. js file to implement the first fix take this entire line of bootstrap sprockets.
//= require bootstrap-sprockets
cut it out and drop it right below the //= require_tree .. So this is going to load the bootstrap javascript library at the very end. So let's first push all of this code up and see if this fixes our javascript issues.
git add .
then commit it
git commit -m "Fixed JS loading bugs"
now if I push this up
git push
then I can push it to Heroku
git push heroku master
And then this should get our javascript working. Now, this is not everything we need to do in order to integrate action cable but this is going to be something that needs to happen prior to the final configuration items and we're actually very close to with what we need to do on action cable. This is just about done loading and the reason why I kept this in here and why I wanted to draw attention to it is because this is something you may run into where locally our local server is a little bit more lax.
And the reason for it is because how Rails works in production versus how it works locally. Remember all of the precompiling and those kind of things that we talked about with how Rails works in production Well that's great for performance but it also can cause some issues when you have things like this where a library is called in an order that may override other libraries and that's exactly what's happening right there. So now it looks like we have everything going. Let's switch back to our app. And now if you hit refresh then all of this should still work. So my job history and education these javascript components for bootstrap are still working. But now if I go to my portfolio items and if I click and drag them this is now working too. And it's still persistent. So this is working. Let's go to portfolios/new to verify that this is working. And now everything is good to go. So this is the first part now just so you know this is not everything. If I go to my blog and go to my test blog (to add a comment) this is still not going to work yet because we haven't configured our actual cable component. But now that javascript is fixed let's open up sublime text and go to the production.rb file at the very bottom of this file. Come down here and I'm going to just bring in the notes that I had because it's a decent amount of code and you can reference this in the source code that I have in the show notes.
config.action_cable.allowed_request_origins = ['https://devcamp-portfolio.herokuapp.com', 'http://devcamp-portfolio.herokuapp.com'] config.action_cable.url = "wss://devcamp-portfolio.herokuapp.com/cable"
So what we have here is two separate configuration items a configuration for action cable that says these are the allowed_request_origins. This is important because imagine that you have your web socket set up with action cable. You have to tell it what websites that it can actually communicate with because if you don't do this then you could definitely be hacked. You could be letting anybody sending you types of web socket request and different things like that and you could run into some really nasty hacks and people sending you data that can corrupt your system. So what this does is it whitelist the URL's that you want to use. Now the other cool thing about this is say you have other applications say you have a network of sites that you want to be able to use this system. You could add those to the list. Notice how it's an array of items. We simply are going to be using our site. And notice how I'm allowing for https and http. So when we use a custom URL then we can use both the secure or the SSL version and the regular. Now the next set is the config action cable URL this is telling the production file that we're allowing for the web socket connection of devcamp-portfolio.herokuapp.com/cable. Now note how this matches this /cable in our action cable server route (This can be found in routes.rb. That is how that gets mapped. So let's hit save. Now if I come here and hit
git status
we just changed one file.
And one other thing just before I push this up also make sure and I know we talked about this but just make sure that you have your cable.yml file set up like this where you're calling the "REDISCLOUD_URL and then you have an adapter of redis because this is how you're going to be connecting to redis.
And that is where all of the data transfer is going to take place. So we just have one change so I'm going to say
git add .
then
git commit -m "Integrated production calls for action cable"
and
git push
and then push to heroku
git push heroku master
And one thing I do want to say well this is pushing up is that if you have never used older versions of Rails with web sockets before. I cannot tell you how much easier this is than it used to be in the last few years if you wanted to use web sockets with Rails; you were in for a very very bad time. It was not a fun life to live. And the reason is because you had to set up things like middleware providers and all kinds of different components like that that just were not fun whatsoever if you Google a web socket Rail's jokes then you'll find a number of blog posts of people talking about how frustrating it used to be and that's part of the reason why Rails 5 put such a big focus on creating action cable and being able to use web sockets because that was one of the more frustrating things that developers were running into in the past. So with all of this in place let's run
heroku restart
just to make sure that we have everything loaded up. So now this is our moment of truth for action cable. If I hit refresh Lets first make sure that we dont' have any bugs or anything like that and as soon as it loads up we should be able to just type some content in and it should work. So I'm going to type something in the hit Post Comment and there you go it shows up with the Gravatar. This is all working. Now let's also test this out and have a different browser session open and oh you know it says I'm not authorized to access this page because this is not published so I'm going to temporarily mark it as published.
And let's come here just so we can see these two side by side. Now if I hit refresh you can see everything is right here. And if I click on that it shows the content. And our comment if I type in another comment everything is working. We now have live data updates on a live server that is pretty awesome. And it is shocking how much easier this is in Rails 5 compared with previous versions. So very nice if you went through all that you now have a completely functional application and you can customize it however you need. We've already been going through this with a number of students and I've been really pleasantly surprised by how gorgeous some of the designs are coming out. I'm pretty impressed by that. So now that everything is there feel free to go through update content add your own type of resume items update and start writing in your blog right here add your portfolio items I know I'm going to spend the rest of the day adding all of these items in so that this can become my new portfolio. So very nice work if you went through all of that. You now have your own professional portfolio built completely in Ruby on Rails 5.