When we last left off, I had finally deployed the backend of my portfolio and was working on getting the frontend to launch as well. At the time, I thought Heroku was having trouble finding the root index page, at least that’s what I was assuming because I was receiving a 404 error that simply said ‘nginx’.
After examining the logs provided by Heroku, I noticed that it was running into an error before it initialized the nginx server to begin. It was not finding the build in the default location. At first I had no idea what it meant, and the log was directing me to the Create-React-App buildpack section on customizing the JS_RUNTIME_TARGET_BUNDLE which made me think I had to set up environmental bundles.
What I eventually realized was the default target location was a build folder that contained the static directory with the necessary js files. It couldn’t be found because it was being ignored in my .gitignore file. Even though this was a default option, I commented it out of the ignore file as a last ditch effort to get my website to launch.
When the background color changed from white to forest green, and my name was proudly displayed on top of the page, it felt like I hit a homerun. My portfolio website had finally been accepted and launched on the world wide web. I can breathe a sigh of relief knowing that it wouldn’t take more than 50 deployments to get it working.
Unfortunately, my hairy face wasn’t anywhere to be found on the welcome page, just my alternate text taking up the space instead. When I clicked over to my resume page, the skills icons were missing as well. I spent some time formatting them correctly, I couldn’t settle without them. However, the images on my projects page were all accounted for so some of the images were working properly
My first instinct was that the images weren’t being correctly referenced in the resume component, which in the end turned out to be the case. The image source was directed out of its directory to the root directory where the images were being stored in a public folder. Compared to the images rendered in the projects page, the only difference was the source directly referenced to the images folder rather than being directed to the root.
Because I decided to render my projects by fetching the data from my backend, the image source couldn't be referenced from its root directory since the images didn’t exist there. The same concept had to be applied to all image sources as the browser was incorrectly being redirected to an address that didn’t exist.
After that was fixed, along with making sure the root address was redirected to the welcome page, I pushed the updates to Github and expected to see it working on my website. Except nothing changed, so I naturally doubted my code was working properly. Upon further inspection with the browser tools, I noticed the image sources weren’t changing with the updates. It seemed I needed to run the build command npm run build each time to update the static files. Doesn’t seem like the best solution, but everything was running as it should so I was happy.
It feels great to have my own personal website online for everybody to see. It's not the best looking portfolio, but it's better than nothing and I'm looking forward to giving it some facelifts. You're more than welcome to check it out! Daniel Ste. Marie
Top comments (0)