Hosting Hell

Let me tell you a story of frustration and perseverance in the world of web hosting. I’ll set the scene. An aspiring junior dev finally completes her portfolio and 1st project. With no prior experience in hosting, she dove headfirst into the process, hopped over to the 1st hosting site she can think of, connected her Github account and clicked deploy. Little did she know, this was the beginning of a two-day rollercoaster ride full of errors and terrors. 

So, I had two applications I wanted to host: my portfolio which was a React app, and an API project written in Vanilla JS. I tried using Vercel 1st, deployed my API project, got the confetti and thought, “Oh its lit, we live!”. It was not lit, and we were not live because there was no content on the deployed website. I tried to check the logs but there weren’t any. Without missing a beat I tried Heroku next, knowing that I would at least get an error message if my application failed there. I was kind of right. The error message stated that the application needed a buildpack, I  had no clue what that meant, but I clicked around until I found a buildpack section. I didn’t see a Vanilla JS option, but there was Node.js and I figured it was close enough. Yea, no, not close at all.  Of course, I got another failure because there was no package.json, which is needed for a Node.js app. So on to my next idea. 

I decided to try to host my portfolio on Heroku because it was a React app, so I figured at least I can get this win. Everything went smoothly, no error messages and I was so excited to have something to show my friends. Only problem was, my app was displaying a “Nothing to see here” screen. What do you mean?? I even sent the link to my son for him to check, and we both sat around refreshing the app for several minutes, hoping it would show. The app would appear sometimes on my laptop or phone but would revert back to “Nothing to see here” if I refreshed. I went back to my roots and checked Stackoverflow, and a few posts stated that the site should appear in a couple of hours. So with that I decided my “brain hamster” needed a break from the wheel, and I closed my laptop for the afternoon. 

The good people on that Stack Overflow post were right; my portfolio was live after a couple of hours, and I was so excited. But I still had another hurdle to conquer: my API project. When I was in my coding class, we had to host our class projects using GitHub Pages, and it was really simple. I went to try my API app on GitHub Pages, and this time, it hosted my README. A feeling of perplexity and rage washed over me as I went over to ChatGPT to demand an explanation. Mr. GPT ran off a list of reasons why the app failed, one being the index.html must be in the root of the project. GIRL, DUH! Disclaimer moment, sometimes I do too much. In this instance, when I was working on this app, I had created a folder in my API app called “Code House” because I was feeling extra that day and my code clearly needed a cozy domicile. After restructuring my folders, I was able to successfully host my API app on GitHub Pages. A win for Sammi.

Here’s where the disclaimer comes into play again. GitHub Pages was not enough for me; my project must be hosted on Heroku. Before trying again, I researched what buildpacks are needed for static pages, installed them locally, and pushed my project to ensure I was deploying my latest changes. I nearly threw my laptop out the window when the error message came back. Apparently, the static page buildpack had been deprecated, and I now had to install something called NGINX. That was my final straw and I went back to Vercel, confident it would work now because my folder structure was fixed, and it did! I was finally able to see my code on a live website and everything worked great. 

This was a hell of a learning experience. I am so proud of myself for continuing to try despite my immense frustration. I will no longer be housing my code; it can live in the root like the rest of its mates. I also need to remember to read documentation; this probably could have been resolved a lot faster if I had some context on what I was doing. I am now also a semi-novice expert on buildpacks and how to manage them; I'll be sure to add that to my special skills. While my portfolio is live, I haven’t linked it yet because I’m still hammering away on a few more projects that I want to add. I hope to be able to share it with the world in the coming weeks. Until next time ✌🏾