Forem: Jamie Bradley

Laravel 12 and new starter kits are released today 🤘 anyone else excited?

Jamie Bradley — Mon, 24 Feb 2025 07:51:44 +0000

The Developer's Guide to Physical and Mental Well-being

Jamie Bradley — Sat, 22 Feb 2025 20:38:15 +0000

I stumbled across a post on Instagram that promoted an anonymous quote.

A healthy body is a healthy mind and a healthy mind takes care of business

I think it's a powerful quote. It's accurate and I can resonate with it. Before 2024, my physical and mental health were terrible. I had a bad diet, I barely moved and I was constantly stressed.

In 2024 I went on a journey that changed my life. I want to write about what I learned in the hope that others can hear my perspective and maybe change their lives too.

Start with Step Count

If you're reading this post on dev.to then it's fair to assume that you work in the tech industry. I assume you spend the majority of the working day at a desk. A percentage of readers might have access to a standing desk with a treadmill - go you 🤘

With that in mind, have you considered how many steps you walk in a day?

I'm 35 years old. Websites I found on Google say that a person of my age should be walking between 6,000-10,000 steps a day. Most days I manage to hit this number. But prior to 2024 I was lucky if I walked 1,000 steps and that was "normal" for me.

This attitude was destroying my body.

The NHS claims that:

Studies have linked being inactive with being overweight and obese, type 2 diabetes, some types of cancer, and early death.

Sitting for long periods is thought to slow the metabolism, which affects the body's ability to regulate blood sugar, blood pressure and break down body fat.

Extract taken from the Live Well post "Why we should sit less"

So if these numbers feel "normal" to you too. It's time to take some action.

It's not just Physical Health

A sedentary lifestyle contributes to poor mental health too. If we spend long periods of time indoors, especially with little movement, we deprive ourselves on sunlight and fresh air.

Sunlight triggers the production of Vitamin D and the release of a hormone called serotonin both of which are associated with improving your mood, focus and reducing stress.

Exercising releases a cocktail of amazing hormones, one being the "feel good" hormone - Dopamine. That's right! If you're feeling like crap then taking a break and exercising will make you feel better. I can vouch for this!

I'm too busy to exercise

I'm the co-founder of a small agency in the UK. Starting the business was tough. I worked very long hours and prioritised work before so many things, including my health.

I managed to convince myself that if I wasn't working long hours then my business would fail. But it didn't occur to me that if I was more productive and focused, I wouldn't need to work late every night.

Being tired also contributed to a load of mistakes. The quality of my work was not to my usual standard and I was beginning to doubt my ability. It became a vicious cycle.

It only takes 30 minutes

As the last title suggests, my excuse for not exercising was "I'm too busy". I believed that taking time away from a task would result in less time to finish the task.

Eventually I realised that all I needed was thirty minutes of something:

Taking a walk
Going for a jog
Riding a bicycle
Lifting some weights
Following a workout video

I also told myself that I could only do one of these things on my lunch break. I couldn't wake up early because I was tired from a late night of working. I couldn't workout when I got home, because I "needed" to be back on the laptop.

All it took was 30 minutes. Everyone can find 30 minutes in their day. We probably spend more than 30 minutes scrolling through TikTok and Instagram!

My Solution

This won't work for everyone. But my solution was to wake up at 6am and attend a spinning class at the local gym. The spinning class was a high intensity session, so it only lasted 30 minutes, but damn it worked you hard!

Waking up early and working out in the morning meant I was using more energy. I needed to make time for sleep. I changed my routine to make sure I was asleep by no later than 10pm. This meant I was guaranteed at least 8 hours sleep.

Given that the recommended number of hours for an adult is 7-9 hours, this worked well.

Stay Consistent

Over the last 10 years I had been very inconsistent when it came to diet and exercise. I would do well for a few weeks but then fall of the wagon. I think it was because I would set unrealistic expectations.

This time I have always reminded myself "it's just half an hour of something".

Basically. You need to just show up. Whether it's at the gym, running around the block or going for a walk to a coffee shop and back. Remember that something is better than staying inside, sat down, doing nothing.

The benefits will follow.

Today, I am 10kg lighter than I was in January 2024. My cardiovascular health is better, my blood pressure and cholesterol levels have dropped. I am training for a half marathon, and a year ago I couldn't run around the corner without being breathless.

Finally, my mental health has significantly improved. I deal with high pressure situations better than before. I'm more focused and attentive with coding and I'm happier with the applications I build.

People have told me they see a difference in my mood. Which must mean I'm a better person to be around 😂

Being a healthier developer made me a better developer.

What are your thoughts on the importance of health and working in tech? Have you embarked on a similar journey and noticed the same improvements? Leave a comment below and let's spark a discussion.

Headless Ecommerce Tutorial with (Sanity and) the Shopify API

Jamie Bradley — Wed, 09 Jun 2021 22:45:56 +0000

