How we used React, Gatsby, and Prismic to create a high-end and well-polished website

Hello pirate 👋

This is your captain speaking, we'll be going on a wild adventure, so rope up and fasten your eye-patch!

We'll be sailing past the Gatsby manor where we'll explain the different improvements we've encountered, the Prismic bays where creating and maintaining our blog was a breath of fresh air! And to end our tour we'll use the winds of the north to pass by the beautiful Azure DevOps mountains and their different pipelines.

The framework of our ship

At Nightborn, as in any company, we had to decide which framework we wanted to use for our own website. A framework provides us with the certainty that we are developing an application that is in full compliance with the business rules, structured, and that is both maintainable and upgradable. It allows developers to save time by re-using generic modules in order to focus on other areas.

Planning to work with HTML, CSS, and Javascript (JS) we started with the most obvious ones and looked at pure vanilla, Vue.js, and React.

• We really like using JSX with React. JSX stands for JavaScript XML and allows us to write and add HTML.
• Using Vue we really like the simplicity, it allows structural flexibility and makes reuse of components easy in your application. This feature makes it suitable for building big and highly scalable web applications.
• Vanilla on the other hand was often good to start a website but losing it when the website got more complicated.
  

Why Gatsby and what we learned

A problem we were facing with React, as it's client-rendered, is that it's not really SEO-compliant. And as you can imagine as a service-agency this isn't really a positive thing. That's why we initially started looking for a server-side rendering framework and stumbled upon Next.js and all its great features. Despite all these features, we did not choose Next.js but instead chose Gatsby.

What we like about Gatsby :

• Asset management: You may want to deploy assets (non-HTML resources such as JavaScript, CSS, etc.) to a separate domain. With this functionality, you can use Gatsby with assets hosted from a separate domain.
• SEO components, metadata: Using Gatsby makes your site fast (SUPER DUBER FAST 🚀) and efficient for search engine crawlers to crawl your site and index your pages. Adding metadata to pages, such as page title or meta description helps search engines understand your content and when to show your pages in search results.
• GraphQL data management: Gatsby uses GraphQL to enable components to declare the data they need. GraphQL only returns the data that's explicitly requested, so new capabilities can be added via new types and new fields on those types without creating a breaking change.
• Plugins created for Gatsby.
• Page management: Gatsby makes it easy to programmatically control your pages. Its core automatically turns React components into pages with URLs. It’s common to wrap pages with a React layout component, which makes it possible to share markup, styles, and functionality across multiple pages.
• Static website generation can be hosted anywhere: A static website is made of static files that can be easily served all over the world using content delivery networks (CDNs). Hosting for static sites can be set up in a snap.
• Image optimization through different sizes per image.

Discover why we are a service-agency: 👉 https://nightborn.be/services 👈

A breath of fresh air you said?

Prismic is in my honest opinion one of the best Headless CMS out there in the open, the type generation and usage are magnificent. A headless CMS contains at least 2 core components, a web app for creating/editing/publishing content and an API that enables front-end developers to get the content from a CMS into their projects.

The simplicity by which a non-technical collaborator can create a new type in Prismic, send me the JSON-file containing this type, and start creating content has me blown away.

Why we use Prismic at Nightborn:

• Free for one user, not expensive, and easy to use.
• Types: Prismic natively supports custom types that allow you to define and configure fields for your content. Some examples of custom types are pages, posts, articles,… Whatever blocks of content you need for your specific project. There are two categories of custom types: Repeatable Types and Single Types.
• Webhooks: Webhooks are events that are triggered whenever a change is published on your Prismic repository and the API is updated. You can monitor exactly what has changed, providing you a finer grain of control, the possibility of greater configuration, and an improved interface.
• Gatsby-support (and many others).

Pipelines, what for?

As you can imagine, asking designers to create a new build each time they publish an article is not how you'll become friends. That's where automation comes in, we first start by creating a pipeline, and a designer can create a new version of your website, while you're sailing the ship on other waters.

⛵ Webhook (Databricks) → 🛥️ Pipelines → ⛴️ Release

To create those pipelines we use Azure DevOps Services. Azure DevOps is a 'Software as a Service' (SaaS) platform from Microsoft that provides an end-to-end DevOps toolchain for developing and deploying software. It also integrates with most leading tools on the market and is a great option for orchestrating a DevOps toolchain.

Azure Pipelines is a cloud service that you can use to automatically build and test your code project and make it available to other users. It works with just about any language or project type. Azure Pipelines combines continuous integration (CI) and continuous delivery (CD) to constantly and consistently test and build your code and ship it to any target.

It's time to GIT back to work 🤭

🚢 Yarrrr pirate, we've arrived at our destination, we're setting anchor here! ⚓

We hope you enjoyed the journey as much as we did and hope this will help you find your own path to your beloved treasures on those vast and unforgiving JS waters.

Don't hesitate to look at our other blog posts!

👉 https://nightborn.be/blog 👈

Here are a few useful ropes you could use on your next adventure.

• https://www.gatsbyjs.org/
• https://prismic.io/
• https://dev.azure.com/
• https://nextjs.org/