Published on 06 Jun 2020 by Dave Regg
This app is created with React and Gatsby.js, hosted on Netlify, and powered by Contentful. All three act together to create a static web application- this means that all the data is loaded to the server on deployment. It only updated when new content is pushed to the server (Netlify).
There are pros and cons to static web applications. Since the web application is served on deployment, a full stack application is impractical. This means that users will not be able to interact with the application through likes or comments, because that information will not be able to be displayed until the application is deployed to the server again. Gatsby is not a technology for a social media app, or any kind of interaction that needs updating on the fly.
For a website that needs little updating, perhaps something that gets updated as little as once a day, Gatsby is perfect. There's higher security because there isn't any user interaction with the server. The load time is minimal because the data is already deployed to the server. Not only that, but building and programming with Gatsby is easy because the community has so many boilerplates and tutorials!
Contentful is a CMS- a content management system. A CMS will provide a service to create content for your application. There are plenty of CMSs to choose from, Netlify-CMS, Contentful, and Wordpress to name a few, but Contentful is easy to integrate with Gatsby. So easy. All that is needed is a Gatsby plugin called gastby-source-contentful. By using the plugin, Gatsby can pull content from Contentful using Graphql and throw the content into prebuilt templates, programmed by you, the developer.
Contentful is essentially a NoSQL designed CMS. You can create Models for your content, and create content based on that model. An example of a model would be a Blog Post-
Title: String
Author: String
Slug: String
CreatedAt: Datetime
Body: RichText
And with those parameters, Gatsby and Graphql knows what information to pull from Contentful, and Contentful knows what information to expect in a Blog Post. The application owner can then add their own content and post it to Contentful!
It's true that Netlify comes with its own CMS, Netlify-CMS, but integration with Gatsby is a bit more involved. You need to define your own models within the Gatsby application, rather than on the webpage. You also need to create your own dashboard. It would have been nice to use only one CMS and host for this application, but all three still work together really well.
Deployment on Netlify was a piece of cake, probably because Gatsby comes with its own gatsby build script, which Netlify can read. All you need to do is connect Netlify with the Git branch you're using, and Netlify will build from there. Netlify is preferred over something like Heroky because Netlify has access to Continuous Deployment. Because Gatsby is a static web application, it only updates when the server recieves updated code. Netlify will listen to Github (or GitBucket) and will automatically update whenever the master branch of the git repository is updated!
A couple of notes though -
You need to add your Contentful API and Contentful Space as an Environment variable on Netlify under Build & Deploy
You need to connect Netlify with Contentful using Webhooks in order for Contentful to trigger Netlify's Continuous Deployment
In order to set up the Webhooks, go to Netlify's Build & Deploy Settings option. Under Webhooks, set up a new Webhook and copy the URL that is created. Then in your Contentful Space, within Settings -> Webhooks, you can connect to Netlify with that URL. Then Netlify will always be listening.
Build a static site with Gatsby and React. Create content with Contentful. Deploy with Netlify, which will constantly be listening for updates. Connect Netlify and Contentful through webhooks, so Contentful updates will also trigger redeployment.
The static site will be safer and quicker to load. The content will still actively update. And Gatsby is super fun to build with- as you'll soon learn!