Couch Potato: Converting to React
As mentioned in previous posts, we started building our chat website following different tutorials we found online that relied on pure HTML and EJS. We thought it would be fairly simple to switch things to React so we could use what we’d learned in our bootcamp and rely on React libraries, but we were very wrong!
When were first started working on the conversion, we looked at trying to get our chat window to show in a popup directly from the extension. We quickly realized that wasn’t an ideal way to load our chat website, as every time someone clicked outside of the popup, it disappeared. That combined with the fact that using React in a Chrome popup is a huge hassle led us to the decision to keep the chat website separate and figure out how to load it onto the Hulu page later.
By far the biggest issue we ran into was getting our webpack properly configured. We were so confused as to what was going wrong and spent hours troubleshooting it, eventually asking the fellow assigned as our project manager for help. She couldn’t figure it out, either, and asked some of the other fellows if they felt comfortable helping us debug the issue.
As is often the case with difficult bugs, another fellow came to help us and solved the problem in about five minutes. Turns out, we were entering our webpack from a backend file, which it should have properly been in the frontend. This makes a lot of sense in hindsight, since webpack is reading all of our frontend files and bundling them together in a bundle.js file that’s being read by our HTML file, but at the time we struggled to see the issue. Let’s just say none of us will ever make that mistake again!
Another major challenge we had to deal with was figuring out how to use socket.io in the frontend since we were no longer pulling it into the HTML file via a script tag. After some research, we found SocketIOClient and imported that into our React frontend, but it took some trial and error to figure out where to put it exactly.
We ultimately created a file specifically to set up the socket, and then imported that socket into our React components as needed. Of course, in the end, we only wound up using the socket in our Chat component, but when we started, we weren’t sure where it would be used and wanted to make sure it was accessible from all of our files. Since it works and we think it’s helpful that it can potentially be used in more components down the road, we left it as is.
Eventually we did get a functioning frontend using React and socket.io, but it was a lot more of a journey than any of us expected! It was a great learning experience, though, and our project was significantly better for it.
Once we got our frontend working with React, it opened up a lot of doors to use different React libraries and add a lot of functionality to our chat website. Stay tuned for our next post on our journey to building Couch Potato!
Interested in learning more about Couch Potato? Start this blog series from the beginning! And don’t forget to download Couch Potato from the Chrome store so you can start watching shows with friends now!