One of my favorite things about Jamstack is the ability to drip-feed third-party services into your website through APIs. We have seen a huge increase in "headless" content services, such as Sanity, but today I want to talk about headless commerce.

Headless commerce, much like a headless CMS, is the process of abstracting your front end away from a monolithic e-commerce system (such as Shopify). So instead of creating a Shopify Theme, you can create a website in Next, Gatsby, Nuxt, 11ty, vanilla javascript...anything that can consume an API!

Why should you use a headless e-commerce system?

As developers, we get a better experience. We can develop websites with tools we are most comfortable with, rather than being constrained to a platform's theming standards.

With this flexibility, our user also gets a better experience. We can use the likes of Jamstack to deliver fast, secure, and scalable websites.

What we'll be building today

In this article, we are going to create a website with Next.js. We will create a headless Shopify Store using Shopify's Storefront API and combine this with data from an instance of Sanity.

Our end product will be an online store that contains content (that is managed through Sanity) and a list of products from a "Featured" collection. Each product will contain a "Buy Now" button that will take our customers straight to a checkout that is generated by the Storefront API.

You can find the repository for the end product here and a hosted example here.

Let's install Next.js

Before we get hands-on with code, we need to start by setting up the tools that we will use for this project. We're going to use Next.js to develop the front-end layer of our app, so we'll start there.

The quickest way to get started with Next.js is to use create-next-app. Start by creating an empty folder. Next, navigate to the new folder in your terminal and run one of the following commands:

npx create-next-app
# or
yarn create next-app

Psst: Don't have Node or NPM installed? There are some great instructions here to help you get started with installing Node and NPM on your computer.

The create-next-app tool will ask you to provide a name for your Next App. For the purpose of this guide, please call it web. Once create-next-app is complete, you should have a file structure similar to the screenshot below:

Spicing up styles with Tailwind

The examples in this guide include components that have been developed with Tailwind CSS. Please follow the latest instructions from Tailwind's website here to install Tailwind in your Next.js application.

Getting started with Sanity

With the front-end ready to go our next job is to create a local instance of Sanity's Studio. This is the application we will use to manage page content outside of Shopify.

Installing the studio

The best way to get started with Sanity is to use Sanity's CLI tool. If you don't already have this, you can install the tool by running the following command in your terminal:

npm install -g @sanity/cli

Upon completion of the installation, you will have access to a new terminal command called sanity - you can run sanity help to see a list of available commands from this tool.

To create a new studio, run sanity init after running this command you should see something like this:

Note: If you aren't already logged into your Sanity account then you will be asked to log in or create an account with Sanity before seeing these options.

Select Create new project from the list of options and give your project a name (this is name that will be allocated to your project in the your Sanity Account dashboard).

Next, you will be asked about datasets. For the purpose of this guide you can go ahead and use Sanity's default configuration by entering Y then pressing enter.

Sanity will now ask you for a Project Output Path. To stay in line with this guide, enter the word studio and hit enter. You will see that Sanity has updated the Project Output Path to use the folder name studio as per the screenshot below:

Finally, when presented with the Project Template options, please select the Clean project with no predefined schemas option.

After selecting this option, Sanity will proceed with the installation and initialisation of the studio. Once this is complete you should now have a project folder with a structure like this:

web/
  .git
  .gitignore
  README.md
  node_modules/
  package.json
  pages/
  public/
  styles/
  yarn.lock

studio/
  README.md
  config/
  node_modules/
  package.json
  plugins/
  sanity.json
  schemas/
  static/
  tsconfig.json
  yarn.lock

Let's build the Schema

Before we start working on the Next.js code we're going to dive into Sanity and set up the schema for our website. The primary focus for this tutorial is the homepage, so we're going to create a singleton document (or "one-off"). This is a great opportunity to see Sanity's flexibility with the Structure Builder.

First we need to create the homepage document. Start by creating a file called homepage.js within your studio/schemas folder. Take the contents of this snippet and add it to the homepage.js file.

// studio/schemas/homepage.js

export default {
  name: "homepage",
  title: "Homepage",
  type: "document",

  // These actions define what users can do with this document.
  // Notice how "delete" is not available in this array.
  // This means, users can't delete this document
  // from within the studio
  __experimental_actions: ["update", "create", "publish"],

  fields: [
    {
      title: "Hero Title",
      description:
        "This title will appear in the hero unit at the top of the page",
      type: "string",
      name: "heroTitle",
    },
  ],
};

Next, we need to tell Sanity to include the homepage document within the Studio's schema. We can do this by importing the new object into studio/schemas/schema.js and appending it to the schemaTypes array like so:

// studio/schemas/schema.js

// First, we must import the schema creator
import createSchema from 'part:@sanity/base/schema-creator'

// Then import schema types from any plugins that might expose them
import schemaTypes from 'all:part:@sanity/base/schema-type'

