Hendrix

All development

  • web
  • front-end
  • back-end
  • devops
  • Typescript
  • cssnext
  • JSX
  • Gatsby
  • Contentful
  • React
  • GraphQL
  • serverless
  • AWS
  • freelance

https://hendrix.ai/

The Hendrix website was designed by Antonio AR. I worked with Testfire Labs (Hendrix’s creator) and Antonio as I built the site.

Requirements and tech

The client was keen to have a content management system with the ability to plug together components to make arbitrary pages. Craft CMS was on the table since the client knew it well, but their in-house developers are indifferent to PHP. Since their product is written in Node.js and React via Typescript, and since I’m enjoying statically-built sites, I suggested the use of a cloud-based CMS and a static site generator. Once I’d explained some of the advantages to this approach, the company’s development team firmly on board, and management came around soon enough too.

I decided to push for Contentful, since my recent experience with Prismic was not quite as good as I’d hoped. And since I very much enjoyed using Gatsby to build this portfolio site, I recommended using that as the static site generator.

The stack we ended up with, therefore, is Typescript, Gatsby, and, Contentful, and the site is hosted on Amazon S3 via Cloudfront. At the time of writing there is not yet any automatic build and deployment, since it looks like that responsibility will be added to Testfire’s own existing build server once time allows.

The result, as with any static site, is a super-fast website with extremely cheap hosting and zero server management. Since Gatsby provides full server-side rendering, it is fully indexable by search engines and social networks.

Gatsby

I’m looking forward to the version 2 release of Gatsby. The most serious issue with Gatsby version 1 in my opinion is that it still uses Webpack version 1. Because of this, many of the produced files, including all Javascript, do not have real content hashes in their filenames and so cannot be served with far-future cache-control headers.

Contentful

This was my first experience building a full website with Contentful. I can’t comment on Contentful’s API (since Gatsby hides that from me via its GraphQL API), but writing content types was mostly a positive experience. It’s a shame there’s no such thing as a repeating set of fields without creating a whole new content type (instances of which have their own publication status) to encapsulate them. It’s equally a shame that there’s no such thing as a reusable group of fields, or alternatively some kind of type inheritance or interface implementation between content types. However, I’m fairly happy with the content model I was able to put it together.

Gatsby with Contentful

Querying for the data I need for each page was mostly a breeze: since Gatsby gives me a GraphQL interface it’s very simple to add more fields to the query as I need them.

One feature which really impresses me is the integration with Contentful’s image API: with a very simple query I can get all the data needed to add a responsive image to the page, and with a single React component it is added and configured.

Another great feature is how Contentful’s markdown fields are consumed by Gatsby: I can query for the plain markdown text if I choose, or I can query for rendered HTML. Alternatively, I can use one of the official plugins to convert custom components in the markdown to React components I have built. I used this to allow the client to add styled buttons in arbitrary places in the body text – this is similar to something I did with Prismic via Laravel for BC Place Stadium.