loading...
Cover image for Fixing "DEV.to Header & Footer Appearing on New Rails App"

Fixing "DEV.to Header & Footer Appearing on New Rails App"

markmead profile image Mark Updated on ・2 min read

A few weeks ago, I worked on a pull request for Forem/DEV.to. Everything went great, and it ended up getting merged! πŸŽ‰

The next day, I went to work on a different Ruby on Rails app, the framework that powers DEV.to, only to find my localhost:3000 was DEV.to-ified.

Screenshot 2020-09-12 at 11.06.11

Since Forem uses Redis, an in-memory key-value data store that's commonly used for caching, I thought the view was still being cached. You might think (and so did I) that running redis-cli flushall would do the trick, but nope.

Note: This is a VERY dangerous command if accidentally run in production! Honeybadger has an excellent blog post on the implications of running this command if you want to learn more.

I really wanted to avoid clearing my Chrome cache, so I switched the Rails server port to 4000 and opened localhost:4000, and everything was fine.

giphy

It's worth noting that a hard refresh, or running Chrome in incognito mode, would briefly solve the issue, but eventually, the Forem views came back.

I finally reached out to Andrew Mason on Twitter who suggested the following:

  • retry redis-cli flushall
  • rails webpacker:clobber
  • clearing local storage, session storage, and cookies in dev tools
  • rake tmp:cache:clear
  • going into the Rails console and running Rails.cache.clear
  • and finally restarting my computer

It didn't work 🀯


So what's the solution?

It turns out DEV.to uses a custom serviceworker, versus using something like Google's Workbox, to handle some caching, you can see it in your browser dev tools.

Screenshot 2020-09-12 at 11.19.15

If you run into this on your localhost, or the app won't load the page all the way in production, you can fix this by going to the above page in dev tools and click "unregister" on the service worker.

Your Rails app will be 100% less DEV.to-ified, and if it's in production, the page should load immediately.

Let's fix this

I've opened an issue on the Forem GitHub repo where we can discuss possible solutions.

DEV.to header and footer displaying on Rails app with the same port #10293

Describe the bug

After working on Forem locally and then switching to a new Rails app on the same port, the DEV.to header and footer still show.

To Reproduce

  1. Start Forem up
  2. Close the server
  3. Open a Rails app on the same server

Expected behavior

Not maintain cache

Screenshots

Screenshot 2020-09-12 at 11 06 11

Desktop (please complete the following information):

  • OS, version: Catalina, 10.15.6
  • Browser, version: Chrome, 85

Additional context

  • This doesn't happen on Safari
  • Probably isn't limited to Rails apps on the same port

Big thank you to Andrew for helping me with this blog post, and with figuring out how to fix this issue.

Posted on by:

markmead profile

Mark

@markmead

Finding solutions with Vue, Shopify & Ruby on Rails.

Discussion

pic
Editor guide
 

Happy to help whenever I can! Definitely an interesting one for sure since this is the first time I have seen custom service workers in rails but glad we figured it out pretty quickly. That’s the beauty of pairing! 😁