import homepage from './homepage'

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: 'default',
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    /* Your types here! */
    homepage
  ]),
})

Before we look at the structure builder, let's take this opportunity to make sure everything is working. If you haven't already, run sanity start from your studio's directory in the terminal and navigate to localhost:3333 in your browser. If all is well, you should see a screen similar to the screenshot below.

This is great, but to give our editor the required behavior for managing a "one-off" document, we need to modify the Desk tool.

Defining Parts

There is a fantastic Sanity guide about the parts system. For now, all we need to know is that we are going to use this system to customise our Desk.

From the studio folder, open sanity.json and take a look at the parts array, it should look something like this:

// studio/sanity.json

"parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    }
  ]

By default, the studio uses the schema part to read our schema definitions that we declare in schema.js.

We're now going to add an extra object to this array like so:

// studio/sanity.json

"parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./deskStructure.js"
    }
  ]

Next, we need to create the file that we will use to define our desk structure. This will be a file called deskStructure.js that is located in the root of our studio directory.

Let's create that file and include the following code:

// studio/deskStructure.js

import S from "@sanity/desk-tool/structure-builder";

export default () =>
  S.list()
    .title("Menu")
    .items([
      S.listItem()
        .title("Homepage")
        .child(
          S.editor()
            .id("homepage")
            .schemaType("homepage")
            .documentId("homepage")
            .title("Homepage")
        ),
      ...S.documentTypeListItems().filter(
        (listItem) => !["homepage"].includes(listItem.getId())
      ),
    ]);

Here, we are importing the Sanity Structure Builder package. We use this package to define what we want to display in the Desk view. More specifically, we are using the listItem() method to replace the default list item for the homepage document with a custom one. For instance, we can modify the title and customize some of the editor properties for this document type.

Restart the local Sanity dev server and head back to your Studio. You should see a page similar to the one from the screenshot below.

Before moving on to integrating Sanity with Next, open your studio, and add add a title to the homepage document.

Building the Homepage

We're going to set up a dedicated file that will be used to handle the fetching of data from Sanity.

First, let's navigate to our web folder and install the next-sanity package.

## Run this command from the web/ directory! ##

# NPM
npm i next-sanity

# Yarn
yarn add next-sanity

Create a new folder within the web directory called lib/. Within this folder, create a file called sanity.js and insert the following code:

// web/lib/sanity.js

import {
  groq,
  createClient,
} from "next-sanity";

const config = {
  /**
   * Find your project ID and dataset in `sanity.json` in your studio project.
   * These are considered “public”, but you can use environment variables
   * if you want differ between local dev and production.
   *
   * https://nextjs.org/docs/basic-features/environment-variables
   **/

  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  useCdn: process.env.NODE_ENV === "production",

  /**
   * Set useCdn to `false` if your application require the freshest possible
   * data always (potentially slightly slower and a bit more expensive).
   * Authenticated request (like preview) will always bypass the CDN
   **/
};

// Set up the client for fetching data in the getProps page functions
export const sanityClient = createClient(config);
// Set up a preview client with serverless authentication for drafts
export const previewClient = createClient({
  ...config,
  useCdn: false,
  token: process.env.SANITY_API_TOKEN,
});

// Helper function for easily switching between normal client and preview client
export const getClient = (usePreview) =>
  usePreview ? previewClient : sanityClient;

Notice that we are referencing some environment variables here. You will need to create a file called .env.local that includes the following variables:

# web/.env.local

NEXT_PUBLIC_SANITY_PROJECT_ID="<project-id>"
SANITY_API_TOKEN="<token>"

We need to replace the values with a project ID and API token. Both of these can be retrieved from your Sanity project dashboard.

For more information on next-sanity and the api.js file, take a look at the Github repository for next-sanity

Writing the Markup & Mapping Content

Go to your web folder and open pages/index.js, replace the content with the following:

// web/pages/index.js

import Image from "next/image";
import Link from "next/link";
import { groq } from "next-sanity";
import { getClient } from "../lib/sanity";

const homepageQuery = groq`*[_type == "homepage"]{
  heroTitle
}[0]`;

function HomePage({ data }) {
  const { homepageData } = data;

  return (
    <main className="bg-gray-50">
      <div className="h-96 bg-indigo-500 flex justify-center items-center">
        <h1 className="text-white font-semibold text-6xl">
          {homepageData?.heroTitle}
        </h1>
      </div>

      <section className="container mx-auto py-12">
        <h2 className="font-semibold text-4xl mb-8">Featured Products</h2>

        <div className="grid grid-flow-row grid-cols-3 grid-rows-auto gap-8">
          <article className="text-center bg-white rounded-xl p-8 md:p-0 shadow-md pt-6 md:p-8 space-y-8">
            <Image
              src="https://images.pexels.com/photos/218763/pexels-photo-218763.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
              width="150"
              height="150"
              alt="A pair of slippers"
              className="rounded-full"
            />

            <p className="text-lg font-semibold text-2xl">A Pair of Slippers</p>

            <div className="font-medium">
              <Link href="/">
                <a className="bg-gray-100 text-gray-800 px-6 py-2 rounded block">
                  View Product
                </a>
              </Link>
            </div>
          </article>
        </div>
      </section>
    </main>
  );
}

