DEV Community

Mark Harless
Mark Harless

Posted on

Why I'm using Heroku over GitHub Pages

I've been hard at work building an app I've been excited for a long time. Nintendo Switch owners know that sharing Friend Codes isn't the easiest thing to do. You're given a 12 digit number associated with your account. You cannot change it and you have to send it to a friend via real life because there is no messaging system. It's ridiculous!

My app, Ninny Code, is written in Python and JavaScript using Flask and React. Visitors can enter their desired username and their Friend code. They're given a URL that they can share with their friends that shows their Friend Code. This way, all they have to remember is their username to get their Friend Code second URL is given to them to edit their details since there is no user auth within the app—I guess I'll write a blog post on all these details I'm just excited!

Anyways, I decided to host my backend with Heroku and my frontend with GitHub Pages. GitHub Pages was a mistake. From an issue originally posted in 2017, BrowserRouter's behind-the-scenes magic doesn't work well with Pages.

My root page displays perfectly in my deployed app however all of my other routes don't work. So users can sign up but don't have working links to send to their friends. After a full day of troubleshooting, I'm given two choices to bypass the issue: Replace BrowserRouter with HashRouter or changing one of my lines of code.

Obviously, my choice was the latter:

- <BrowserRouter>
+ <BrowserRouter basename={process.env.PUBLIC_URL}>
Enter fullscreen mode Exit fullscreen mode

This didn't work. I wish it did but it doesn't. My only other choice is using HashRouter. But it makes my URLs so gross for the user by prepending /# before all of my routes. It's so obtrusive I didn't even want to try!

So, I guess my only other option is to deploy elsewhere. I'm thinking Heroku since that's where the backend is already being hosted. Wish my luck! And if you have a Nintendo Switch and want to give my app a try when I'm done, drop a comment!

Top comments (0)