One Shoe logo

Building our own website with Prismic.io, GatsbyJS and React

Four years ago we started working with React, Vue.js and Laravel. Nowadays we’ve done a lot of client projects with these technologies and we have become pretty much the expert in the field. So why not take a look if we can use these exciting technologies for our own agency website too?

Floris Derksen | 30 jul 2019

So, we decided to rebuild our agency website oneshoe.com. In the past thirteen years, we did this already three times, and because we are an agency that loves Drupal we somehow always chose Drupal as our tool of choice. Our last website was built on Drupal 7, so a rebuild in Drupal 8 would be a logical choice. But times are changing and new technologies pop up every day. So did React, Vue.js and Laravel, and we really enjoyed working with these technologies the last couple of years. That's why we decided to use Gatsby.js in combination with Prismic.io for building our new website.

The requirements

Every project we do at One Shoe starts with a Discovery, so also this project. During the discovery we found out that we needed typical agency requirements like a portfolio, contact page and about pages, and that the presentation of content within these pages was very important. Besides these requirements we also came up with some important non-functional requirements like:

  • We wanted the new website to be fast and secure out of the box
  • The content should be managed through a user-friendly CMS
  • A smooth development process 
  • A Design driven UX approach

With this in the back of our minds we started to explore technical solutions. One of the approaches for which we were interested was the JAMstack approach.

Building the website following the JAMstack approach

Within the front-end/javascript world there is this new approach called JAMstack. JAMstack is not a set of technologies but more a vision on a new way of building websites and apps that focus on delivering better performance, higher security, lower cost of scaling, and a better developer experience. The vision of Jamstack is based on three aspects: 

  • the technology is based on Javascript 
  • the application uses API’s to retrieve data or content 
  • the markup is prebuilt at deploy time, which means that we will serve a static generated site.

Why we chose Gatsby.js framework

Gatsby.js is one of the frameworks that implements the JAMstack philosophy. The key functionality is that it builds a static version of a website based on front-end code and data sources. We chose Gatsby.js for two main reasons: it uses React.js as a front-end language to build the website UI and GraphQL to retrieve content from datasources. And the second reason and great feature of Gatsby.js is that it also supports plugins. Gatsby.js currently has more than 760 plug-ins to expand the functionality of the framework. Examples of plugins are CMS integration, Google Analytics support or Image optimization.

CMS data source integration with Prismic.io

Amongst the plugins of Gatsby.js there are already a lot of plugins that provide integration with popular self-hosted CMS’s like Drupal, Wordpress and CraftCMS. Also, integration with headless cloud CMS’s like Contentful, Prismic.io and DatoCMS are already available. For this project we chose Prismic.io as the CMS. To retrieve data from its source -in this case Prismic.io- Gatsby.js uses the GraphQL specification. GraphQL is a query language for API’s which comes with a description of the data itself. This means that developers can make client apps retrieve the exact data they need. One of the main advantages of this approach is that when the API of a CMS or Application changes over time, adjustments within the client are easier to implement with less impact.

Our experience with developing Gatsby.js

Our main feeling is that building a website with Gatsby.js was a very nice experience. Developers can build their functionality within a very lightweight stack. This is especially the case when using a cloud CMS. The lightweight stack also made on-boarding new developers to the project team easy and painless. 

One of the main advantages of using React is that we could follow a Design Driven approach. This is because Gatsby.js stays pure at how React is used, so we had full control on how the User Experience should be created. Developers could even use open source React components to speed up development even more. The only thing is that component lifecycle events are somewhat handled differently. This is because Gatsby.js generates a static site and not a React application you would normally deploy. This has some impact on how events are handled in, for example, Google Tag Manager or Page transitions. But with the help of plugins and documentation, these differences can be solved.

Our experience with content management using Prismic.io and Gatsby.js

In our approach content management is handled by Prismic.io. A CMS like Prismic.io is pretty straight forward. We chose this CMS because of the dynamic layout with content slices. This allows content managers to construct pages that contain different page elements. This was extremely useful for a lot of pages within the website.

When we went live with the project we did not include any advanced preview functionality for content managers yet. One of the downfalls of this is that the changes content managers make in prismic.io are not published directly within the website. Instead of publishing the page itself, a webhook is triggered that will do a new Gatsby.js build on the server. This will take time. One of the drawbacks of this approach is that content managers lose their ability to easily preview their changes. But no worries, the creators of Prismic.io are working on a Gatsby.js plugin that enables previewing content before publishing. Once the plugin is ready to be used in production we will start implementing this functionality.

Hosting on Netlify

To make hosting of our new Gatsby.js website a smooth operation, we use Netlify. Netlify is a cloud-based hosting platform which embodies all kinds of handy build tools that are needed for modern web projects. Netlify is very easy to embed within a deployment workflow and really feels like a “turn-key” solution. It was just a matter of connecting our GIT repository to the accept and production environments, setting up the webhooks for triggering the build process, and we were up and running with our project.

Our conclusion?

Things that are great

+ Great performance
+ No security worries
+ GraphQL makes managing and adapting to the API a lot easier
+ The use of React ensures a design driven approach
+ Because of the lightweight stack it is easy to onboard new developers to the project team
+ Prismic.io Gatsby.js preview plugin 

Things to improve

- Build time

Want to know more?

Interested in the Gatsby.js approach and want to find out how this can help you(r business)? Give us a call or send us an email. We are here to help!