export default HomePage;

export async function getStaticProps() {
  const homepageData = await getClient().fetch(homepageQuery, {});

  return {
    props: {
      data: {
        homepageData,
      },
    },
  };
}

With this code, we are using the Next.js getStaticProps method to retrieve data from Sanity at build time. The data we retrieve is assigned to a property called homepageData. We send this property to our page component as part of a prop called data.

Since we are using Next Image, you will need to allow Next to download the placeholder image from https://images.pexels.com. Whilst we are here, we will tell Next.js to download images from Shopify, this will be useful later.

You can do this by creating a file called next.config.js and entering the following code:

// web/next.config.js

module.exports = {
  images: {
    domains: ["images.pexels.com", "cdn.shopify.com"],
  },
};

Start your application by running next dev or the dev script in package.json (from within the web/ directory) and you should see a page that looks very similar to the screenshot below.

How to retrieve data from Shopify

First, we need to get a Storefront Access Token from Shopify. If you already have a Storefront token, with the correct permissions, then feel free to skip this step.

You will need access to a Shopify store. A live store will work fine, but if you're just playing around then I would suggest creating a development store.

You can create a development store with a Shopify Partner Account. If you don't have an account then click here to register. Creating a Partners Account means that you will have access to a fully featured store without having to sign up for a free trial.

Getting a Shopify Storefront Access Token

Once you have access to a store, you need to log into the Shopify Admin and create a Shopify App. You can do this by visiting your store's URL (which will look like https://your-store-name.myshopify.com/admin) and clicking on the "Apps" link from the left-hand navigation bar. This will take you to the Apps page. Scroll to the bottom of this page and locate the following text "Working with a developer on your shop? Manage private apps", click "Manage private apps".

Note: If you have not created a Private App on this store before, you will be asked a series of questions regarding terms and conditions surrounding Private Apps on Shopify. You will have to agree to the terms before continuing.

If all is well you will be presented with the Private Apps page. Click on the button labeled "Create new private app" which is situated at the top right-hand side of the page.

Fill out the fields in the "App Details" section, then scroll to the bottom of the page and look for a checkbox with a label that contains the text "Allow this app to access your storefront data using the Storefront API". Then, click this checkbox.

Selecting this checkbox tells Shopify that you intend to use the Storefront API as part of your private app. Ensure the following permissions are selected:

Read products, variants, and collections
- Read product tags
- Read inventory of products and their variants
Read and modify checkouts

Once you have selected these options, click the save button located at the top right-hand side of the screen.

If all is well, the page will refresh. Scroll to the bottom of the private app page and locate the "Storefront API" section. At the bottom of this section, you will see a text field labeled "Storefront access token". We will use this access token to handle authentication with the Shopify Storefront API, so keep this page open.

Add products to Shopify

At the moment, our homepage is returning a single product card that contains hardcoded data. In this part of the tutorial, we're going to add a product to our instance of Shopify and assign it to a collection.

In Shopify, a collection is a group of products. You can assign many products to a collection and a product can be assigned to more than one collection.

Head over to your instance of Shopify and click the "Products" link that is located in the navigation bar on the left hand side.

If you have no products in your store, then go ahead and add some. For the purpose of this demonstration I have created a single product with no variants.

Once the products have been added, we need to create a collection. Click on the "Collections" link from the sidebar.

Give your collection the name of "Homepage" and scroll down to the Collection Type section. Shopify gives you the ability to create automated collections. This is a pretty cool feature that you can read more about here. But, for the purpose of this tutorial, we are going to create a Manual collection.

Select the radio button labelled "Manual collection".

Once you have done this, ensure the Private App you created earlier is selected within the "Collection availability" section at the top of the page. If this option is un-checked, then you won't be able to request the collection from the API.

Save the collection and wait for the page to reload. You will now see a section called "Products". In this section, you can locate products from your store's inventory and assign them to the collection.

Go ahead and search for the products you created earlier. Add them to the collection and wait for the collection to update (this should happen asynchronously as you add products).

Displaying products in Next.js

As we did with the Sanity content, we now need to map the products from Shopify into our homepage. This process is very similar to what we did earlier. However, unlike Shopify Admin's REST API, the Storefront API is a GraphQL API. This means we need to write API queries with the GraphQL syntax.

Let's start by installing some new dependencies.

We're going to install a package called graphql-request. This is a minimal GraphQL client that can be used in both Node and browser based environments. Install the package with NPM or Yarn respectively:

