Deploying Crustecan Warrior

YosepRA

May 20

After finishing the anti-climactic PetTake deployment fiasco, my main agenda right now is deploying yet another project, the one I've been working recently Crustecan Warrior. This project uses a rather similar deployment strategy as PetTake, but it's more organized here in Crustecan Warrior as I have two separate repositories for both server and UI. Therefore, I can manage this two repos since they are quite literally a different app, compared to the monolithic PetTake.

I'm deploying the Node.js server to Heroku and React to Netlify. I don't use GitHub Pages for Crustecan Warrior because I believe Netlify supports client-side routing and encourage JAMStack in general. And it also has quite a generous free plan, so that's a big win. I may switch PetTake UI to Netlify later since the client-side routing isn't quite working properly. Netlify also supports simple deployment pipeline on a selected branch push event. Therefore, I don't need to configure a pipeline as Netlify will handle the build step and serving the resulting static assets. I've known Netlify's strength since a long while, but now that I have built my simple deployment pipeline that I come to appreciate Netlify and many other hosting platform.

The deployment process for Crustecan Warrior went quite smoothly. Since it has a similar cross-site deployment strategy as PetTake, all of the cross-site configuration has been taken care of by copying and pasting from PetTake. I wrote a pipeline for Node.js server using GitHub Actions and then I simply connect Netlify to my GitHub account to grab Crustecan Warrior UI repository, configure its build, and click "save". The process of deploying in Netlify is as pleasant as ever, and I got my app up and running in no time. As I opened the generated Netlify URL… All I can see is a blank white page. As per tradition, I'm having a problem with deploying my app to production.

Upon further investigation, apparently, I have forgotten to implement the "empty data render" on Crustecan Warrior UI. Well basically, the UI can't handle it when the database is still empty. Well, isn't this a surprise? Haha, how silly of me to start a development process with a filled out database? Jokes aside, yes, this happened because I started Crustecan Warrior by building its API. Therefore, I have the database filled with fake data when I started with React. Completely unassuming of a situation where I may start with an empty database, just like how I'm faring right now with a fresh MongoDB Atlas instance.

This is just a laughable silly mistake. I can just play it off for this is an obvious result of my inexperienced self. Hmm… So this is where the "error-first" engineering thrives. It's an approach of building from the possible errors first. In my case, I could've built the app to handle basic errors such as empty database state or an error in data fetch before building the feature based on a normal working situation where everything is in the green. This is also the approach in Test-Driven Development. We start with creating a failing test case, then we work upward to fix it to make it pass the test, and finally adding the piece of code to wherever we need it to be. It's a reversed approach to the normal one, but I always saw its strength.

Okay then, I guess I will work on fixing the simple empty data rendering problem for the time being. It shouldn't take too much time as I still want to update my personal website's layout too. Thank you for reading my journal and have a nice day.

Comment