Gatsby.js Migration

A local web agency approached me to review a project with their EV charging station client. The client recently built a JAMstack website, and the agency wanted me to check the codebase before they agreed to take on the website. The website was built with React using the Next.js framework and a headless CMS called Storyblok.

Discovery

I noticed multiple API requests per page during my review coming from the app. These requests were hitting the Storyblok API on the backend and frontend. Unfortunately for the client, their DevOps team had no resources to allocate to this project, limiting our solutions. So I brought up exploring alternatives that might fit better, like using a framework like Gatsby that had static site generation. The development team liked this idea since they had already adopted Gatsby on other various projects and had hosting options already in place for us to use. The client's development team liked the idea so much that they built a proof of concept and quickly demonstrated that the migration from Next to Gatsby was indeed the better choice.

Migration

Now that we had established that we needed to migrate the client's site from Next to Gatsby, there was still the question of who would do it. The client's development team did not have resources and could only assist in the hosting and deployment of the project. The agency asked me if I would be interested in migrating the site. I have done a few migrations (WordPress to Voyager on Crimewire) and was eager to dig deeper into this Storyblok CMS, so I accepted. Along with the migration, some outstanding features and minor details still needed to be addressed before launch. Overall I knew this would be a great project to test my JAMstack chops.

Launch

The client had a big announcement to publish a few days after launch, and the site had to be working perfectly. I, however, was preoccupied with getting all the final deployment procedures in place for the content editors. I had never worked with Storyblok, and I had to teach as I learned. The launch day went off without a hitch, and I worked with the client's development team to ensure all the required pieces were in place. Then came the big announcement day, and of course, the static pages over CDN worked like a charm.

Conclusion

This project reinforced that you need to pick the right tool for the job. In this client's case, they needed a framework to handle a big brand marketing website. Gatsby was the better choice because of the static site generation and that the internal team had already adopted it. In addition, I got an opportunity to see how an agency builds JAMstack sites using React and a headless CMS. And on a final note, this migration increased my love for the JAMstack and reminded me that I enjoy working with tools that match my vision of the web.