## Run this from the web/ folder! ##

# NPM
npm i graphql-request graphql

# Yarn
yarn add graphql-request graphql

Before we write some GraphQL queries, it would be a good idea to store our Shopify Endpoint URL and access token as environment variables. Your URL will look something like this: https://your-store-name.myshopify.com.

Open the .env.local file that you created earlier and include the following variables. Be sure to replace my placeholder values with your actual values.

# web/.env.local

# Shopify Config
NEXT_PUBLIC_SHOPIFY_URL="replace-with-url"
NEXT_PUBLIC_TOKEN="replace-with-token"

Restart your dev server after making the changes and head back to the pages/index.js file to import the new dependencies.

// web/pages/index.js
import { gql, GraphQLClient } from "graphql-request";

Now, we're going to make the following changes to getStaticProps(). This is where we will use our new environment variables.

// web/pages/index.js

export async function getStaticProps() {
  const homepageData = await getClient().fetch(homepageQuery, {});
  const graphQLClient = new GraphQLClient(process.env.NEXT_PUBLIC_SHOPIFY_URL, {
    headers: {
      "X-Shopify-Storefront-Access-Token": process.env.NEXT_PUBLIC_TOKEN,
    },
  });

  // Shopify Request
  const query = gql`
    {
      collectionByHandle(handle: "homepage") {
        id
        title
        products(first: 12) {
          edges {
            node {
              id
              title
              variants(first: 1) {
                edges {
                  node {
                    id
                  }
                }
              }
              images(first: 1) {
                edges {
                  node {
                    altText
                    transformedSrc
                  }
                }
              }
            }
          }
        }
      }
    }
  `;

  const res = await graphQLClient.request(query);

  if (res.errors) {
    console.log(JSON.stringify(res.errors, null, 2));
    throw Error("Unable to retrieve Shopify Products. Please check logs");
  }

  return {
    props: {
      data: {
        homepageData,
        collection: res.collectionByHandle,
      },
    },
  };
}

Let's walk through the changes we have made.

First we are creating a new instance of the GraphQLClient class and assigning it to a variable called graphQLClient. You will see that we are assigning a header to our request client called X-Shopify-Storefront-Access-Token. This is a required header that Shopify uses to authenticate your request.

In our query we are requesting the first twelve products from the Homepage collection. The first and after params are used for pagination. These numbers can be adjusted accordingly, but twelve is the maximum number of products I want to show on the homepage. As part of our request for products we are also requesting the first product image and product variant.

A quick note on variants

There are a number of mutations in the Storefront API that require the use of a product's variant ID. For example, checkoutCreate, is something we will look at later. For simplicity, the product cards we create will display the first available variant. There may be occasions where a vendor stocks products with a single variant. For example, a vendor who sells artwork. In this case, you still have to present a variant ID to these mutations. Shopify will give you a variant ID (even if the product does not have any variants). This is something that has confused me in the past, so I wanted to share this with you to avoid making the mistakes I made when learning these APIs!

Now, using graphql-request we can perform our request to the Storefront API and pass the response into the data object that will be passed to the page as a prop.

If all is well, you will see that your page has rebuilt successfully. However, we still need to update the UI to use present the data from Shopify.

Now let's make some changes to the homepage template.

// web/pages/index.js

function HomePage({ data }) {
  const { homepageData, collection } = data;

  return (
    <main className="bg-gray-50">
      <div className="h-96 bg-indigo-500 flex justify-center items-center">
        <h1 className="text-white font-semibold text-6xl">
          {homepageData.heroTitle}
        </h1>
      </div>

      {collection?.products?.edges.length > 0 && (
        <section className="container mx-auto py-12">
          <h2 className="font-semibold text-4xl mb-8">Featured Products</h2>
          <div className="grid grid-flow-row grid-cols-3 grid-rows-auto gap-8">
            {collection.products.edges.map((product) => {
              return <ProductCard product={product} />;
            })}
          </div>
        </section>
      )}
    </main>
  );
}

You should see an error regarding the <ProductCard> component. That's because we haven't created it yet so let's do that!

Create a folder in the root of your project called components/, then create a file called ProductCard.jsx and place the following code within the file.

// web/components/ProductCard.jsx

import React, { useState } from "react";
import { useRouter } from "next/router";
import { gql, GraphQLClient } from "graphql-request";
import Image from "next/image";
import Link from "next/link";

export function ProductCard({ product }) {
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  return (
    <article
      className="text-center bg-white rounded-xl p-8 shadow-md pt-6 md:p-8 space-y-8"
      key={product.node.id}
    >
      {product.node.images && (
        <Image
          src={product.node.images.edges[0].node.transformedSrc}
          width="125"
          height="125"
          alt={product.node.images.edges[0].node.altText}
          className="rounded-full"
          objectFit="cover"
        />
      )}

      <p className="font-semibold text-2xl">{product.node.title}</p>

      <div className="font-medium">
        <Link href="/">
          <a className="bg-gray-100 text-gray-800 px-6 py-2 rounded block">
            View Product
          </a>
        </Link>
      </div>
    </article>
  );
}

