Over the Christmas holidays I came across some articles about Progressive Web Apps (PWAs) and then a couple months later, l had a brand new site. I wasn’t planning on building one at the time but the articles had such an effect on me that I felt compelled to get to work. I learned that a PWA is a websites that has the same capabilities like a mobile native app with things like push notifications and device hardware access. It reminded me of an idea I had heard about making sites that weren’t sites but apps and made me wonder what that might like look on my own site. Then, one thing lead to another and I was sketching ideas for a new personal site.
From a programming perspective, I decided to go with React so I could practice my coding skills and also because I really enjoyed working with it in the past. This was one of the most ambitious coding projects that I had ever conceived for myself so I thought I’d also leverage a framework to do some of the heavy lifting for me. After doing my research, a couple promising options presented themselves and decided to move forward with React PWA — a boilerplate for creating PWAs with React. It offered a number of prepackaged features like offline support, code splitting, server side rendering, and React Router which would all let me get right to work.
First signs of trouble
At first, things were going really well and I felt like I was making great progress building out my local version but then things get really hairy when I was done and went to deploy it to my hosting provider. Since this was the first React App I had ever built from scratch, I wasn’t aware of any of the hosting requirements for it to work. At that time, I thought React was a JavaScript language and that it would work on any old web host but I very quickly found out I was wrong. Even though I had it setup to run locally, I wasn’t aware you needed Node.js server to run your application and so I had to find a host that could support that. Thankfully I found Netlify which offers some really amazing services like free hosting for personal sites, free HTTPs certificates, and my favourite, continuous deployments with GitHub.
With the host figured out, I was ready to deploy the first version of my site and start the celebrations but then I ran into another issue. Something was configured different on my local machine compared to my host — React PWA boilerplate didn’t like and so all I got were errors. I banged my head against the wall trying to figure it out until I finally gave in and hired someone on Fiverr to figure it out. The process was super simple and within a day of posting my job request, I had my issue resolved and my site running only to find out that I had another problem with how something was rendering thanks to the framework I was using. At this point, I had put in a significant amount of my free time into trying to figure out the hosting issue and so running into this took the wind right out of my sails. I decided to put things on pause for a bit and hoped that maybe something would come to me in the future.
Try and try again
A couple days passed and I was still feeling a little deflated from things not working out but was determined to move forward so I picked a new framework and tried again. I had been reading about Gatsby and thought that, that would serve my needs just fine. Having learned my lesson from before, the first thing I did was deploy a copy of Gatsby up to my hosting environment to see if it worked. With things looking good, I proceeded to take pieces of code, from my old code base, and transfer them over to my new site while continually deploying to my server. I started with the easy stuff and was excited to be making progress again but then ran into another problem when I tried to connect my WordPress blog to it. I kept getting one of those weird developer errors that didn’t make any sense and was dead in the water for a second time. I remember being disappointed and once again thought that some time away would hopefully reveal a path forward.
Third time’s a charm
After about a week, I had pretty much given up on making Gatsby work but felt compelled to get this project out the door because I was really proud of what I had created and wanted people to see it. This time I said forget the frameworks and started with a blank slate. Even though I was starting from scratch I had a working version that I had built locally with React PWA so I copied it over piece by piece and deployed it continuously to make sure everything was ok. Slow and steady, I finally got it all up and running on Netlify and connected my domain to it. I must have visited it a million times in the first week marvelling at what I had accomplished, noticing every little detail that I needed to fix, and shipped updates immediately.
Onwards and upwards
While I was busy building, and then fixing, my site I spent very little time writing. All that work really made me appreciate the WordPress theme I used before because it meant I spent zero time working on making it work and all my time writing. That being said, I have thoroughly enjoyed working on this site and continue to dabble on it as a test bed for trying new things like working with CSS Grid, animations, and service workers. I have made a bunch of updates since I launching the site but still have so much I want to do with it because my full vision has not been realized yet — little by little, I’ll get there!