First Table Leverages Silverstripe CMS and Gatsby

Gatsby is a development framework that delivers high performing websites and apps. And if you’re willing to experiment, it’s a match made in heaven with Silverstripe CMS. Lead Developer at First Table, Gene Dower shares his experience with this web development dream team.

What is Gatsby?

Gatsby is a framework built in React and GraphQL that allows developers to build blazingly fast websites and apps. It works by server-side rendering React components during its build process and statically generating the pages of a site. Along with code splitting, lazy loading, and pre-fetching resources, Gatsby is a powerful tool for those looking to build a fast, SEO-friendly JAMstack website.

First Table screenshot

When to use Gatsby

Gatsby has been around for a couple of years now. However, since the release of version 2, the community has grown rapidly. One of Gatsby's greatest assets is number of available plugins – supporting full-text searching, image optimisation, offline mode, SEO, and source plugin integrations with CMS’ such as WordPress and Drupal (I’ll get to Silverstripe CMS shortly).

Gatsby works by transforming data sources into source nodes that can then be queried by GraphQL to fill a template or a page with data for your site. It supports various data source types including markdown (significant for a doc site or simple blog or content site), JSON, SOAP, REST, GraphQL, and they make it very simple for you to create your own.

Being a React app at its core, you have access to all the goodies in the React ecosystem including Apollo, Formik for forms, Stripe for payments, and many more. This means that Gatsby doesn’t need to be pigeonholed into being just a ‘static site’ generator.

With the use of Apollo and libraries that take advantage of WebSockets like Firebase, you can easily turn your static site into a dynamic one that fetches realtime data and complex things like user authentication and client-only routes.

You also get to enjoy the power of a modern web stack set-up for you with Webpack and hot reloading. You can easily add plugins to support your developer experience like TypeScript, SASS, or styled-components, a personal favourite. This gives you the ability to iterate faster and do better work.

Building a Gatsby site with Silverstripe CMS

With the release of Silverstripe CMS 4 and the adoption of GraphQL, Silverstripe CMS is a great candidate for a Gatsby data source. There are two open-source plugins currently available including gatsby-source-graphql and gatsby-source-silverstripe. These plugins are a great starting point for a Gatsby and Silverstripe CMS site. It’s also easy to develop your own plugin if either of these doesn’t suit your use case.

What is First Table, and how are we using Gatsby with Silverstripe CMS?

First Table originated from the problem of slow starts to evenings at restaurants. Food lovers pay $10 to book the first table of the night and get 50% off the food bill for two, three, or four people at participating restaurants. It’s been in action for five years and has got us to where we are now with over 500,000 users and 1,400 restaurants in eight countries.

First Table screenshot

The performance of our site is very important to us and has always factored into the way we build things. We were already using the static publish queue module, so our existing site naturally led us towards using a statically generated framework.

We have six websites around the world in the UK, Ireland, Canada, Australia, Indonesia, and New Zealand. Gatsby's deployment to CDN rather than a traditional web server was very attractive to us for proximity to our users and reliability.

Building in React has allowed us to share knowledge and expertise into our React native app that has significantly helped in the App’s development.

Silverstripe CMS is the missing backend for Gatsby

Silverstripe CMS, along with its GraphQL implementation, works well as the missing backend to Gatsby for any server-side handling.

One of the main building blocks of any site is the forms. Formik has been a great asset to us to allow us to interact with our Silverstripe CMS GraphQL endpoint dynamically. We use Formik and Silverstripe CMS GraphQL to build forms defined in the CMS. When submitted, Apollo sends submitted data, and it is then handled like any other form submission in Silverstripe CMS which gives us the ability to scaffold out forms from user-defined forms.

Considerations when choosing Gatsby with Silverstripe CMS

Image handling

Gatsby has great image optimisation tools that are handy for the development of a site's static images within a template. Processing Silverstripe CMS content images or dynamic gallery images (for example) can be a challenge when you don’t have access to the server to process and resize images. One solution is to use a cloud asset management service like Cloudinary. It’s also possible to process Silverstripe CMS assets that are in S3 as an asset backend through a lambda function to get around this.

Managing large sites and deployment

Using the gatsby-graphql-source or the gatsby-silverstripe-source can be great to get started for a small site. However, as your site grows in page numbers and the amount of data needed to build, querying Silverstripe CMS can pose a problem as you start to push PHP timeouts and memory limits.

You can do a per page query in the case of gatsby-source-graphql. However, this can be slow waiting for Silverstripe CMS boot times. At this point, you need to become a little inventive with accessing your build data. As mentioned earlier, Gatsby can use any source, providing options around the ability to cache the data on the server and serve build data in another manner such as JSON.

If you’re working with a statically built site, there are limitations around being confined to your last build. If you publish a page, you need to wait for this to be built along with the other pages. This means previews in Silverstripe CMS will not work.

Gatsby has announced incremental builds through Gatsby Cloud that might be well worth exploring if you have a large site and need faster build times.

Deploying and running your Gatsby site

Once you have everything built and ready to go, deploying your site is simple. Services like Netlify and AWS amplify make it easy to integrate with your git repo and to push up live. These services also offer APIs for you to generate a build from within Silverstripe CMS as well.

Gatsby Cloud incrementally builds, meaning your entire site isn’t built upon each deployment and therefore, deployment times are dramatically quicker between changes to your website.

How to get involved

While it’s still early days for Silverstripe CMS and Gatsby integrations, there is a growing body of experimental tooling to help get you started:

silverstripe-gatsby (Provides a GraphQL API for Gatsby consumption)
gatsby-starter-silverstripe (A starter package for Gatsby and Silverstripe CMS setups that provides basic tooling for building out pages and menus)

Gatsby offers loads of features and benefits. I highly recommend experimenting with setting up a simple site using one of the source plugins mentioned. These source plugins work great for generally smaller static sites like a blog, portfolio site, or any simple website if you’re willing to forego or work around the limitations mentioned above.

For larger sites, especially those that are more dynamic, there are a few more steps to consider. If you can solve these, Gatsby and Silverstripe CMS are truly a pleasure to work with!