Remember to import the <ProductCard /> component into /pages/index.js. With this imported, you should now see that the collection section contains products from your Shopify instance!

How will users navigate to the checkout?

To wrap things up, we're going to make some changes to our product card. We're going to introduce a function that will generate a Shopify checkout via the API. To accomplish this, we'll use a Storefront GraphQL Mutation called checkoutCreate.

First, let's add a button above the "View Product" link:

// web/components/ProductCard.jsx

<div className="font-medium">
  <button
        onClick={() => createCheckout(product.node.variants.edges[0].node.id)}
    disabled={loading}
    className={`bg-indigo-500 text-white px-6 py-2 rounded block mb-4 w-full ${
      loading && "opacity-70 cursor-not-allowed"
    }`}
  >
    {loading ? "Please Wait..." : "Buy Now"}
  </button>

  <Link href="/">
    <a className="bg-gray-100 text-gray-800 px-6 py-2 rounded block">
      View Product
    </a>
  </Link>
</div>

Next, we're going to write our function that will call the storefront mutation. Insert the following function within your ProductCard.jsx file.

// web/components/ProductCard.jsx

/**
 * Create Checkout Function
 * Creates a shopify checkout url and redirects customer
 * to the Shopify checkout page.
 * @param {string} variantId
 */
async function createCheckout(variantId) {
  setLoading(true);

  const graphQLClient = new GraphQLClient(process.env.NEXT_PUBLIC_SHOPIFY_URL, {
    headers: {
      "X-Shopify-Storefront-Access-Token": process.env.NEXT_PUBLIC_TOKEN,
    },
  });

  const mutation = gql`
    mutation checkoutCreate($input: CheckoutCreateInput!) {
      checkoutCreate(input: $input) {
        checkout {
          id
          webUrl
        }
        checkoutUserErrors {
          code
          field
          message
        }
      }
    }
  `;

  const variables = {
    input: {
      lineItems: [
        {
          variantId,
          quantity: 1,
        },
      ],
    },
  };

  const res = await graphQLClient.request(mutation, variables);

  if (res.checkoutCreate.checkoutUserErrors.length > 0) {
    setLoading(false);
    alert("There was a problem processing the request.");
  } else {
    router.push(res.checkoutCreate.checkout.webUrl);
  }
}

The function we have created is posting a GraphQL Mutation to the Storefront API. The mutation we are using is called checkoutCreate. If you take a closer look at the mutation string, you can see that we are defining a variable called $input:

// web/components/ProductCard.jsx

const mutation = gql`
  mutation checkoutCreate($input: CheckoutCreateInput!) {
    checkoutCreate(input: $input) {
      checkout {
        id
        webUrl
      }
      ...

With the GraphQL Request package we can pass variables through to the request as an object. You will notice that we have created a variable called variables which contains the input object that Shopify needs in order to generate the checkout.

Finally, we specify that the mutation returns a property called webUrl. This is the checkout URL that we can redirect customers to in order to purchase a product.

Conclusion

Well done! Now you have a headless cms/commerce solution that you can build on or use as a foundation for future projects. There are various ways that you can build on this, why not try some of these extras?

Create product landing pages with Next dynamic routes and the Shopify API.
Use React context to create a basket that customers can add products to. Then, using the basket data, you can create a with the from the basket.
Consider ways you can make use of Sanity for powerful marketing material on your site such as carousels, feature sections or landing pages.
Perhaps you can try upselling products as part of the blog on your website. I created a Sanity plugin to help with scenarios such as this.

Thank you for taking the opportunity to read through this tutorial. If you have any questions then please feel free to find me on Twitter (I use the handle @jamiebradley234) or amongst the Sanity Slack!

React Splide with Gatsby: Top Tip

Jamie Bradley — Thu, 07 Jan 2021 18:40:29 +0000

Update: Splide is now in Version 3 and (since the update) React Splide appears to work well with Gatsby (tested on V4) without any additional configuration. This article is only useful to those using an older version of React Splide.

If you have never come across SplideJS then I encourage you to check it out. It's a great plugin for building carousels and I think the documentation is brilliant. Check out SplideJS here.

Let me start by telling you about my painful afternoon...

Today, I have been working on a website for a client using Gatsby. Until today, everything has been going great! My task today was to develop a carousel component, so I turned to my favourite tool (Splide) and I noticed they have a React port. "Awesome" I thought, "This is going to be simple!".

Then I noticed an error in the Netlify logs.

  14 |  else
  15 |      root["Splide"] = factory();
> 16 | })(self, function() {
     |  ^
  17 | return /******/ (() => { // webpackBootstrap
  18 | /******/     "use strict";
  19 | /******/     var __webpack_modules__ = ({


  WebpackError: ReferenceError: self is not defined

This doesn't look good.

Debugging Gatsby HTML Builds

There's a great section in the Gatsby documentation about debugging HTML builds here. I consulted this and found the section on third-party modules. I have used this approach with other packages that expect the window object during the HTML build, so I thought I would give this a go.

In gatsby-node.js I added the following:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  // With SSR enabled during development, we capture this
  // in development and during production build.
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /@splidejs/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

Great 💥 let's run gatsby build again...oh dear

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

We have a new error. A new error is good, it means progress! If we copy the error decoder URL into a new browser we can see that React returned the following error.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

At first I was puzzled, but after a coffee it made sense. We have told webpack to replace React Splide with a dummy module. The loaders.null() suggests that we're not going to return anything valuable - it's undefined.

So the end result for my carousel component was this:

export const Testimonials = ({ data }) => {
  if (typeof window === "undefined") {
    return <p>Server Render</p>
  }

  return (
    <Box mb={24}>
      <Splide
        options={{
          perPage: 1,
          perMove: 1,
          arrows: false,
        }}
      >
        {data.map(testimonial => {
          return (
            <SplideSlide key={testimonial.id}>
              <Flex bgColor="blue.600">
                <Box width="400px">
                  {/* To be replaced with Gatsby Image */}
                  <img src={testimonial.imageUrl} alt={testimonial.alt} />
                </Box>
                <Box py={12} px={12} display="flex" flex={1} color="white">
                  <PortableText blocks={testimonial._rawTestimonialText} />
                </Box>
              </Flex>
            </SplideSlide>
          )
        })}
      </Splide>
    </Box>
  )
}

This means that when the HTML build takes place, the component will return <p>Server Render</p> rather than undefined. If we run the code in the browser, window is defined and we will see the Splide component.

Conclusion

I wrote this with the hope that it will help anyone else who comes across this problem. If you found it useful then let me know in the comments.

Thanks!

Managing Diabetes with the Jamstack: The Idea 💡

Jamie Bradley — Fri, 31 Jan 2020 17:05:45 +0000

On the 23rd December 2003, at the age of 14, I became ill and ended up in hospital. I was very quickly diagnosed with Type 1 Diabetes. 2019 marked my 17th year with Diabetes and as I write this post I find myself reflecting over the years and realising how much technology has positively impacted people who suffer with Diabetes.

However, despite these revolutions there's still a problem...

But before we discuss the problem and look at how I want to help solve this problem let's take a quick biology lesson.

What is Diabetes?

According to the NHS Website:

Diabetes is a lifelong condition that causes a person's blood sugar level to become too high.

If you think back to Science lessons at school you will have learned about an organ called the Pancreas. The Pancreas is responsible for the generation of an enzyme called Insulin. Insulin is a hormone that our bodies use to breakdown sugars (a byproduct of Carbohydrates that we eat) in our bloodstream.

So when a person with a healthy pancreas eats a meal their body will release the exact amount of insulin needed to break down the sugars consumed in that meal. Those who suffer with Diabetes are either unable to produce the right amount of insulin (Type 2) or unable to produce any insulin at all (Type 1).

What's the difference between the two groups?

The main differences are the root causes and treatment.

type 1 diabetes – caused when the body's immune system attacks and destroys the cells that produce insulin. Type 1 diabetes is not reversible. Type 1 diabetes is treated by injecting insulin, with pen injections or an insulin pump, to replicate the pancreas' behaviour.
type 2 diabetes – caused when the body does not produce enough insulin, or the body's cells do not react to insulin. The exact reason for this is unknown but obesity, being inactive and genetics are often factors that are associated with this type. Type 2 diabetes is often treated by making lifestyle changes and the prescription of tablets. Type 2 diabetes is potentially reversible if diagnosed early enough and drastic lifestyle changes are made.

How is Type 1 Diabetes Managed?

Type 1 Diabetics manage the disease by carrying out several blood sugar tests every day, usually before a meal. Ths involves using a blood sugar monitor which returns a blood sugar count. Using this reading and a carbohydrate count from our meals, we have to calculate the amount of insulin we need to take.

We're only human so we're bound to get insulin amounts wrong. If we don't take enough insulin our blood sugar count rises and this is called Hyperglycemia. If we take too much insulin our blood sugar count drops and this is called Hypoglycemia.

I have no idea how Type 2 Diabetes is managed on a daily basis. If someone lives with Type 2 Diabetes and would like to make a contribution to this article then I'm all ears!

Which is Worse?

A common question I get asked by friends, co-workers etc is "Which is worse? Type 1 or type 2?". In my opinion, both can be as bad as each other. In the UK type 2 diabetes is a lot more common that type 1. The NHS website states that "around 90% of all adults with diabetes have type 2". But, regardless of the type, if diabetes is poorly managed and blood sugar levels aren't stable then complications can arise:

Problems with eyes, potentially resulting in loss of eye sight
Problems with legs and feet, potentially resulting in ampuation
High Cholesterol
High Blood Pressure
Cardiovascular Disease
Kidney Failure

In the UK these complications add serious stress to our National Health Service. Managing diabetes effectively can drastically reduce these potential complications.

The Problem

Phew! 😅

Hopefully I haven't bored you away from the article. If you're still with me then let's talk about the problem with technology in diabetes.

Technology is expensive and it isn't accessible to everyone who suffers with diabetes. As a Brit I am very thankful for the NHS. I treat my Diabetes with an Insulin Pump combined with a CGM (Continous Glucose Monitor) - both of which are funded by the NHS. With this technology I am able to look over previous readings on a graph and adjust medication levels accordingly.

However, there isn't enough funding for every diabetic to access this treatment. We also have to remember that not every country has a service like the NHS which means diabetics outside of the UK have to fund their own treatment. Those who don't use insulin pumps or CGM's are relying on the functionality of their blood glucose monitor, most of which are very good at reading blood sugars but not painting the bigger picture.

Got an Insulin Pump/CGM?

If you do have access to this technology then you should checkout the Nightscout Project. Nightscout is an Open Source, DIY project that helps you get your CGM data into the cloud. This allows for remote monitoring of blood sugars - great for parents!

There's an awesome talk by Scott Hanselman that was recorded in 2015. In this talk Scott showcases the Night Scout software and discusses CGM data in the cloud. Check out the video here

My Solution

Don't get me wrong. Nightscout is an awesome project but it seems very much geared towards diabetics with a CGM and an Insulin Pump. There's also an essence of hacking involved to make the hardware work with the software - this isn't ideal for those who receive pumps through the NHS (it'll void the warranty).

So what about those who are still taking injections for their insulin? Or those who use pumps that have been prescribed by the NHS? How can we provide these users with a similar experience?

I want to create a system that is easy to deploy, cheap to host, secure and fast. This is where JAMstack comes in!

Why JAMstack?

We've been doing a lot of work with JAMstack at Endeavour Digital and the more I work with it, the more potential I see with this architecture. More importantly there are services in this space that I can utilise to meet my criteria:

Netlify - An easy to use and affordable hosting solution for static websites and client side applications. The free tier comes with an environment for executing lambda functions which is perfect for what I have in mind. As for keeping deployments simple, their 'deploy to Netlify' button will be super useful here!
*Update 18.05.2020 * - Since posting this article I made the decision to store blood results on the Sanity platform, as oppose to Fauna. I wanted to get something online quickly and started to get distracted from my primary goal as I started developing the custom admin interface.

Sanity provides a fantastic interface out of the box, that similar to a CMS, and it is very flexible. This means I can move my focus to the presentation layer whilst still delivering a great data entry experience for my users.

However, this isn't the end of my journey with Fauna. There are other ideas that I want to explore which will work perfectly with the Fauna Platform. So, please check them out, it's really awesome, and stay posted for my other Jamstack ideas!!

Gatsby - I'll be using Gatsby to develop the UI. I love Gatsby and I find it's Hybrid Pages feature both useful and awesome.

The Boring Solution

My good friend Sam Beckham introduced me to the idea of starting with the "Boring Solution". In other words the minimum functionality required to get a job done. Naturally I have A LOT of ideas for this application but I need to prove the concept first.

So I'll start with the boring solution, this will let me:

Publish data to FaunaDB via the Fauna dashboard. That's right, I'll not be bothering with a custom interface at this stage and why bother if there's one there for me to use?
Trigger a gatsby build on Netlify when data is updated. I'm going to try and keep my site as static as possible and this includes pre-fetching Fauna data. Since data is inputted manually and via my CGM I don't need a real-time interface, nor will I be triggering hundreds of deploys each day.
Display results in a graph on a basic front end built with Gatsby.

The Less Boring Solution

If I find my proof of concept useful then I will continue to build on this idea. I already have some things in mind that I would like to try which include:

Integrating a Netlify Function with iOS Shortcuts/IFTTT! This means I'll be able to publish results from my phone easily.
Develop an authenticated application for posting data to Fauna. So I can publish data via a web application rather than the Fauna dashboard. It'll also make posting data easier for less technical users (I would like to Open Source something if this works out).

Wrapping Up

I'm sure more and more ideas will come up as I work through this. But I'm really excited to see how far I can go with JAMstack and learn more about what these services are capable of.

I intend to keep writing about my progress and hope that I can finish with something that I can showcase and talk about at meetups and conferences.

If you also suffer with diabetes and have some ideas you would like to share or would just like to chat to a fellow human with a silly pancreas, then please feel free to reach out to me on Twitter @jamiebradley234.