Forem: Sanity.io

Add the Telegram Messaging API to your React application

Joseph Udonsak — Sat, 20 Nov 2021 13:48:36 +0000

Introduction

Telegram is one of the most popular messaging apps and probably the most loved by developers. By championing privacy in a time where it seems increasingly elusive, Telegram has seen its popularity soar - crossing the 500 million monthly active users mark in the first quarter of 2021. This makes it a viable notification medium for web applications - seeing as it is also available on the app store for android and iOS devices. Additionally, being open source and providing a developer-friendly API, integrating a Telegram-based messaging feature on your application is relatively easier than other popular messaging applications.

In this guide, I will show you how to integrate Telegram messaging into your React application. Using Sanity to provide movie content, we will use Telegram to send ourselves movie information- for further research and possibly an outing to the cinema 🙂. The app we will build (and its messaging functionality) is shown in the gif below.

The code for the complete project is available on Github should you get stuck at any point.

Prerequisites

Since we'll be working with Telegram, you need to be signed up and have a Telegram app (either mobile or desktop) running.

To keep up with the concepts that will be introduced in this article, you will need a fair grasp of Javascript ES6. You will also need to have an understanding of some basic React concepts like hooks and functional components.

You will also need to have the following installed on your workstation:

An up to date installation of node.js and Node Package Manager (NPM)
Sanity CLI
A code editor of your choice

Setting up a Telegram bot

The first thing we need to do is set up a Telegram bot. A ‘bot’ – short for robot – is a software program that performs automated, repetitive, pre-defined tasks. In our case, the bot sends messages with movie content.

Surprise surprise, there's a bot for creating and managing Telegram bots. His name is the botfather. To create a Telegram bot, send /newbot to the botfather. The next thing to do is select a bot name (which has to be unique) and you will receive an API token.

With your API token, you can track updates (i.e. activity related to your bot) including when messages are sent to your bot. To do this, visit the URL https://api.telegram.org/bot[TOKEN]/getUpdates where TOKEN is the token given to you by the botfather.

Getting your unique id

Telegram has a different system for identifying users - deviating from phone numbers or email addresses as a unique identifier. To send messages to a user, we need the user id. The simplest way to get our chat id is by starting a conversation with our bot and checking for the chat id in the getUpdates URL. To start a conversation with your bot, visit the URL https://t.me/[BOT_USERNAME]/start where BOT_USERNAME refers to the username for your Telegram bot. You will be directed to the Telegram app where you will see something similar to the screenshot below.

Click the START button to start a conversation with your bot. Back in the getUpdates URL, you'll see a new update.

In the from node, we can see the id of the message sender. Make a note of the displayed id as we'll use this later on.

Get user id via Deep Linking

It doesn't stop there, however. While this is extracurricular in the context of this article, it is also possible to get our user id or that of others via Telegram's deep linking mechanism. By adding a start query parameter to your bot URL (https://t.me/[BOT_USERNAME]), you can identify users on your system and get their Telegram user ID. This can be done via the following steps:

Assign a unique, random string to the user.
Present a start URL for the user to click (https://t.me/[BOT_USERNAME]?start=[UNIQUE_STRING]) where UNIQUE_STRING represents the string generated in step 1.
Poll the getUpdates URL and filter the results for a message update with text /start [UNIQUE_STRING]. An implementation in Javascript is shown below.

const getBotUpdates = () =>
  fetch(
    "[https://api.telegram.org/bot{token}/getUpdates](https://api.telegram.org/bot%7Bbot_token%7D/getUpdates)"
  ).then((response) => response.json());

const getUserTelegramId = async (uniqueString) => {
  const { result } = await getBotUpdates();

  const messageUpdates = result.filter(
    ({ message }) => message?.text !== undefined
  );

  const userUpdate = messageUpdates.find(
    ({ message }) => message.text === `/start ${uniqueString}`
  );

  return userUpdate.message.from.id;
};

This id can be saved for the user in the database and used anytime a notification is to be sent via Telegram.

For this article, however, we will not use deep linking as we only want to send messages to ourselves.

Sending a notification

Sending a notification is as simple as sending a GET request to https://api.telegram.org/bot[TOKEN]/sendMessage with chat_id and text as the query parameters. Remember, TOKEN is the token given to you by the botfather. Optionally, you can also include a third query parameter, parse_mode that allows you to send HTML or Markdown content to the recipient.

To see this in action, open the URL https://api.telegram.org/bot[TOKEN]/sendMessage?chat_id=[USER_ID]&text=Hello%20from%20your%20new%20bot in your browser where token is the token given to you by the botfather and USER_ID is the id of the message sender you copied earlier. You will see a response similar to the screenshot below.

Meanwhile, in your Telegram app, you will have received a message from your bot.

Just like that, you can send notifications to yourself. Pretty neat right?

Building the movie application

Having understood the process of setting up a telegram bot and sending a notification via Telegram, let's see how we can use this in an application. Let's build an application to display the latest movies, along with actors and upcoming screenings. We'll use Next.js for this tutorial. Next.js is a framework built on React.js which provides several extra features, including server-side rendering and generating static websites. Create a new project using the following command.

npx create-next-app telegram-react

For content management, we'll be using Sanity. Let's initialise a new Sanity project. To do this, we'll create a new folder called studio and initialise the project using the sanity init command.

cd telegram-react

mkdir studio

sanity init

Respond to the CLI prompts as shown below.

? Select project to use: Create new project
? Your project name: telegram-react
? Select dataset to use: production
? Project output path: telegram-react/studio
? Select project template: Movie project (schema + sample data)
? Add a sampling of sci-fi movies to your dataset on the hosted backend? Yes

Add project dependencies

Once the Sanity CLI completes the setup process, we can add the dependencies for our project.

To interact with the Sanity backend, we'll use the Sanity.io toolkit for NextJs, sanity-next. Add it using the following command.

npm i next-sanity

For styling our pages, we'll use Chakra UI, a simple, modular, and accessible component library that gives you the building blocks you need to build your React applications. Add Chakra and its dependencies using the following command.

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

While we're developing, we'll need the sanity CLI installed. Additionally, we need to run our next application and sanity studio simultaneously. We can do that using the concurrently package. Install both of them using the command below.

npm i --save-dev @sanity/cli concurrently

Finally, modify the scripts node in package.json to match the following.

"scripts": {
    "dev": "concurrently \"next\" \"cd studio && sanity start\"",
    "build": "echo 'Building Sanity to public/studio…' && cd studio && sanity build ../public/studio -y && cd .. && next build",
    "start": "next start",
    "lint": "next lint"
  },

Set up Chakra

To inject Chakra into our application, we need to update the pages/_app.js file and inject the ChakraProvider. Open pages/_app.js (you can create the file if it doesn't exist) and add the following.


import '../styles/globals.css'
import {ChakraProvider, Container} from "@chakra-ui/react";

function MyApp({Component, pageProps}) {
    return (
        <ChakraProvider>
            <Container maxW='container.xl' centerContent>
                <Component {...pageProps} />
            </Container>
        </ChakraProvider>
    );
}

export default MyApp

Set environment variables

Next, we'll set environment variables so we can safely load the credentials we need to interact with Telegram and sanity. Create a new file called .env.local and add the following to the env file.

# Telegram
TELEGRAM_BOT_TOKEN = "your_telegram_bot_token"
TELEGRAM_USER_ID = "your_telegram_user_id"

# For Next Locally
NEXT_PUBLIC_SANITY_PROJECT_ID = "your_project_id"
NEXT_PUBLIC_SANITY_DATASET = "production"

Write utility functions

Before we build the pages of our application, let's write some utility functions that will help us with tasks like making requests to Sanity, formatting data, or making API requests. Create a new folder at the root of your project named utility.

Next, create a new file called api.js in the utility directory. This file will contain a helper function for making API requests. In this file add the following code.

export const makePostRequest = (url, details) => {
    return fetch(url,
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(details),
        })
        .then((response) => response.json());
};

Here, we declare a function named makePostRequest which takes the endpoint URL and the values of the POST request and uses Fetch to send a POST request accordingly. The function returns a promise which resolves to the JSON content of the API response.

Next, create a new file called telegram.js in the utility directory. This file will contain a helper function that will help us to interact with the Telegram Bot API easily. In this file add the following code.

import {makePostRequest} from "./api";

const telegramBotKey = process.env.TELEGRAM_BOT_TOKEN;
const chat_id = process.env.TELEGRAM_USER_ID;

export const sendNotification = async (text, parse_mode) => {
    const endpoint = `https://api.telegram.org/bot${telegramBotKey}/sendMessage`;
    await makePostRequest(endpoint,
        {
            text,
            parse_mode,
            chat_id
        });
};

The sendNotification function takes the text of the notification and the mode which Telegram should use in parsing it. For this guide, we will use HTML formatted text. You can read more about formatting options for Telegram messages here.

Next, create a new file called objectFormat.js in the utility directory. This file will contain a helper function that we can use to generate the appropriate HTML formatted text for Telegram requests based on the provided object. In this file, add the following code.

const capitalize = (input) =>
    `${input.charAt(0).toUpperCase()}${input.slice(1)}`;

const capitalizeKey = (input) =>
    input.split(/(?=[A-Z])/).map(word => capitalize(word)).join(' ');

const newLineToken = '\n';

const lineBreak = newLineToken.repeat(2);

const formatTitle = title => `<b><i>${title}</i></b>`;

const formatArray = childArray =>
    childArray.map((child, index) => `${index + 1}. ${child}`).join(newLineToken);

const formatEntry = ([key, value]) => {

    const formattedTitle = formatTitle(capitalizeKey(key));
    const formattedBody = Array.isArray(value) ? formatArray(value) : value;

    return `${formattedTitle}${newLineToken}${formattedBody}`;
};

export const toHtmlFormat = (title, body) => {

    const formattedTitle = formatTitle(title);
    const formattedBody = Object.entries(body).map(formatEntry).join(lineBreak);

    return `${formattedTitle}${lineBreak}${formattedBody}`;
};

The toHtmlFormat function takes the title (the content of the first line of the formatted text) and the body (which is an object). It maps through the object, capitalises the object keys, and then returns the key formatted as a title and the value of the object underneath.

If the value of a key is an array, the formatArray function is used to iterate through each member of the array and format each child. This function is naive in the sense that it assumes that the array provided is comprised only of strings.

Next, create a new file called dateFormat.js in the utility directory. This file will contain a helper function that will allow us to present dates in a human-readable format. In it add the following code.

export const formatDate = date =>
    new Date(date).toLocaleString('en-GB', {
        month: 'long',
        weekday: 'long',
        day: 'numeric',
        year: 'numeric'
    });

Finally, we need helper functions to ease the interaction with our Sanity backend as well as provide assistance with Sanity image resources and portable text serialisation. Create a new file called sanity.js in the utility directory. In it, add the following code.

import {createClient, createImageUrlBuilder, createPortableTextComponent,} from "next-sanity";

const config = {
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
    useCdn: process.env.NODE_ENV === "production",
    apiVersion: '2021-10-12' 
};

if (!config.projectId) {
    throw Error("The Project ID is not set. Check your environment variables.");
}

if (!config.dataset) {
    throw Error("The dataset name is not set. Check your environment variables.");
}

export const urlFor = (source) => createImageUrlBuilder(config).image(source);

export const PortableText = createPortableTextComponent({
    ...config,
    serializers: {},
});

export const sanityClient = createClient(config);

The urlFor helper function will be used for generating image URLs with only the asset reference data in your documents.

The PortableText constant returns a component that we can use to render block content from Sanity Studio. In this guide, we'll be using it to render the overview of a movie.

The sanityClient is used for fetching data in the getProps page functions.

With our Utility functions in place, let's build our components.

Build page components

Build the `MovieCard` component

In the components directory, create a new file called MovieCard.js. When we display the movies in a grid, each movie will be rendered with the MovieCard component. In the components/MovieCard.js file, add the following.

import React from "react";
import {Box, Image} from "@chakra-ui/react";
import {urlFor} from "../utility/sanity";
import Link from 'next/link';
import {formatDate} from "../utility/dateFormat";

const MovieCard = ({_id, title, poster, releaseDate, slug}) => {

    return (
        <Link href={`/movies/${slug.current}`}>
            <a>
                <Box
                    maxW="sm"
                    borderWidth="1px"
                    borderRadius="lg"
                    overflow="hidden"
                >
                    <Image
                        src={urlFor(poster).width(300).height(300)}
                        alt={`${title} movie poster`}
                    />
                    <Box p='6'>
                        <Box
                            mt="1"
                            fontWeight="semibold"
                            as="h3"
                            isTruncated
                        >
                            {title}
                        </Box>

                        <Box
                            color="gray.500"
                            fontWeight="semibold"
                            letterSpacing="wide"
                            fontSize="xs"
                        >
                            Released on {formatDate(releaseDate)}
                        </Box>
                    </Box>
                </Box>
            </a>
        </Link>
    );

};

export default MovieCard;

This component destructures the movie which it receives as a prop and renders the movie poster (using the urlFor helper function we created earlier), the title, and the release date (formatted using the formatDate helper function we created earlier).

Build the `MoviesPage` component

In the components directory, create a new file called MoviesPage.js and add the following code to it.

import React from "react";
import {SimpleGrid} from "@chakra-ui/react";
import MovieCard from "./MovieCard";

const MoviesPage = ({movies}) => {

    return (
        <SimpleGrid columns={4} spacing={20} padding='10'>
            {movies.map(movie => (
                <MovieCard key={movie._id} {...movie}/>
            ))}
        </SimpleGrid>
    );

};

export default MoviesPage;

This component renders the movies passed as a prop in a grid with 4 columns. Each movie is rendered using the MovieCard component we created earlier.

Build the `Team` component

In the components directory, create a new file called Team.js. This component will be used to render teams (either the crew members or the cast of a movie). Add the following code to the component.

import React from "react";
import {urlFor} from "../utility/sanity";
import {Box, Image, SimpleGrid} from "@chakra-ui/react";

const Team = ({members, isCast}) => {

    const defaultImageUrl = "https://bit.ly/3aUzAKZ";

    return (
        <SimpleGrid columns={3} spacing={10} padding='5'>
            {members.map(member => {
                const {name, _key, image} = member.person;
                const imageUrl = image ? urlFor(image).width(50).height(50) :
                    defaultImageUrl;
                const extra = isCast ? member.characterName : member.job;

                return (
                    <Box key={_key}>
                        <Image
                            src={imageUrl}
                            alt={`${name}`}
                            w={50}
                            h={50}
                        />
                        <Box key={1}>{name}</Box>
                        <Box
                            key={2}
                            color="gray.500"
                            fontWeight="semibold"
                            letterSpacing="wide"
                            fontSize="xs"
                        >
                            {extra}
                        </Box>
                    </Box>
                )
            })}
        </SimpleGrid>
    );

};

export default Team;

The Team component takes two props - the members of the team and a boolean variable named isCast which represents whether or not the team to be rendered is the cast of the team.

Build the `MoviePage` component

In the components directory, create a new file called MoviePage.js and add the following code to it. This should not be confused with the MoviesPage.js component we built earlier. This component is rendered when a movie card is clicked. It takes a movie as a prop and renders the movie details. It also adds a button which when clicked, shares the movie details via Telegram.

import React, {useState} from "react";
import {
    Alert,
    AlertIcon,
    Box,
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    Button,
    Center,
    CloseButton,
    Heading,
    Image,
    Stack
} from "@chakra-ui/react";
import {PortableText, urlFor} from "../utility/sanity";
import Link from 'next/link';
import Team from "./Team";
import {toHtmlFormat} from "../utility/objectFormat";
import {formatDate} from "../utility/dateFormat";
import {makePostRequest} from "../utility/api";

const MoviePage = ({movie}) => {
    const [shouldShowAlert, setShouldShowAlert] = useState(false);
    const [alertContent, setAlertContent] = useState(null);

    const hideAlert = () => {
        setAlertContent(null);
        setShouldShowAlert(false);
    };

    const formattedReleaseDate = formatDate(movie.releaseDate);

    const getDetailsFromCastMember = ({characterName, person}) =>
        `${person.name} as ${characterName}`;

    const getDetailsFromCrewMember = ({job, person}) =>
        `${person.name} - ${job}`;

    const sendMovieInfoToUser = async () => {
        const {cast, crew, popularity, overview, title} = movie;
        const detailsToSend = {
            releaseDate: formattedReleaseDate,
            cast: cast.map(getDetailsFromCastMember),
            crew: crew.map(getDetailsFromCrewMember),
            popularity,
            summary: overview[0].children[0].text
        };

        const response = await makePostRequest("/api/share", {
            text: toHtmlFormat(title, detailsToSend),
            parseMode: 'html'
        });

        setAlertContent(response.message);
        setShouldShowAlert(true);
        setTimeout(hideAlert, 3000);
    }

    return (
        <Stack spacing={3} padding='10'>
            {shouldShowAlert && (
                <Alert status="success">
                    <AlertIcon/>
                    {alertContent}
                    <CloseButton
                        position="absolute"
                        right="8px"
                        top="8px"
                        onClick={hideAlert}
                    />
                </Alert>
            )}

            <Box maxW="3xl" borderRadius="lg" overflow="hidden">
                <Breadcrumb>
                    <BreadcrumbItem>
                        <Link href="/">
                            <BreadcrumbLink>Movies</BreadcrumbLink>
                        </Link>
                    </BreadcrumbItem>

                    <BreadcrumbItem isCurrentPage>
                        <Link
                            href={`/movies/${movie.slug.current}`}
                        >
                            <BreadcrumbLink>{movie.title}</BreadcrumbLink>
                        </Link>
                    </BreadcrumbItem>
                </Breadcrumb>

                <Center>
                    <Heading as='h1'>{movie.title}</Heading>
                </Center>

                <Center>
                    <Box p='6'>
                        <Image
                            src={urlFor(movie.poster).width(300).height(300)}
                            alt={`${movie.title} movie poster`}
                        />

                        <Center mt={2}>
                            <Box>
                                <Box
                                    color="gray.500"
                                    fontWeight="semibold"
                                    letterSpacing="wide"
                                    fontSize="xs"
                                >
                                    Released on {formattedReleaseDate}
                                </Box>

                                <Box
                                    color="gray.500"
                                    fontWeight="semibold"
                                    letterSpacing="wide"
                                    fontSize="xs"
                                >
                                    Popularity: {movie.popularity}
                                </Box>

                                <Center>
                                    <Button
                                        colorScheme="teal"
                                        variant="outline"
                                        mt='1'
                                        onClick={sendMovieInfoToUser}
                                    >
                                        Share details via Telegram
                                    </Button>
                                </Center>
                            </Box>

                        </Center>

                    </Box>
                </Center>

                <Box>
                    <Heading as='h3' size='lg'>Overview</Heading>
                    <PortableText blocks={movie.overview}/>
                </Box>

                <Box pt='10'>
                    <Heading as='h3' size='lg'>Cast</Heading>
                    <Team members={movie.cast} isCast={true}/>
                </Box>

                <Box pt='10'>
                    <Heading as='h3' size='lg'>Crew</Heading>
                    <Team members={movie.crew} isCast={false}/>
                </Box>

            </Box>
        </Stack>
    );

};

export default MoviePage;

Build the `Share` endpoint

In the MoviePage component, we make a request to api/share to send the movie details, let's create a handler for this endpoint. We can do this in our current project as Next.js provides a solution for us to build APIs with it.

In the pages/api folder, create a new file called share.js. In it, add the following code.

import {sendNotification} from "../../utility/telegram";

const handler = async (request, response) => {
    switch (request.method) {
        case "POST":
            const {text, parseMode} = request.body;
            await sendNotification(text, parseMode);
            response.status(200)
                .json({message: 'Details shared successfully'});
            break;
        default:
            response.status(405)
                .end("This method is not allowed for this route.");
    }
};

export default handler;

This route only accepts POST requests. When such a request is received, we retrieve the text and parse mode from the request, and using the sendNotification helper function we declared earlier, we send the details to our Telegram bot and eventually us!!

Build pages

The last thing to do is build the pages for the application. The application will have two pages - the index page which shows all the movies and the movie page which displays the information for a single movie.

Update the pages/index.js file to match the following.

import {sanityClient} from "../utility/sanity";
import MoviesPage from "../components/MoviesPage";
import {groq} from "next-sanity";

const query = groq`*[_type == "movie" && defined(slug.current)]`;

const Home = ({movies}) => {
    return (
        <MoviesPage movies={movies}/>
    )
}

export const getStaticProps = async () => {
    const movies = await sanityClient.fetch(query);
    return {
        props: {
            movies,
        },
    };
}

export default Home;

In the getStaticProps we fetch all the movies with a defined slug from the backend, this is passed as a prop the MoviesPage component we created earlier.

Next in the pages directory, create a new folder called movies. In the movies folder, create a new file called [slug].js. By taking advantage of Next.JS's file-based router system, this folder and file naming structure will allow us requests to the URL /movies/{slug} where slug corresponds to the slug of the selected movie. Add the following code to pages/movies/[slug].js.

import {sanityClient} from "../../utility/sanity";
import {groq} from "next-sanity";
import {useRouter} from "next/router";
import Error from "next/error";
import MoviePage from "../../components/MoviePage";

const query = groq`*[_type == "movie" && slug.current == $slug][0]{
  releaseDate, overview, popularity, poster, title, slug,
  'crew': crewMembers[]{_key, department, job, person->{_id, name, image}},
  'cast': castMembers[]{_key, characterName, person->{_id, name, image}}
}`;

const MoviePageContainer = ({movie}) => {
    const router = useRouter();
    if (!(router.isFallback || movie?.slug)) {
        return <Error statusCode={404}/>;
    }

    return <MoviePage movie={movie}/>;
};

export const getStaticProps = async ({params}) => {
    const movie = await sanityClient.fetch(query, {
        slug: params.slug,
    });

    return {
        props: {movie},
    };
}

export const getStaticPaths = async () => {
    const paths = await sanityClient.fetch(
        `*[_type == "movie" && defined(slug.current)][].slug.current`
    );

    return {
        paths: paths.map((slug) => ({params: {slug}})),
        fallback: true,
    };
}

export default MoviePageContainer;

With that in place, our application is ready to go! Run the application using the following command.

npm run dev

Navigate to http://localhost:3000/ to see your application in action.

Click on a movie card to display more details of the movie and you can also send the details to yourself via Telegram. Nice!!!

Conclusion

In this guide, we saw how telegram can be integrated into a react app, walking through the process of creating a bot to sending a message to a telegram user via the Telegram Bot API. We also saw how to connect our application to Sanity studio for content management.

Sending notifications is just a tip of what developers can take advantage of. Telegram also offers tdlib (Telegram Database Library), a cross-platform, fully functional Telegram client which allows anyone to build their own custom messaging apps operating in the Telegram cloud.

The code for the complete project is available on Github should you get stuck at any point.

How to use SVGs in React

Derek Nguyen — Fri, 05 Nov 2021 17:43:48 +0000

This article will explore how to use SVG in React in three examples:

A loading icon
A hover text effect
A pizza customizer

SVG is an incredible format. Not only is it a lightweight, infinitely scalable alternative to raster images, it can also be styled, animated with CSS when embedding inline in HTML. SVGs can be used everywhere:

icons, animated icons
favicons
special text effects
a lightweight blurred placeholder for lazy-loaded images
data visualization
3d graphics

How to use SVG in React

There are a few ways to use an SVG in a React app:

Use it as a regular image
Import it as a component via bundler magic (SVGR)
Include it directly as JSX

Let's quickly go over each of them.

Use SVGs as regular images

SVGs can be used as an image, so we'd treat them as any other image resource:

<img src="/path/to/image.svg" alt="SVG as an image">

Note: A few meta frameworks handle this out-of-the-box, such as Gatsby & Create React App.

In Webpack 5, this is (surprisingly) simple to setup. Parcel 2 handles this out of the box with a special import prefix. Rollup has an official plugin.
import mySvg from './path/to/image.svg'

Pros:

Straightforward

Cons:

SVG can't be customized

Use case: Simple replacement for raster images that don't need customization, e.g., logos.

Import SVGs as components via bundler magic

When importing an SVG as a component, we can inline SVGs directly in our markup & use them as a component.

import { ReactComponent as IconMenu } from './icons/menu.svg'

export const ButtonMenu = ({ onClick }) => {
  return (
    <button onClick={onClick}>
        <span>Open Menu</span>
        <IconMenu width="1rem" />
    </button>
  )
}

SVGR is the library that powers this ability. Setting it up could be a little hairy, thankfully many popular frameworks (Create React App, Gatsby) support this feature out of the box.

Pros:

Easy to handle a large amount of SVG
Powerful templating

Cons:

May need additional configuration
Writing React component template is not straightforward

Use case: A custom SVG icon library

Include SVGs directly in JSX

JSX supports all SVG tags. We can (almost) paste the SVG directly into our React components!

This is the most straightforward method to take full advantage of SVG without bundler support, which is why we will use this method for all of our examples later in this article.

The only gotcha is that instead of regular HTML attributes, we have to use JS property syntax, e.g stroke-width -> strokeWidth

// fun fact: `viewBox` has always been camel-cased.
export const LoadingIcon = () => {
  return (
    <svg
      viewBox="0 0 24 24"
      xmlns="<http://www.w3.org/2000/svg>"
    >
      <path strokeWidth="2" stroke="tomato" d="M10...">
    </svg>
  )
}

Pros:

Straightforward

Cons:

Depending on the SVG, component code may not readable
Not scalable for a large number of SVGs

Use case: One-off graphic such as illustration, blog header

SVGs & React in practice

This article will not be completed if we don't at least show off a few SVG tricks. In the following examples, we will explore what makes SVGs awesome.

Prerequisite

All examples will use create-react-app (CRA) and CSS Module. A way to start a CRA project is using codesandbox. Otherwise, make sure Node is installed (any TLS versions will do) and run this:

npx create-react-app my-app && cd my-app

Example 1: A Loading Icon

Here's what we'll be making:

Let's try writing this SVG from scratch. All we need is one circle. This is the SVG in its entirety:

const LoadingIcon = () => {
  return (
    <svg
      viewBox="0 0 24 24"
      xmlns="<http://www.w3.org/2000/svg>"
    >
      <circle
        cx="12" cy="12" r="8"
        stroke-width="4" stroke="tomato"
        fill="none"
      />
    </svg>
  )
}

Now let's make it move! We can now attach class names to SVG elements and animate them with CSS transform & animation.

Animating paths is a classic SVG trick, and it's all about stroke-dasharray. This property creates dashed lines, like in the image below:

Nothing too exciting. However, things get more interesting when you realize that these dashes can be offset. What if, instead of many short dashes, we have a single dash whose length is the same as the circle's circumference? We can then move that dash around by changing the offset, giving the appearance that the path is being shortened or lengthened.

Let's give it a try:

.main {
  stroke-dasharray: 50;
  stroke-dashoffset: 0;
  animation: load 5s linear infinite;
  transform-origin: center;
}

@keyframes load {
  0% {
    stroke-dashoffset: 50;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -50;
  }
}

Setting stroke-dashoffset to a negative value pushes the path further down & create the looping effect.

Note: 50 is roughly the circumference of the circle and for our use case we don't ever need to change that value. In other cases, we might need to calculate the exact number:
const $circle = document.querySelector('.main')
const radius = $circle.r.baseVal.value
const circumference = Math.PI * 2 * radius

Finally, to make the animation more dynamic, let's also rotate the circle.

@keyframes load {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: 50;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(360deg);
    stroke-dashoffset: -50;
  }
}

prefers-reduced-motion

Loading icons typically doesn't have the type of animations that could cause issues. However, for a larger graphic with lots of animation, it's a good practice to provide a more gentle animation. In our case, we can extract the animation duration into a CSS variable & define a larger value inside of the prefers-reduced-motion media tag.

/* simple-icon.module.css */

.svg {
  /* ... */
  --speed: 5s;
}

@media (prefers-reduced-motion: reduce) {
  .svg {
    --speed: 10s;
  }
}

.path {
  /* ... */
  animation: load var(--speed, 5s) linear infinite;
}

Customize with React

Now let's make the icon customizable. We want to allow users to change color & thickness.

import styles from "./simple-icon.module.css";

export const SimpleLoadingIcon = ({
  color = "currentColor",
  thickness = 2
}) => (
  <svg
    className={styles.svg}
    viewBox="0 0 24 24"
    xmlns="<http://www.w3.org/2000/svg>"
  >
    <circle
      className={styles.path}
      cx="12"
      cy="12"
      r="8"
      strokeLinecap="round"
      strokeWidth={thickness}
      stroke={color}
      fill="none"
    />
  </svg>
);

If color is unset, the stroke color will inherit from its parent.

Accessibility

Since our loading icon does not contain any text, we should give it a

so a screen reader can make sense of it. To dive deeper into accessibility with SVGs, CSS Tricks cover this topic extensively.

<svg aria-labelledby="svg-icon-loading">
  <title id="svg-icon-loading">Loading</title>
  ...
</svg>

Now that we have a title, a tooltip will show up when the cursor hovers over the SVG. If that seems unnecessary, we can get rid of it by adding pointer-events: none to SVG's style.

Result

And with that, we can now use this loading icon anywhere! This demo below contains a slightly more complex version of the icon above.

Example 2: Special Text Effect

SVG can do wild things with text, but let's start with something simple. Like the previous example, we will start with just the SVG and then bring things up a notch with React.

The graphic we'll be working with is rather long, but here's the main parts:

const Graphic = () => {
  return (
    <svg viewBox="0 0 600 337">
      <defs>
        <linearGradient id="gradient"> /* ... */
        </linearGradient>
      </defs>

      <text x="20" y="1.25em">
        <tspan>Using SVGs</tspan>
        <tspan x="20" dy="1em">in React</tspan>
      </text>
    </svg>
  )
}

SEO Concerns

We can nest this SVG inside heading tags. It is valid HTML (test it with the w3c validation tool) and screen readers can pick up the text inside.

SVG assets

Let's look at the parts. <defs> is SVG's compartment where we can put stuff for later use. That can be shapes, paths, filters, and gradients, such as in the SVG above. True to the compartment analogy, browsers will not render elements placed inside a <def> block.

If we want to apply the defined gradient to the text object, we can reference its id with the following syntax:

<text x="20" y="1.25em" fill="url(#gradient)">
  <tspan>Using SVGs</tspan>
  <tspan x="20" dy="1em">in React</tspan>
</text>

Sweet! But we can achieve this effect in modern CSS as well. So let's see what else SVG can do.

Creating outline text is relatively easy with SVG: just change fill to stroke, and the gradient will still be applied.

<text x="20" y="1.25em" stroke="url(#gradient)">
  <tspan>Using SVGs</tspan>
  <tspan x="20" dy="1em">in React</tspan>
</text>

And better yet, that gradient can be animated.

Try to do that, CSS!

The syntax for creating SVG gradient animation is quite verbose, unfortunately.

<linearGradient id="gradient" x1="50%" y1="0%" x2="50%" y2="100%">
  <stop offset="0%" stop-color="plum">
    <animate
      attributeName="stop-color"
      values="plum; violet; plum"
      dur="3s"
      repeatCount="indefinite"
    ></animate>
  </stop>

  <stop offset="100%" stop-color="mediumpurple">
    <animate
      attributeName="stop-color"
      values="mediumpurple; mediumorchid; mediumpurple"
      dur="3s"
      repeatCount="indefinite"
    ></animate>
  </stop>
</linearGradient>

Let's make something even cooler. How about this XRay hover effect?

The trick here is to use text as a clipping path. We can then animate a circle clipped inside the text as we move the cursor in React.

We'll create a new element called clip-path (clipPath in JSX land) in <defs>, and place <text> into it. This serves two purposes: so we can (1) use the text as a mask and (2) clone it to create the outline effect by using <use>.

<svg>
  <defs>
    <clipPath id="clip-text">
      <text id="text" x="20" y="1.25em">
        <tspan>Using SVGs</tspan>
        <tspan x="20" dy="1em">
          in React
        </tspan>
      </text>
    </clipPath>
  </defs>
  {/* this circle visible to viewer. */}
  <circle ... />

  <use href="#text" stroke="url(#gradient)" />

  {/* this circle is clipped inside the text. */}
  <g clipPath="url(#clip-text)">
    <circle ... />
  </g>
</svg>

So far, we've been using url(#id) to refer to gradients & clipping paths placed inside of the <defs> block. For shapes and text, we'll need to use a tag: <use>, and the syntax is slightly different:

<use href="#id" stroke="..." fill="..." />

The referenced text can still be customized by adding attributes to the use tags. <use> is really cool & we'll see in the last example how it can be used to nest external SVGs.

SVG's coordinate systems

One of the pain points of using SVG is its coordinate system. If we naively implement the function like this:

window.addEventListener('mousemove', (e) => {
  $circle.setAttribute('cx', e.clientX)
  $circle.setAttribute('cy', e.clientY)
})

We'll quickly find out that the cursor position does not match up with the circle inside the SVG. The circle's unit is relative to its containing SVG's viewBox.

For this reason, we'll implement a simple script that'll translate the position correctly.

const svgX = (clientX - svgElementLeft) * viewBoxWidth / svgElementWidth
const svgY = (clientY - svgElementTop) * viewBoxHeight / svgElementHeight

Move the circle with React

We'll need to move two circles, so let's attach some refs.

import { useRef, useEffect } from "react";

export const Graphic = () => {
  const innerCircleRef = useRef(null)
  const outerCircleRef = useRef(null)

  useEffect(() => {
    const $innerCircle = innerCircleRef.current
    const $outerCircle = outerCircleRef.current
    if (!$innerCircle || !$innerCircle) return

    const handleMouseMove = (e) => {
      const { clientX, clientY } = e
      /* Translate coordinate from window to svg, omitted for brevity */
      const [x, y] = translateCoords(clientX, clientY)
      $innerCircle.setAttribute('cx', x)
      $innerCircle.setAttribute('cx', y)
      $outerCircle.setAttribute('cx', x)
      $outerCircle.setAttribute('cx', y)
    }

    window.addEventListener("mousemove", handleMouseMove)
    return () => {
      window.removeEventListener("mousemove", handleMouseMove)
    }
  })

  return (
    <svg>
      {/* ... */}
      <circle ref={outerCircleRef} />
      {/* ... */}
      <g clipPath="url(#text)">
        <circle ref={innerCircleRef} />
      </g>
    </svg>
  )
}

Note: the code for translating position has been omitted for clarity. See the codesandbox below for a complete source.

Result

Check out the final product in this Codesandbox demo. See if you can find a hidden message!

Example 3: Pizza Customizer

In this example, let's explore how we can compose an SVG on the fly with React! A local pizzeria knocks on the door and asks if we could build them a fun graphic for their online ordering site. Of course, we say yes.

Prerequisite

We'll need Sanity Studio for this example. Let's use the following structure:

pizza-sanity
  ├── frontend <create-react-app>
  └── studio <sanity studio>

Follow the steps below to install & initiate a new create-react-app project:

cd frontend
npx create-react-app .

While waiting for the script to load, let's initiate the studio:

cd ../studio
npm install -g @sanity/cli
sanity init
# after signing in, answer the questions as below
? Select project to use 
❯ Create new project
? Your project name
❯ Sanity Pizza
? Use the default dataset configuration?
❯ Yes
? Project output path
❯ /Users/me/Documents/sanity-pizza/studio
? Select project template
❯ Clean project with no predefined schemas

When that's all done, we'll also want to add CRA's development host to the project's CORS allowed list.

sanity cors add http://localhost:3000 --credentials

See the getting started guide for further information. If you'd like a reference, see the project on Github.

Writing the schema

Toppings can be placed on different pizzas, so we could have two types of documents: toppings and pizzas, containing many other toppings.

Sanity allows us to create schema in code, making it powerful & flexible, but simple to get started. In schemas directory, create a new files:

/* schemas/pizza.js */

export const topping = {
  type: 'document',
  name: 'topping',
  title: 'Topping',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
      validation: Rule => Rule.required().min(2),
    },
    {
      title: 'SVG',
      name: 'svg',
      type: 'text',
      validation: Rule => Rule.required().min(2),
    },
    fieldSize,
  ],
}

export const pizza = {
  type: 'document',
  name: 'pizza',
  title: 'Pizza',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
      validation: Rule => Rule.required(),
    },
    {
      title: 'Base Pizza',
      name: 'svg',
      type: 'text',
      validation: Rule => Rule.required(),
    },
    fieldSize,
    {
      title: 'Toppings',
      name: 'toppings',
      type: 'array',
      of: [{
        type: 'reference',
        to: [{ type: topping.name }]
      }],
      validation: Rule => Rule.required().min(2),
    }
  ]
}

Note that inside of the pizza document type, we create an array of references to the available toppings.

For the topping itself, we create a text field where editors can paste the SVG graphic.

Why not upload SVG as an image?
It's possible to reference external SVGs (and leverage browser cache!). However, it won't be stylable in CSS as inlined SVG. Depending on the use case, external SVG could be the better choice.

In Sanity Studio, there should be a schemas/schema.js file. Let's add the document types we've specified above.

import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'
import { pizza, topping } from './pizza'

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    topping,
    pizza
  ]),
})

Now that all the SVGs are placed in the Studio, it's time to build the React app. We'll use picosanity, a smaller Sanity client.

npm i picosanity

Make a client.js file and create the Sanity client:

import PicoSanity from 'picosanity'

export const client = new PicoSanity({
  projectId: '12345678',
  dataset: 'production',
  apiVersion: '2021-03-25',
  useCdn: process.env.NODE_ENV === 'production',
})

Then we can import it into our React app and use it to fetch data. For simplicity, let's fetch in useEffect and store the data inside of a useState.

import { useState, useEffect } from 'react'
import { client } from './client'

const App = () => {
  const [data, setData] = useState(null)
  useEffect(() => {
    const getPizzaData = () => {
      client.fetch(`
        *[_type == "pizza"] {
          ...,
          toppings[] -> {
            _id,
            title,
            svg,
            size,
          }
        }
      `)
    }

    getPizzaData.then(data => setData(data))
  })

  return ( /* ... */ )
}

This will yield the following data:

[
  {
    _id: "2b2f07f0-cfd6-4e91-a260-ca30182c7736",
    _type: "pizza",
    svg: "<svg ...",
    title: "Pepperoni Pizza",
    toppings: [
      {
        _id: "92b5f3f1-e0af-44be-9575-94911077f141",
        svg: "<svg ...",
        title: 'Pepperoni'
      },
      {
        _id: "6f3083f3-a5d5-4035-9724-6e774f527ef2",
        svg: "<svg ...",
        title: 'Mushroom'
      },
    ]
  }
]

Let's assemble a pizza from the topping SVG and the pizza's base SVG. This is where <symbol> comes in handy.

export const Pizza = ({ data }) => {
  const { _id, svg: baseSvg, toppings } = data
  return (
  <svg>
    {/* create a symbol for each topping */}
    {toppings.map(({ _id: toppingId, svg }) => (
      <symbol key={toppingId} id={toppingId} dangerouslySetInnerHTML={{ __html: svg }} />
    ))}

    <g dangerouslySetInnerHTML={{ __html: baseSvg }} />
    {/* use them */}
    {toppings.map(({ _id: toppingId }) => {
      return (
        <use key={_id} href={`#${toppingId}`} />
      )
    })}
  </svg>
  )
}

Symbols are hidden by default and can be created with <use>. We can still apply transform as with a standard SVG element. This is also how SVG sprite works.

Add customizer

We'll add a slider for each topping and once again simply use useState to store users' inputs in an object.

import { useState } from 'react'

export const Pizza = ({ data }) => {
  const { _id, svg: baseSvg, toppings } = data
  const [ config, setConfig ] = useState({})
  const handleChangeFor = (toppingId) => (value) => {
    setConfig(config => ({
      ...config,
      [toppingId]: value
    }))
  }

  return (
    <section>
      <svg>{ /* ... */ }</svg>
      <form>
        {toppings.map(topping => (
          <div key={topping._id}>
            <label htmlFor={topping._id}>{topping.title}</label>
            <input
              type="range"
              value={config[topping._id] || 0}
              onChange={handleChangeFor(topping._id)}
            />
          </div>
        ))}
      </form>
    </section>
  )
}

Randomizer

The most challenging part of this exercise is placing the toppings on top of the pizza. It turns out that just placing each topping at a random position does not create a very appetize-looking pizza!

We want to place the toppings evenly. Thankfully geometry nerds have already figured this out ages ago! Vogel spiral to the rescue. Read more about it here.

So far, so good. Let's give each topping a random rotation and vary its scale slightly, so the pizza looks more natural.

However, as soon as we add the transformation, the pizza becomes a mess. Here's what we're missing: instead of rotating from the center of itself, each topping's SVG is rotating from the center of its containing SVG (the pizza.) To fix this, we need to add the following CSS to each use element:

use {
  transform-origin: center;
  transform-box: fill-box;
}

Note: The order of transformation matter. We have to apply translate before scale or rotate to keep the SVG in the intended position.

With that, we now have a decent pizza customizer!

Animate with react-spring

So far, we've been relying on CSS for animation, but CSS can only take us so far. Let's create an animation where toppings fall onto the pizza whenever users update their order.

Let's use react-spring to create a simple animation.

Note: using hook throws an error with <use/> for some reasons, so I'm using react-spring's render props API instead.

npm i react-spring

Now it's a good time to extract into its component & add the animation there.

import { Spring, config } from 'react-spring/renderprops'

export const UseTopping = ({
  size,
  toppingId,
  x,
  y,
  i,
  rotation,
  scale
}) => {
  return (
    <Spring
      from={{ y: y - 40, opacity: 0 }}
      to={{ y, opacity: 1 }}
      delay={i * 15}
      config={config.wobbly}
    >
      {props => <use
        className={styles.topping}
        href={`#${toppingId}`}
        opacity={props.opacity}
        style={{
          transform: `
            translate(${x}px, ${props.y}px)
            scale(${scale})
            rotate(${rotation}deg)
          `
        }}
      />}
    </Spring>
  )
}

Result

Play with the final demo here! The source code is available on Github.

d4rekanguok / sanity-pizza

Wrapping Up

We haven't scratched the surface of SVG coolness. However, SVG is not without flaws:

Verbose syntax
Texts inside SVG do not flow like in HTML. Break text manually into works for one-off graphics, but it is not scalable.
Position & coordinate could be tricky
When animating complex SVGs, performance could be an issue

However, SVGs can enrich our React websites and applications with little effort with the right use case.

Add Alpine.js to your Node Application

Chimezie Enyinnaya — Thu, 28 Oct 2021 17:34:24 +0000

Introduction to Alpine.js

Alpine.js is a modern, small and lightweight, CDN-first JavaScript framework for composing JavaScript behavior in your markup. It borrows its concepts from other frameworks like Vue, React, and jQuery. Think of it like Tailwind for JavaScript in the sense that it allows you to write most of your JavaScript inline in your HTML, making it easier to write declarative code.

Alpine.js is not designed to build SPAs, but rather to enhance your templates with a little bit of JavaScript. Alpine.js is designed to be used as a direct script include from a public CDN.

The main power of Alpine.js is its reactive nature. You use its directives to bind data and any changes made to it reverberate in the whole app regardless of the level of the emanation. Alpine.js is more like a UI interaction framework.

Alpine.js is also a DOM manipulation library. It makes it easy for us to interact with the DOM in a declarative way with lesser code.

Why choose Alpine.js

According to the creator, Caleb Porzio:

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM and sprinkle in behavior where it is needed.

Alpine.js works well when you need a small amount of JavaScript, e.g. a few drop-downs or tabs. This means you get a bunch of power at a crazy small size with no need to npm install.

So, here are some reasons why you should consider using Alpine.js:

Size: In the introduction, I stated that Alpine.js is small and lightweight. It has the power of big frameworks yet has a small bundle size. Alpine.js comes in at 21.9kB minified and 7.1kB gzipped, compared to jQuery at 87.6kB minified and 30.4kB minified and gzipped. Only 23% the size!
Installation and learning: Installing Alpine is pretty straightforward. You’ll just need to add a script tag linking the library. That’s it. Really. You don’t need to compile your JavaScript or structure your project in any specific way; this makes it the perfect candidate for integration with existing projects*.* You also have an npm package available if your project is already using npm.

Its learning curve is also very low. The concepts and syntax behind the framework are heavily inspired by Vue.js. If you’re coming from a Vue background, you’ll most likely feel at home working with Alpine.js.

Basic syntax

Alpine.js syntax is very much inspired by Vue. Like Vue, Alpine uses an x- prefix on all its directives. Unlike Vue, Alpine.js doesn’t use a virtual DOM, so we get to work with the actual DOM directly. Alpine.js currently has 15 directives and 6 magic properties that become building blocks for many user interface scenarios. These directives allow you to do most of the things you would do with a more robust framework like templating, view/model data binding, UI transitions, and simplified event handling, all in a tiny package and directly in your HTML.

Let's go over a few directives:

x-data

Example:

<div x-data="[JSON data object]"></div>

This directive declares a new component scope. It tells the framework to initialize a new component with the following data object. Think of it as the data property of a Vue component. Only children of an element can access the x-data value declared on the element. Sibling elements, adjacent elements cannot access it.

x-show

Example:

<div x-show="[expression]"></div>

This directive toggles the visibility of components. It works the manipulating the CSS display style property of the element. The directive takes an expression, and the expression must resolve to a boolean value(true/false). If true, the element is shown by setting its CSS display property to a value other than none. If false, the display property of the element is set to none.

x-bind

Example

<div x-bind:[attribute]="[expression]" > ...<div>

This directive is used to set the value of an element's attribute. The expression is evaluated and the results of the evaluation become the value of the specified attribute.

x-text

Example

<div x-text="[expression]" >...<div>

This directive is used to set the inner text node of an element. The directive uses the innerText DOM property on the element to achieve this.

x-if

Example

<template x-if="[expression]"><div>...</div></template>

This directive conditionally renders elements based on the condition of their expression. If the condition is true, the element is visible. If the condition is false, the element is not visible. x-if does not use the display property for its conditional rendering, it removes or adds the elements to the DOM. Alpine.js says it is best to use the x-if directive in tags, this is because Alpine.js uses the real DOM, not a virtual DOM.

x-for

Example

<template x-for="[data] in [data]"><div>...</div></template>

This directive is used to iterate over the items in an array and create new DOM nodes for each item. Just like x-if, x-for is used in the template tag.

x-on

Example

<div x-on:[event]="[expression]"></div>

This directive attaches event listeners to the element it is set upon. When the event is emitted the JavaScript expression in the directive is run.

x-model

Example

<div x-model="[data item]"></div>

This directive is used for two-way binding. Most especially used in the input elements. What is two-way binding? A bound variable in the HTML view can be changed from the script and also from the HTML view. From either side the change occurred, both the script side and HTML view bound-data are updated.

To learn more about Alpine.js directives and Alpine.js as a whole, check out the documentation. We will use it in building our components much later.

Setting up the sanity schema and studio

First of all, create a new project, you can either create a new project in your terminal by this command:

sanity init

or from the official website https://sanity.io/get-started.

In this tutorial, we will be using the Sanity CLI. If you don’t have it installed already, you can set it up globally on your local machine.

npm install -g @sanity/cli

Proceed to create a new project, using:

sanity init

To create a new project, you need a Sanity.io account and you will be prompted to log in or create a new account, simply follow the instructions to set it up.

After successful authentication, you can then set a project name and use the default dataset configuration if you want to and confirm the project path.

The next option is quite important, you decide to use a project template with schema and sample data or start a clean project with no predefined schema. Here, I will be choosing the movie project template so we can use the data that comes with it.

Once we get a success message, we can then proceed to work on our schema for the project. Open the folder in your code editor and run the sanity studio in your terminal,

sanity start

This will open up the studio in our browser on http://localhost:3333/. You will be required to log in again.

We now have data from the movie project we started with and it already has 3 schemas.

What if we started with a clean project without a schema? Let’s create a new schema so we can learn how it is done.

Open the schemas folder in our project folder and create a new file, let’s call it trending.js. This will hold trending movies.

In our new schema file, let’s export a default object and give it a name, title, and type:

// schemas/trending.js

export default {
  name: 'trending',
  title: 'Trending',
  type: 'document',

}

We can now add fields to our new schema, this schema is supposed to show trending videos so let's add a field array to reflect that:

// schemas/trending.js

fields: [
  {
    name: 'title',
    title: 'Title',
    type: 'string',
  },
  {
    name: 'releaseDate',
    title: 'Release date',
    type: 'datetime',
  },
  {
    name: 'popularity',
    title: 'Popularity',
    type: 'number',
  },
  {
    name: 'poster',
    title: 'Poster Image',
    type: 'image',
    options: {
      hotspot: true,
    },
  },
]

After adding the fields, we need to let Sanity know that we have created a new schema. Head over to schema.js and import the new schema and add it to the schemaTypes array:

// schemas/schema.js

import trending from './trending'

export default createSchema({
  ...,
  types: schemaTypes.concat([
    ...,
    trending
  ]),
})

Now, if you go back to the studio running in the browser, the new schema is created.

That is how to create a schema in Sanity, though we won't actually be needing it for the rest of the tutorial.

So far, we have successfully set up Sanity schema and studio.

Adding Alpine.js

Remember I stated earlier that we will use Alpine.js for our frontend, let’s create components with Alpine.js that we need for this example. Create a frontend directory and inside it create an index.html file. To run the frontend, I'll be using VS Code's Live Server and the app will be ruining on http://127.0.0.1:5500/frontend. If you're not using VS Code, you might need to Google how to run a live server for your editor.

To add Alpine.js to a project, you can either make use of the CDN or through npm.

To use CDN, add the CDN link to the head section, It will initialize itself:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

For production environments, To avoid unexpected behaviors and unexpected breakage from newer versions from Alpine.js, ensure you specify pin a specific version number in the CDN link. For example, to use version 3.4.2 (latest):

<script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>

To use npm, run the command:

npm i alpinejs

Then import it:

import 'alpinejs'

For the project we'll be building in this tutorial, we'll be using the CDN by adding the script tag to your index.html page:

<!-- frontend/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js and Sanity.io</title>
  <script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
</head>
<body>

</body>
</html>

Exploring Alpine.js Components

First, let’s create a small toggle functionality to learn how Alpine.js works.

<!-- frontend/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js and Sanity.io</title>
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/
        dist/alpine.min.js" defer></script>
</head>
<body>
  <div>
    <h1>This is a toggle button</h1>

    <button>Toggle</button>

    <div>
      <h1>Tadah! I am Visible</h1>
    </div>
  </div>
</body>
</html>

From the code above, Alpine.js CDN was added to the head section and the body includes a div with a text and button, the second div contains the content we are going to toggle. Let's add some Alpine.js code to the code above.

<div x-data="{ isOpen: false }">
  <h1>This is a toggle button</h1>

  <button>Toggle</button>

  <div x-show="isOpen">
    <h1>Tadah! I am Visible</h1>
  </div>
</div>

So here, the x-data directive is used to give state to the entire component and displays the second div when the value of isOpen is true. The x-show simply shows the div when it's true. Let’s make the button togglable.

<div x-data="{ isOpen: false }">
  <h1>This is a toggle button</h1>

  <button x-on:click="isOpen = !isOpen">Toggle</button>

  <div x-show="isOpen">
      <h1>Tadah! I am Visible</h1>
  </div>
</div>

And it works! Using the x-on, x-show, and x-data directives, we were able to create an interactive toggle.

Let’s try creating the other components before we work with our sanity data.

Performing interactions with Alpine.js

Let’s add a responsive navbar with more emphasis on applying interactions to its mobile view using Alpine.js. We will use Tailwind CSS for the styling. Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Like Alpine.js, it can also be added to a project using its CDN. Include it in the head section

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
rel="stylesheet">

First, we start with a nav tag to contain all the code for the navigation bar.

<nav
    class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0 bg-indigo-900"
    x-data="{ isOpen: false }"
    @keydown.escape="isOpen = false"
></nav>

Notice how x-data is used to set the default state of is open to false, this tells Alpine.js to keep the default state of the navbar closed. The @keydown.escape tells Alpine.js to set the navbar to close when there is a keydown press outside the navbar. Let’s add a button that will only be visible on mobile screens. Add the code snippet below inside <nav>:

<button
  @click="isOpen = !isOpen"
  type="button"
  class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
  :class="{ 'transition transform-180': isOpen }"
>
  <svg
    class="h-6 w-6 fill-current"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path
      x-show="isOpen"
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
    />
    <path
      x-show="!isOpen"
      fill-rule="evenodd"
      d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
    />
  </svg>
</button>

The button contains a hamburger toggle that opens and closes when the button is clicked. It also has a class that hides in large screens. Finally, let’s create the menu just after the button above:

<div
  class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
  :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
  @click.away="isOpen = false"
    x-show="isOpen"
  x-transition
>
  <ul class="pt-6 lg:pt-0  lg:flex justify-end flex-1 items-center">
        <li class="mr-3">
          <a
            class="inline-block py-2 px-4 text-white"
            href="#">Home</a>
        </li>
        <li class="mr-3">
          <a
            class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4"
            href="#">Movies</a>
        </li>
        <li class="mr-3">
          <a
            class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4"
            href="#">About</a>
        </li>
        <li class="mr-3">
          <a
            class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4"
            href="#">Contact</a>
        </li>
    </ul>
</div>

So we have been able to build a responsive navigation bar (you will need to resize your browser window to see the button) using Alpine.js and Tailwind CSS for styling.

Performing HTTP request

Let’s create the body component of our movie app.

To perform HTTP requests from sanity, we need to get an API from sanity studio. To do that, go back to [http://localhost:3333](http://localhost:3333). Just in case you have closed it, run the command again in your terminal.

sanity start

Click on the Vision tab, the environment is divided into 3 sections, the query section for trying out search queries, and the result section displays results from the query search. The params sections are optional to use if you have specific parameters you want to add. Note that the query is based on the data you have in your dataset in Sanity. The default dataset is production, as we set it during the project creation but we can create another dataset.

Sanity uses GROQ as its query language, you can read more about GROQ here. Let’s search for movies in the query section.

*[_type == 'movie']

Upon running the query, a query URL was generated for us. This URL can be used to fetch data from sanity into our Alpine.js frontend.

Enabling CORS

Before we can be able to fetch data from sanity into our Alpine.js frontend, we need to enable CORS. That is, we need to add the URL the frontend app is running on as part of the hosts that can connect to the project API. We can do that from the API tab on your project settings as shown below:

Back in the index.html file, create a main tag that will house the whole component, then create a container with an h2 tag with some text. This is optional. Afterward, create a div, this div will carry out the HTTP request using fetch, and we will wrap our fetch request in x-init so that it loads immediately after the page is loaded. Like a typical fetch request, the URL will be the query URL generated from the studio.

<main class="mt-32">
  <div class="container mx-auto px-8">
    <h2>Hello</h2>

    <div 
      x-data="init()"
      x-init="fetch('https://nhksjapu.api.sanity.io/v2021-03-25/data/query/production?query=*%5B_type%20%3D%3D%20%22movie%22%5D%20%7B%20title%2C%20releaseDate%2C%20%22imageUrl%22%3A%20poster.asset-%3Eurl%20%7D')
            .then(response => response.json())
            .then(response => movies = response.result)"
        class="p-5 flex flex-wrap justify-center"
    >
</main>

Here, we are running the following query:

*[_type == "movie"] {
    title,
    releaseDate,
    "imageUrl": poster.asset->url
}

Instead of returning everything from the query, we specify we only want the title, release date, and lastly the image URL. Since the image URL is nested inside poster then asset, so we simply assign it to a new variable (imageURL) for easy access.

The application state is set on the div tag by the x-data directive using a function called init(). This function will be created soon. The x-int fetches a list of movies from sanity and sets it as the value of the movie.

<div  class="grid grid-cols-1 gap-6 md:grid-cols-4">
  <template x-for="(movie, index) in movies" :key="index">
    <div>
      <img x-bind:src="movie.imageUrl" />
      <div class="mt-2">
        <h3 class="text-lg font-semibold" x-text="movie.title"></h3>
        <p class="text-sm text-gray-500" x-text="movie.releaseDate"></p>
      </div>
    </div>
  </template>
</div>

This piece of code displays the results of the query. We used the x-for directive to display the movies stored in the movies array. The template inside the x-for holds how each movie will be displayed. Also, we used x-text to set the innerText to display the movie title and year of each movie. We used x-bind:src to bind the src attribute of the image to the image URL of the movie, this makes the movie image to be rendered.

Let’s add a script tag just below the main tag, it will hold the function called by the x-data.

<script>
  function init() {
    return {
        movies: [],
    }
  }
</script>

The empty movie array stores all the data gotten from the query.

Let’s put everything together:

<!-- frontend/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js and Sanity.io</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
</head>
<body>
  <nav
        class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0 bg-indigo-900"
      x-data="{ isOpen: false }"
        @keydown.escape="isOpen = false"
    >

    <!--Logo -->
    <div class="flex items-center flex-shrink-0 text-white mr-6">
      <a class="text-white no-underline hover:text-white hover:no-underline" href="#">
        <span class="text-2xl pl-2"><i class="em em-grinning"></i> ecodata Movies</span>
      </a>
    </div>

    <!--Toggle button -->
    <button
            @click="isOpen = !isOpen"
            type="button"
      class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
      :class="{ 'transition transform-180': isOpen }"
        >
      <svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path x-show="isOpen" fill-rule="evenodd" clip-rule="evenodd"
          d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
        <path x-show="!isOpen" fill-rule="evenodd"
          d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
      </svg>
    </button>

    <!-- Menu -->
    <div
            class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
      :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
            @click.away="isOpen = false"
            x-show="isOpen"
            x-transition
        >
      <ul class="pt-6 lg:pt-0  lg:flex justify-end flex-1 items-center">
        <li class="mr-3">
          <a class="inline-block py-2 px-4 text-white" href="#">Home</a>
        </li>
        <li class="mr-3">
          <a class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4" href="#">Movies</a>
        </li>
        <li class="mr-3">
          <a class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4" href="#">About</a>
        </li>
        <li class="mr-3">
          <a class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <main class="mt-32">
    <div class="container mx-auto px-8">
      <div
        x-data="init()"
        x-init="fetch('https://nhksjapu.api.sanity.io/v2021-03-25/data/query/production?query=*%5B_type%20%3D%3D%20%22movie%22%5D%20%7B%20title%2C%20releaseDate%2C%20%22imageUrl%22%3A%20poster.asset-%3Eurl%20%7D')
          .then(response => response.json())
          .then(response => movies = response.result)" class="p-5 flex flex-wrap justify-center">

          <div  class="grid grid-cols-1 gap-6 md:grid-cols-4">
            <template x-for="(movie, index) in movies" :key="index">
              <div>
                <img x-bind:src="movie.imageUrl" />
                <div class="mt-2">
                  <h3 class="text-lg font-semibold" x-text="movie.title"></h3>
                  <p class="text-sm text-gray-500" x-text="movie.releaseDate"></p>
                </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </main>

  <div x-data="{ isOpen: false }">
    <h1>This is a toggle button</h1>

    <button x-on:click="isOpen = !isOpen">Toggle</button>

    <div x-show="isOpen">
      <h1>Tadah! I am Visible</h1>
    </div>
  </div>

  <script>
    function init() {
      return {
        movies: [],
      }
    }
  </script>
</body>
</html>

And it’s a wrap, we have been able to use Alpine.js as the frontend of our movie app with Sanity as our back end. You can explore and add more components to make it look even better.

You can check the entire project on Github.

Conclusion

In this tutorial, we covered an introduction to Alpine.js and Sanity.io. We touched on schemas, the Sanity Studio, built a toggle component, a responsive navbar with Alpine.js, and a simple movie gallery component with the framework using Sanity as the backend. Although Alpine.js might not totally replace other frameworks, it can be used in combination with React or Vue to quickly prototype components without writing much JavaScript and Sanity is a wonderful tool to handle data without much hassle.

References

How to Create a Single Page Application with React and Sanity

Joel Olawanle — Wed, 13 Oct 2021 15:38:52 +0000

Introduction

Have you ever thought of building a single-page application(SPA) with react & Sanity? In this guide, I will take you on an exciting journey to build your first SPA with react and Sanity. We will create a Food Catalog app that will contain various food items and categories to organize them by themselves. All these categories and foods will be fetched from Sanity.

Here is the project GitHub repository; you can clone or download the complete project. You can also see the deployed app here.

Note: This is a "follow along" kind of article. You'll definitely have a good result if you build along.

Requirements/Prerequisites

To understand this guide and code along, you should have:

Basic understanding of HTML, CSS, and JavaScript
At least a little experience or knowledge of React and some of its hooks.
Node and npm or yarn installed on your computer
Basic understanding of how the terminal works

What is React?

React is an open-source JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is maintained by Facebook and a community of individual developers and companies. React can be used for the development of single-page or mobile applications.

React is a component-based framework, which means we'll be writing our code in small, reusable pieces and putting them all together to make our website.

Understanding SPA

SPA stands for Single Page Application. It is a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. In simpler terms, it is an app that works inside a browser and does not require page reloading during use. We'll also touch on how routing works in React and learn how to map different parts of our website to different views.

Setting up a React app

For this guide, we will make use of create-react-app — the React recommended way to create a single-page application. To make use of create-react-app, You'll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.

To install, run the following command:

npx create-react-app food-catalog-app

After the installation, you can move into the project's root directory to start the development server.

cd food-catalog-app
npm start

When the dev server is ready, you can view your project in the browser at http://localhost:3000/.

Your project directory should look like this once the setup is complete.

Let's clean up the app by deleting files we don't need so we can get started building our app. You can delete the following highlighted files.

Note: This might throw an error, so ensure you delete the logo.svg import from App.css and the index.css, reportWebVitals.js import from index.js.

To be sure your files look like mine exactly, I pushed my setup files to this GitHub repository, and you can clone it or cross-check.

Using Tailwind CSS

TailwindCSS is a utility-first CSS framework used to build frontend applications. Rather than adding obscure CSS classes to your code, with TailwindCSS, you use utility classes to create your components, with as much control over every single styling as you want. All without having to ever write a single line of CSS.

There are so many ways to make use of Tailwind CSS in React and other frameworks generally, but for this guide, we will be making use of the CDN.

In the /src folder, add the following CDN import to the App.css file.

@import url('https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css');

Once this is done, we can now proceed to set up our sanity studio.

What is Sanity?

Sanity is a content platform that treats your structured content as data. It comes bundled with an open-source, real-time headless CMS that can be customized with JavaScript. We'll be using the Sanity studio to manage our content and accessing it in our frontend through Sanity's "out of the box" API.

One of the key benefits of Sanity is that the content management interface, or "studio," is open source and built to be built upon. If you know React, you can extend and customize it to your heart's content.

Getting started with Sanity/setup

To start a new project with Sanity, we'll install the Sanity CLI globally. To do this, you will need to have Node and npm installed.

npm install -g @sanity/cli

As soon as the CLI finishes installing, you'll be able to create a new project using it. Run the following in the directory of the React project you just created (i.e., food-catalog-app).

sanity init

If this is your first time, this will log you into Sanity, and then you will be able to create a project, set up a dataset, and generate files that are necessary to run the editing environment locally.

Note: If you don't have an account, Sanity will direct you on how to get one. Or, you could visit Sanity's website and create an account.

Once that is done, you will be prompted to create a new project, tap Enter. Name your project food-catalog-studio and choose the default dataset configuration by typing Y.

Finally, confirm the project path and choose a schema for your studio. For this demo, you'll need to start with the "Clean project with no predefined schemas" option.

To start the studio, move to the folder by running the following command in the terminal:

cd studio

Now, you can start the studio with the following command:

sanity start

After compiling, the studio will open on http://localhost:3333, and we will have something like this displayed because we choose "clean project with no predefined schemas" when setting up our studio.

Sanity studio

The Sanity Studio is an open-source CMS built with React.js that allows users to use toolkits and plugins to create the workflow that optimizes for how you want to work with content. It offers rapid configuration and free form customization.

Creating a food catalog schema from scratch

A schema describes the different field types in a document. There are different types of schema you can choose from.

For this guide, we will be creating two schemas: one for the food categories and the other for food items. The food schema will have properties such as food name, food description, food image, and its category, while the category schema will have the name, image, description, and then a hex-code field for creating dynamic styling.

When the studio starts up, it looks for the schema.js file in the schemas folder of your project. For now, since we don't have any schema, you will find something like this in your schema.js file.

// 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";
// 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! */
  ]),
});

All your schemas go into the types array by defining the schemas title, name, type, and finally, the fields. For our foods schema, we will be having something like this.

types: schemaTypes.concat([
    /* Your types here! */
    {
  title: 'Foods',
  name: 'foods',
  type: 'document',
  fields: [{
      title: 'Food Name',
      name: 'foodName',
      type: 'string',
      validation: Rule => Rule.required()
    },
    {
      title: 'A little description',
      name: 'foodDesc',
      type: 'text',
      options: {
        maxLength: 200,
      },
      validation: Rule => Rule.required()
    },
    {
      title: "Food Image",
      name: "foodImage",
      type: "image",
      options: {
        hotspot: true,
      },
    }
  ]
},

//Category schema goes here

]),

Once you have done this, save and now let's take a deeper look at the code above, each object represents a field and must have a title, name, and type.

Title: The display name for this field
Name: The identifier for this field used in the API's
Type: The type of this field, e.g., string, image, e.t.c. You can find the complete list of built-in types here.

The second schema to create is the category schema which we'll add just below the foods schema object.

{
  name: "category",
  title: "Category",
  type: "document",
  fields: [{
      title: "Title",
      name: "title",
      type: "string",
    },
    {
      title: "Slug",
      name: "slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    },
    {
      title: "Description",
      name: "description",
      type: "text",
    },
    {
      title: "Image",
      name: "image",
      type: "image",
      options: {
        hotspot: true,
      },
    },
    {
      title: "Hex Code",
      name: "hexCode",
      type: "string",
    },
  ],
}

Save the file, and you will see something like this:

One last thing to do will be to include a category in our foods schema. It displays the category fetched from the category schema for you when filling in your foods. To do that, we will create a new field wherever in the array we want this field to be

{
  name: "category",
  title: "Category",
  type: "reference",
  to: {
    type: "category"
  }
},

Once you save your code and create a new document of type food in your studio, you should see the categories field show up as expected.

Organizing our schema

Let's organize our schemas before loading them with foods and categories. Having all our schemas in just one file will always work but can become very difficult to maintain when you have more schemas.

It is recommended to describe each document type in a separate file and import them into schema.js like this:

// 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 foods from "./foods";
import category from "./category";

// 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([
    foods,
    category
  ]),
})

Looking deeper at the code above, we imported two files that export the schemas and called them in the types array. At this point, your directory will look like this:

One last thing will be for us to load our studio with content which we will be fetching into the app. This is totally up to you; you can get lovely images from Unsplash.

Connecting Sanity with React App

Let's allow our frontend to query for and receive data from Sanity.

Connecting React to Sanity

This is done by installing the sanity client package in our React project. Then run this command:

npm install @sanity/client @sanity/image-url

@sanity/client — Sanity Client is the official JavaScript client by Sanity and can be used both in Node.js and modern browsers.
@sanity/image-url — A helper library used to generate image URLs and perform helpful image transformations through the Sanity asset pipeline. Read more on the official docs here.

Once these packages have been installed, we'll create a new file named client.js inside the src directory and add the following code to the client.js file.

import sanityClient from "@sanity/client";

export default sanityClient({
  projectId: "Your Project ID Here", // find this at manage.sanity.io or in your sanity.json
  dataset: "production", // this is from those question during 'sanity init'
});

Note: To get your project ID, visit https://www.sanity.io/manage, click on the project, so it displays full info about the project, including the Project ID.

Ensure you save the file.

Connecting Sanity to React

Finally, You will also need to add the port where the React development server is running to the CORS origins of your Sanity project. Visit https://www.sanity.io/manage and click on your Sanity project.

On your project's dashboard, click on Settings → API settings and then add http://localhost:3000/ to the CORS origins field if it was not added automatically.

Once you save, that will be all for our sanity studio; we can now start building the front end of our app to consume the data from the sanity studio.

Building a food catalog application

The first thing to handle would be routing, and this is usually handled in the App.js file. We'll be implementing this using react-router-dom and the Switch and Route components.

We will create a new folder in the /src directory to put all our routes in this app. We will have four routes:

views/Home.js - The main index is where we will list all the categories fetched from the Sanity studio.
views/Foods.js - This will contain a random list of all foods fetched from the Sanity studio.
views/About.js - This is the about page of the application.
views/FilteredFoods.js - This is an individual page containing foods related to a particular category.

Let's create the above files, and our file directory will now look like this:

Let's now handle routing in the App.js file. In this file, we will handle routing using React router. This enables the navigation among views of various components in a React Application.

The first thing will be to install the React Router package using the command below:

npm install react-router-dom --save

After installing react-router-dom, add its components (BrowserRouter, Route, Switch) to the App.js file. You can now proceed to define your routes.

In the code below, you will notice all the routes are wrapped in the Switch and BrowserRouter components. The Switch component is used to render only the first route that matches the location, rather than rendering all matching routes, and the BrowserRouter is a router implementation that uses the HTML5 history API to keep your UI in sync with the URL. It is the parent component that is used to store all the other components. Learn more about routing in react here.

import { BrowserRouter, Route, Switch } from "react-router-dom";

// views
import Home from "./views/Home";
import About from "./views/About";
import Foods from "./views/Foods";
import FilteredFoods from "./views/FilteredFoods";

// styles
import "./App.css";

function App() {
    return (
        <BrowserRouter>
            <Switch>
                <Route component={Home} exact path="/" />
                <Route component={About} path="/About" />
                <Route component={Foods} path="/Foods" />
                <Route component={FilteredFoods} path="/FilteredFoods/:slug" />
            </Switch>
        </BrowserRouter>
    );
}

export default App;

You can confirm if the routes are working, visiting the paths. Now the next thing would be to work on the NavBar of our application.

Let's now create a folder and name its components in the /src directory to house all our reusable components. This would help organize our application. In this folder, we have about five different components, but let's start with the Header section of our application.

Building the Header and footer Section

The header section is going to house the application's logo and nav links, while the footer section will contain footer text. We mentioned earlier that React is all about components, so let's make some!

components/Header.js - This would be the overall container housing the Navbar.

import React from "react";
import NavBar from "./NavBar";

const Header = () => {
    return (
        <header>
            <div className="bg-gray-100">
                <NavBar />
            </div>
        </header>
    );
};

export default Header;

In the above code, we created a functional component and then imported Navbar.js.

components/NavBar.js - This will contain the logo and all the navigation links.

import React from "react";
import { NavLink } from "react-router-dom";

const Header = () => {
    return (
        <nav className="container lg:px-0 px-5 py-2 lg:py-0 lg:w-3/4 w-full mx-auto flex flex-col lg:flex-row justify-between h-20 items-center font-bold">
            <NavLink to="/">
                <p className="text-xl lg:text-2xl">😋Yummy Food's</p>
            </NavLink>
            <div className=" lg:block">
                <ul className="flex gap-x-20">
                    <li>
                        <NavLink
                            to="/"
                            exact
                            className="nav-link"
                            activeClassName="active-link"
                        >
                            Home
                        </NavLink>
                    </li>
                    <li>
                        <NavLink
                            to="/foods"
                            className="nav-link"
                            activeClassName="active-link"
                        >
                            Foods
                        </NavLink>
                    </li>
                    <li>
                        <NavLink
                            to="/about"
                            className="nav-link"
                            activeClassName="active-link"
                        >
                            About
                        </NavLink>
                    </li>
                </ul>
            </div>
        </nav>
    );
};

export default Header;

For the links which we declared in App.js to work, we need to import NavLink from react-router-dom and then made use of NavLink in the navbar.

components/Footer.js - This will contain the footer text, which is very simple.

import React from "react";

const Footer = () => {
    return (
        <div className="bg-gray-100 flex justify-center font-bold p-5">
            <p>
                © Sanity Tutorial Guide by
                <a href="https://joel-new.netlify.app/" style={{ color: "#FE043C" }}>
                    &nbsp; Joel Olawanle
                </a>
            </p>
        </div>
    );
};

export default Footer;

The last thing will be to add Header.js and Footer.js files to our App.js file, making the app.js file to now look like this

import { BrowserRouter, Route, Switch } from "react-router-dom";

// views
import Home from "./views/Home";
import About from "./views/About";
import Foods from "./views/Foods";
import FilteredFoods from "./views/FilteredFoods";

// components
import Header from "./components/Header";
import Footer from "./components/Footer";

// styles
import "./App.css";

function App() {
    return (
        <BrowserRouter>
            {/* Header Area */}
            <div className="max-w-full">
                <Header />
            </div>
            {/* Route Area */}
            <Switch>
                <Route component={Home} exact path="/" />
                <Route component={About} path="/About" />
                <Route component={Foods} path="/Foods" />
                <Route component={FilteredFoods} path="/FilteredFoods/:slug" />
            </Switch>
            {/* Footer Area */}
            <div className="max-w-full">
                <Footer />
            </div>
        </BrowserRouter>
    );
}

export default App;

At this stage, when you save, the application will look like this

You'll notice we have a Header and a Footer but no content! Let's now work on the index page, so it displays all our categories from Sanity.

Display all food categories on the Homepage

import React from "react";

import Categories from "../components/Categories";

const Home = () => {
    return (
        <section className="container w-full lg:px-0 px-5 lg:w-3/4 mx-auto">
            <div className="flex lg:flex-row flex-col my-10 justify-between">
                <div className="">
                    <h2 className="text-3xl lg:text-4xl font-bold">Hello👋</h2>
                    <p className="text-xl lg:text-2xl">What do you want?</p>
                </div>
                <div className="flex items-center lg:mt-0 mt-5 gap-3 lg:flex-row flex-col">
                    <input
                        type="text"
                        className="w-full lg:w-80 p-2 border-2 border-gray-500 rounded focus:outline-none"
                    />
                    <button
                        style={{ backgroundColor: "#FE043C" }}
                        className="rounded w-full lg:w-auto px-10 py-3 text-white"
                    >
                        Search
                    </button>
                </div>
            </div>
            <hr className="my-10" />
            <Categories />
        </section>
    );
};

export default Home;

In the code above, we have a div containing welcome information and a search bar, and then after that, we imported a component called categories from the components' folder.

To continue, you will have to create a component and name it Categories.js in the /components folder. This is where we will fetch all our food categories from Sanity, either using GROQ or GraphQL. For this guide, we will make use of GROQ.

Please paste the following code in the Categories.js file:

import React, { useState, useEffect } from "react";
import sanityClient from "../Client";

import Category from "./Category";

const Categories = () => {
    const [categories, setCategories] = useState(null);

    useEffect(() => {
        sanityClient
            .fetch(
                `*[_type == "category"]{
      title,
      slug,
      description,
      image{
        asset->{
          _id,
          url
        },
      },
      hexCode,
    }`
            )
            .then((data) => setCategories(data))
            .catch(console.error);
    }, []);

    return (
        <div className="">
            <h3 className="text-3xl font-bold text-center my-10 lg:my-5">
                All Categories🥘
            </h3>

            <div className="flex flex-col lg:flex-row lg:justify-center flex-wrap w-full gap-10 my-10">
                {categories &&
                    categories.map((category) => (
                        <Category key={category._id} category={category} />
                    ))}
            </div>
        </div>
    );
};

export default Categories;

The above code might seem tricky since we are now fetching data from our Sanity, but I will explain. Let's first understand what GROQ is all about.

GROQ (Graph-Relational Object Queries) is a declarative language designed to query collections of largely schema-less JSON documents.

Note: If you're not yet familiar with GROQ which is used to query Sanity for data, check the official docs here.

Explaining the code...

The first thing we did was to import Sanity Client, which we installed earlier.

import sanityClient from "../Client";

In react, we make use of some hooks to query for data. For this guide, we will make use of useState() and useEffect(). The useState() is a Hook that allows you to have state variables in functional components, while useEffect() lets you perform side effects in function components.

To make use of these two hooks, you have to import them from react, and that's what we did in the first line alongside react, which is necessary.

import React, { useState, useEffect } from "react";

We can now set our states

const [categories, setCategories] = useState(null);

Note: This follows a common pattern where categories is where we access the current value of that particular piece of state, while setCategories is our method for setting or changing it.

To fetch data/information from Sanity studio, you can make use of GROQ, let's now explore our Groq Query:

useEffect(() => {
        sanityClient
            .fetch(
                `*[_type == "category"]{
      title,
      slug,
      description,
      image{
        asset->{
          _id,
          url
        },
      },
      hexCode,
    }`
            )
            .then((data) => setCategories(data))
            .catch(console.error);
    }, []);

This query is searching through your Sanity data store, or Content Lake, for a schema that has a _type of category (this is the name of the schema) and then gets the title, slug, description, e.t.c.

Reading further through our code, you'll notice that we are looping through our categories array and mapping each item to an instance of our Category component.

{categories &&
    categories.map((category) => (
        <Category key={category._id} category={category} />
    ))}

In the category.js file, paste the code below and save

import React from "react";
import { Link } from "react-router-dom";

import sanityClient from "../Client";
import imageUrlBuilder from "@sanity/image-url";

const builder = imageUrlBuilder(sanityClient);

function urlFor(source) {
    return builder.image(source);
}

const Category = ({ category }) => {
    return (
        <div
            className="bg-gray-100 rounded-xl p-10 w-full lg:w-1/3"
            style={{ backgroundColor: `#${category.hexCode}` }}
        >
            <img
                src={urlFor(category.image).url()}
                alt={category.title}
                className="w-40"
            />
            <h4 className="text-2xl py-3 font-bold capitalize">{category.title}</h4>
            <p>{category.description}</p>
            <Link to={"/filteredfoods/" + category.slug.current}>
                <button
                    style={{ backgroundColor: "#FE043C" }}
                    className="rounded mt-3 px-5 py-2 text-white"
                >
                    View
                </button>
            </Link>
        </div>
    );
};

export default Category;

In the above code, we imported imageUrlBuilder from @sanity/image-url, which we use to generate image URLs for our images by creating a method called UrlFor() and making use of it inside the template. This helps us get thumbnail-sized images compared to the regular size of images uploaded to Sanity.

Note: A lot of things can be done with imageUrlBuilder, such as specifying width and height. You can read more about imageUrlBuilder here.

Once you save, you will notice the homepage/index page now looks like this, depending on the data you entered into your studio.

Display all foods on Food's page

Just as we were able to display all categories on the home page, we will also use the same approach to display all foods on the foods page. In the /views/Foods.js paste the code below:

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import sanityClient from "../Client";
import imageUrlBuilder from "@sanity/image-url";

const builder = imageUrlBuilder(sanityClient);

function urlFor(source) {
    return builder.image(source);
}

// import foodImage from "../images/protein/001.jpg";

const Foods = () => {
    const [foods, setFoods] = useState(null);

    useEffect(() => {
        sanityClient
            .fetch(
                `*[_type == "foods"]{
                    _id,
      foodName,
      foodDesc,
      foodImage{
        asset->{
          _id,
          url
        },
      },
      category->{
                title
            }
    }`
            )
            .then((data) => setFoods(data))
            .catch(console.error);
    }, []);

    return (
        <section className="container w-full lg:px-0 px-5 lg:w-3/4 mx-auto min-h-screen">
            <div className="flex lg:flex-row flex-col my-10 justify-center">
                <div className="flex items-center lg:mt-0 mt-5 gap-3 lg:flex-row flex-col">
                    <input
                        type="text"
                        className="w-full lg:w-80 p-2 border-2 border-gray-500 rounded focus:outline-none"
                    />
                    <button
                        style={{ backgroundColor: "#FE043C" }}
                        className="rounded w-full lg:w-auto px-10 py-3 text-white"
                    >
                        Search
                    </button>
                </div>
            </div>
            <hr className="my-10" />
            <div className="my-5">
                <h3 className="text-3xl font-bold text-center my-10 lg:my-5">
                    All Foods🥗
                </h3>
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    {foods &&
                        foods.map((food) => (
                            <div
                                className="bg-gray-100 rounded shadow-xl p-5 std-border"
                                key={food.foodName}
                            >
                                <div className="flex flex-col items-center">
                                    <img
                                        src={urlFor(food.foodImage).width(200).url()}
                                        alt={food.title}
                                        className="rounded-full object-cover w-40 h-40 border-4 shadow-inner std-border"
                                    />
                                    <h4 className="text-2xl pt-3 font-bold capitalize">
                                        {food.foodName}
                                    </h4>
                                    <Link to={"/filteredfoods/" + food.category.title}>
                                        <small className="uppercase text-gray-400 font-semibold">
                                            {food.category.title}
                                        </small>
                                    </Link>
                                </div>
                                <p className="mt-5">{food.foodDesc}</p>
                            </div>
                        ))}
                </div>
            </div>
        </section>
    );
};

export default Foods;

In the code above, We are simply fetching all the foods from the foods schema of our sanity studio. Once you save, you will get something like this, depending on what you have in your sanity studio.

Finally, let's take a look at something very important; you will notice some links in the foods page and home page, which are supposed to take us to a dynamic route. Let's now see how it works.

Create dynamic routes for each category

To create a dynamic route, we will be making use of a component. We will be making use of the FilteredFoods.js page, and if you recall, when we were declaring routes, we added a slug to the route of this page

<Route component={FilteredFoods} path="/FilteredFoods/:slug" />

We will get that slug via useParams which we would import into this component. In the FilteredFoods.js component, paste the code below:

import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import sanityClient from "../Client";
import imageUrlBuilder from "@sanity/image-url";

const builder = imageUrlBuilder(sanityClient);
function urlFor(source) {
    return builder.image(source);
}

const Foods = () => {
    const [filteredFoods, setFilteredFoods] = useState(null);
    const { slug } = useParams();

    useEffect(() => {
        sanityClient
            .fetch(
                ` *[_type == "foods" && category._ref in *[_type=="category" && title=="${slug}"]._id ]{
          _id,
              foodName,
              foodDesc,
              foodImage{
                asset->{
                  _id,
                  url
                },
              },
              category->{
                title
              }
        }`
            )
            .then((data) => setFilteredFoods(data))
            .catch(console.error);
    }, [slug]);

    return (
        <section className="container w-full lg:px-0 px-5 lg:w-3/4 mx-auto min-h-screen">
            <div className="flex lg:flex-row flex-col my-10 justify-center">
                <div className="flex items-center lg:mt-0 mt-5 gap-3 lg:flex-row flex-col">
                    <input
                        type="text"
                        className="w-full lg:w-80 p-2 border-2 border-gray-500 rounded focus:outline-none"
                    />
                    <button
                        style={{ backgroundColor: "#FE043C" }}
                        className="rounded w-full lg:w-auto px-10 py-3 text-white"
                    >
                        Search
                    </button>
                </div>
            </div>
            <hr className="my-10" />
            <div className="my-5">
                <h3 className="text-3xl font-bold text-center my-10 lg:my-5">
                    All Foods🥗
                </h3>
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    {filteredFoods &&
                        filteredFoods.map((food) => (
                            <div
                                className="bg-gray-100 rounded shadow-xl p-5 std-border"
                                key={food.foodName}
                            >
                                <div className="flex flex-col items-center">
                                    <img
                                        src={urlFor(food.foodImage.asset.url).width(200).url()}
                                        alt=""
                                        className="rounded-full object-cover w-40 h-40 border-4 shadow-inner std-border"
                                    />
                                    <h4 className="text-2xl pt-3 font-bold capitalize">
                                        {food.foodName}
                                    </h4>
                                    <Link to={"/filteredfoods/" + food.category.title}>
                                        <small className="uppercase text-gray-400 font-semibold">
                                            {food.category.title}
                                        </small>
                                    </Link>
                                </div>
                                <p className="mt-5">{food.foodDesc}</p>
                            </div>
                        ))}
                </div>
            </div>
        </section>
    );
};

export default Foods;

The code above can be quite tricky, but I will explain everything in plain words. The first thing we did was to import useParams which would enable us to get the slug

const { slug } = useParams();

Once that is successful, we can now query our sanity studio, but this time around, the query is quite different. To get a feeling for queries in GROQ, you can check their cheat sheet here.

Once you save this code, you will now be able to access dynamic routes via the Link declared either in the home page or foods page

<Link to={"/filteredfoods/" + category.slug.current}>
    <button
        style={{ backgroundColor: "#FE043C" }}
        className="rounded mt-3 px-5 py-2 text-white"
    >
        View
    </button>
</Link>

By now, the whole application should be working fine and fast without reloading the browser, we have not yet added any information to the About page, you can paste the code below, so we are sure everything is complete:

import React from "react";

import foodsAboutImg from "../images/foods-abt-img.jpg";

const About = () => {
    return (
        <section className="container w-full lg:px-0 px-5 lg:w-3/4 mx-auto min-h-screen">
            <div className="mt-16">
                <h3 className="text-3xl font-bold text-center my-10 lg:my-5">
                    About Us🦻
                </h3>
                <div className="flex gap-10 justify-center items-center flex-col lg:flex-row mt-10">
                    <div className="">
                        <img
                            src={foodsAboutImg}
                            className="w-96 rounded-xl lg:rounded-l-xl"
                            alt=""
                        />
                    </div>
                    <div className="w-full lg:w-1/3 flex gap-5 mb-10 lg:mb-0 flex-col">
                        ⭐⭐⭐
                        <p>
                            A healthy diet rich in fruits, vegetables, whole grains and
                            low-fat dairy can help to reduce your risk of heart disease by
                            maintaining blood pressure and cholesterol levels. High blood
                            pressure and cholesterol can be a symptom of too much salt and
                            saturated fats in your diet.
                        </p>
                        <p>
                            Many healthful foods, including vegetables, fruits, and beans, are
                            lower in calories than most processed foods.
                        </p>
                        <p>
                            Children learn most health-related behaviors from the adults
                            around them, and parents who model healthful eating and exercise
                            habits tend to pass these on.
                        </p>
                        ⭐⭐⭐
                    </div>
                </div>
            </div>
        </section>
    );
};

export default About;

This might throw an error due to the image imported. Feel free to use another image or get the image from this GitHub repository.

Congratulations! We now have our application running smoothly offline. You can decide to deploy your application online so that others can access it easily.

Conclusion

In this guide, we built a single-page application with React, Tailwind CSS, and Sanity. This guide will help you set up your own version of this project. You can also improve on it by adding/implementing certain features and functionalities.

Here are a few ideas to get you started:

Add Search functionality to the search field, making use of foods.
Style the app using UI libraries like Vuetify, BootstrapVue, or standard CSS.
Make certain fields of the schema required and play with other field types.

Useful resources

Happy coding!

Guide to sending SMS with the Twilio API

Joseph Udonsak — Mon, 21 Jun 2021 22:11:28 +0000

Introduction

In a fast-paced environment, it is becoming increasingly important that software systems keep customers abreast with the latest information - whether or not they are actively interacting with the system. This is especially true in situations where the customer needs to be notified of events that weren't a direct result of their activity on the system (such as an order being made for a product or payment being received for a delivered service).

These days, notifications can either be sent via email, SMS, or even via popular messaging platforms like WhatsApp or Telegram. However, SMS notifications top the bunch because, unlike the other notification mediums, the customer is not required to have an internet connection in order to receive SMS messages. Additionally, SMS messages will be more accessible since there is the chance that more than a few customers may not even have a WhatsApp or Telegram account to start with.

Twilio is a platform that allows you to connect with customers everywhere they want to interact with you in real-time —from SMS messages to emails, phone calls to video, intelligent chatbots, and back. With helper libraries for popular programming languages, Twilio makes managing/dispatching programmable SMS a breeze.

In this tutorial, we'll build an e-commerce web application using Next.js and implement an SMS notification feature. We'll also learn about React Context which will be used to implement the cart functionality. The content for the e-commerce site will be hosted (and served) using Sanity.io. A customer can make a selection of items and purchase them. Once a customer has purchased an item, a text message will be sent to the phone number provided by the customer, confirming the order details and the expected delivery date in the message body. The application we will build can be previewed here. The code for the complete project is available on Github should you get stuck at any point.

Prerequisites

To keep up with the concepts that will be introduced in this article, you will need a fair grasp of JavaScript ES6. While we won't delve too deep into React and Next.js, it will be helpful to have some understanding of both.

You will also need to have the following installed on your workstation:

Node Package Manager (NPM)
Sanity CLI
A Github account
A Twilio account
A code editor of your choice

Getting started

Setting up Sanity

For this article, we'll be using the Next.js E-commerce official starter to build our web application. To get started, open the starter page in your browser. A screenshot of the starter page is shown below

Follow the instructions on the starter page to set up the project. In addition to receiving an email with the details of the Vercel deployment and newly created Sanity project, a Github repository will be created for you to clone and start working with. Clone the repository using the following command:

git clone https://github.com/<YOUR_GITHUB_ID>/next-js-e-commerce.git 
sanity-twilio

cd sanity-twilio

This command pulls the repository into a folder named sanity-twilio. Before we start adding code to the project, let's set our environment variables. To do this, make a copy of the .env.test file named .env.

cp .env.test .env

In the .env file, replace the SANITY_STUDIO_API_PROJECT_ID and NEXT_PUBLIC_SANITY_PROJECT_ID with your sanity project id.

We also need to provide the project details for our sanity studio project. In the studio directory, edit the api node in sanity.json as follows:

"api": {
    "projectId": "INSERT_YOUR_PROJECT_ID",
    "dataset": "production"
  },

Next, install the project dependencies using npm

npm install

Start the application using NPM.

npm run dev

By default, the application will run on port 3000. Navigate to http://localhost:3000/ to see the application.

Next, we need to set up a messaging service on our Twilio account. To do this, head to your Twilio console and click the Create Messaging Service button.

We'll name this service Sanity E-commerce and our use case is to notify the users. Complete the form as shown below and click Create.

Next, we need to add a sender to our service. In our case, we need a phone number. Click Add Senders and select Phone Number then click Continue.

Finally, you will need to add at least one phone number to this service. If you don't have one (or need a new one), you can buy more numbers. Select a phone number and click Add Phone Numbers to complete the set up.

Click on the Properties menu option to view the Messaging Service SID. Make a copy of this as we will use it to integrate our e-commerce web application with Twilio.

In addition to the Messaging Service ID, you will also need your Twilio phone number, ACCOUNT SID and AUTH TOKEN to integrate with Twilio. You can find these on your dashboard.

As a security precaution, your AUTH TOKEN will not be shown on screen, click on the copy icon to copy it.

Making the 'Cart' work

At the moment, the cart feature of our application doesn't work. We can't add or remove items to our cart. We can't even see it. Let's fix that before we implement the checkout feature.

To manage the cart in this application, we'll take advantage of the React Context API. To get started, create a file named context.js in the utils directory. This context will control the visibility of the cart and the items in the cart. It will also provide helper functions that will allow us to add or remove items from the cart, or update the quantity of items in the cart. Finally, it will also provide a hook that allows us to access exactly what we need from the context in each component.

touch utils/context.js

Add the following to context.js

// utils/context.js
import { createContext, useContext, useState } from "react";

const CartContext = createContext();

const CartContextProvider = ({ children }) => {
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartVisibility] = useState(false);

  const removeAllItemsFromCart = () => {
    setCart([]);
  };

  const showCart = () => {
    setCartVisibility(true);
  };

  const hideCart = () => {
    setCartVisibility(false);
  };

  const toggleCartVisibility = () => {
    setCartVisibility(oldVisibility => !oldVisibility);
  };

  const findOrderInCart = productId => cart.find(({ id }) => id === productId);

  const updateOrderQuantity = (productId, newQuantity) => {
    const predicate = ({ id }) => id === productId;

    setCart(oldCart => {
      const order = oldCart.find(predicate);
      order.quantity = newQuantity;
      const orderIndex = oldCart.findIndex(predicate);
      const newCart = [...oldCart];
      newCart[orderIndex] = order;
      return newCart;
    });
  };

  const addOrderToCart = order => {
    const orderInCart = findOrderInCart(order.id);
    if (!orderInCart) {
      setCart(oldCart => [...oldCart, order]);
    } else {
      const newOrderQuantity = orderInCart.quantity + order.quantity;
      updateOrderQuantity(order.id, newOrderQuantity);
    }
    showCart();
  };

  const removeOrderFromCart = productId => {
    setCart(oldCart => oldCart.filter(({ id }) => id !== productId));
    showCart();
  };

  return (
    <CartContext.Provider
      value={{
        cart,
        addOrderToCart,
        findOrderInCart,
        removeOrderFromCart,
        updateOrderQuantity,
        cartOpen,
        showCart,
        hideCart,
        toggleCartVisibility,
        removeAllItemsFromCart
      }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCartContext = () => {
  const context = useContext(CartContext);
  if (context === undefined) {
    throw new Error("useCartContext must be used within a CartContextProvider");
  }
  return context;
};

export default CartContextProvider;

Next, we need to wrap the root component of our application with the CartContextProvider. To do this, open pages/_app.js and update it to match the following:

// pages/_app.js
import "../styles/index.css";
import Layout from "../components/Layout";
import CartContextProvider from "../utils/context";

function MyApp({ Component, pageProps }) {
  return (
    <CartContextProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </CartContextProvider>
  );
}

export default MyApp;

Next, we need a component that will render a single item in our cart. An item in our cart will be represented as an object comprising of the following:

The product id.
The title (name) of the product.
The slug for the product. This will be used to create a link to the product page.
The price for a single unit of the product.
The number of units the customer intends to order.
The product image.

In the components directory, create a new file called CartItem.js.

touch components/CartItem.js

In CartItem.js add the following:

// components/CartItem.js
import { urlFor } from "../utils/sanity";
import Link from "next/link";
import { useCartContext } from "../utils/context";

const CartItem = ({
                    id,
                    title,
                    slug,
                    price,
                    quantity,
                    mainImage
                  }) => {

  const { removeOrderFromCart, updateOrderQuantity } = useCartContext();

  const handleRemoveButtonClick = () => {
    removeOrderFromCart(id);
  };

  const reduceOrderQuantity = () => {
    if (quantity > 1) {
      updateOrderQuantity(id, quantity - 1);
    } else {
      removeOrderFromCart(id);
    }
  };

  const increaseOrderQuantity = () => {
    updateOrderQuantity(id, quantity + 1);
  };

  return (
    <div className="flex justify-between mt-6">
      <div className="flex">
        <button
          onClick={handleRemoveButtonClick}
          className="text-gray-600 focus:outline-none mx-2"
        >
          <svg
            className="h-5 w-5"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <img
          className="h-20 w-20 object-cover rounded"
          src={urlFor(mainImage)
            .auto("format")
            .fit("crop")
            .width(750)
            .quality(80)}
          alt=""
        />
        <div className="mx-3">
          <Link href={`/products/${slug.current}`}>
            <a><h3 className="text-sm text-gray-600">{title}</h3></a>
          </Link>
          <div className="flex items-center mt-2">
            <button
              onClick={increaseOrderQuantity}
              className="text-gray-500 focus:outline-none focus:text-gray-600">
              <svg
                className="h-5 w-5"
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </button>
            <span className="text-gray-700 mx-2">{quantity}</span>
            <button
              onClick={reduceOrderQuantity}
              className="text-gray-500 focus:outline-none focus:text-gray-600">
              <svg
                className="h-5 w-5"
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
      <span className="text-gray-600">${quantity * price}</span>
    </div>
  );
};

export default CartItem;

The cart item provided as a prop to the CartItem is destructured to get its contents. Then we use the useCartContext hook to get helper functions for removing items from the cart and updating the ordered quantity for the cart item. Using the helper functions, we add functionality for the buttons in the component. Clicking on the + icon should increase the number of units to be ordered while clicking the - icon should reduce the number. We also add a button to remove the item entirely from the cart. Finally, we return the JSX for the CartItem component.

The next thing we need to do is fix our Cart component. At the moment, the Cart component is hardcoded to render 3 items. It also takes two props - a cartOpen flag, which determines whether the cart is displayed or collapsed. It also takes a handleOpen function as a prop. This function toggles the cartOpen flag to display or collapse the cart. Since we have a context that manages this for us, we no longer need these props. Update the Cart component to match the following:

// components/Cart.js
import { useCartContext } from "../utils/context";
import CartItem from "./CartItem";

function Cart() {

  const { cartOpen, toggleCartVisibility, cart } = useCartContext();

  const orderTotal = cart.reduce(
    (accumulator, { price, quantity }) => (price * quantity) + accumulator,
    0
  );

    const [phoneNumber, setPhoneNumber] = useState("");

  const updatePhoneNumber = event => {
    setPhoneNumber(event.target.value);
  };

  return (
          <div
          className={`${
                    cartOpen ? "translate-x-0 ease-out" : "translate-x-full ease-in"} 
          fixed right-0 top-0 max-w-xs w-full h-full px-6 py-4 transition 
          duration-300 transform overflow-y-auto 
          bg-white border-l-2 border-gray-300`}
      >
      <div className="flex items-center justify-between">
        <h3 className="text-2xl font-medium text-gray-700">Your cart</h3>
        <button
          onClick={toggleCartVisibility}
          className="text-gray-600 focus:outline-none"
        >
          <svg
            className="h-5 w-5"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <hr className="my-3" />
      {cart.map(order => <CartItem key={order.id} {...order} />)}
      <div className="mt-8">
        <form className="flex items-center justify-center">
                    <label htmlFor="phoneNumber" className="hidden">Phone Number</label>
          <input
                        id="phoneNumber"
            className="form-input w-48"
            type="text"
                        placeholder="Enter phone number"
            value={phoneNumber}
            onInput={updatePhoneNumber}
          />
        </form>
      </div>
      <hr className="my-3" />
      <span className="text-l font-medium text-gray-700 mr-48">Total</span>
      <span>${orderTotal}</span>
      <a
                    className="flex items-center justify-center mt-4 px-3 py-2 bg-blue-600 
          text-white text-sm uppercase font-medium rounded hover:bg-blue-500 
          focus:outline-none focus:bg-blue-500"
       >
        <span>Checkout</span>
        <svg
          className="h-5 w-5 mx-2"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </a>
    </div>
  );
}

export default Cart;

In our newly modified component, we retrieve the cartOpen flag from our useContext hook, along with the items that have been added to the cart and the cartOpen flag. We also calculate the total amount of all the orders in the cart before returning the JSX for the Cart component.

Now that our cart is functional, we can update the cart from the products page. In the components directory, open ProductPage.js and update it to match the following:

// components/ProductPage.js
import { useState } from "react";
import { urlFor, PortableText } from "../utils/sanity";
import { useCartContext } from "../utils/context";

function ProductPage(props) {
  const {
    title,
    defaultProductVariant,
    mainImage,
    body,
    id: productId,
    slug,
  } = props;

  const {
    findOrderInCart,
    addOrderToCart,
    removeOrderFromCart,
    updateOrderQuantity,
    showCart,
    toggleCartVisibility,
  } = useCartContext();

  let orderInCart = findOrderInCart(productId);

  const [count, setCount] = useState(orderInCart?.quantity || 1);

  const handleCount = (value) =>
    !(count === 0 && value === -1) ? setCount(count + value) : count;

  const handleOrderButtonClick = () => {
    if (count === 0 && orderInCart) {
      removeOrderFromCart(productId);
      orderInCart = undefined;
    }
    if (!orderInCart && count > 0) {
      addOrderToCart({
        title,
        slug,
        id: productId,
        price: defaultProductVariant?.price,
        quantity: count,
        mainImage,
      });
    }
    if (orderInCart) {
      updateOrderQuantity(productId, count);
    }
    showCart();
  };

  return (
    <div className="container mx-auto px-6">
      <div className="md:flex md:items-center">
        <div className="w-full h-64 md:w-1/2 lg:h-96">
          <img
            className="h-full w-full rounded-md object-cover max-w-lg mx-auto"
            src={urlFor(mainImage)
              .auto("format")
              .width(1051)
              .fit("crop")
              .quality(80)}
            alt={mainImage?.alt || `Photo of ${title}`}
          />
        </div>
        <div className="w-full max-w-lg mx-auto mt-5 md:ml-8 md:mt-0 md:w-1/2">
          <h3 className="text-gray-700 uppercase text-lg">{title}</h3>
          <span className="text-gray-500 mt-3">
            ${defaultProductVariant?.price}
          </span>
          <hr className="my-3" />
          <div className="mt-2">
            <label className="text-gray-700 text-sm" htmlFor="count">
              Count:
            </label>
            <div className="flex items-center mt-1">
              <button
                onClick={() => handleCount(1)}
                className="text-gray-500 focus:outline-none focus:text-gray-600"
              >
                <svg
                  className="h-5 w-5"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 
                  9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              </button>
              <span className="text-gray-700 text-lg mx-2">{count}</span>
              <button
                onClick={() => handleCount(-1)}
                className="text-gray-500 focus:outline-none focus:text-gray-600"
              >
                <svg
                  className="h-5 w-5"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </button>
            </div>
          </div>
          <div className="flex items-center mt-6">
            <button
              onClick={handleOrderButtonClick}
              className="px-8 py-2 bg-indigo-600 text-white text-sm font-medium
              rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500"
            >
              Order Now
            </button>
            <button
              onClick={toggleCartVisibility}
              className="mx-2 text-gray-600 border rounded-md p-2
              hover:bg-gray-200 focus:outline-none"
            >
              <svg
                className="h-5 w-5"
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293
                2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0
                000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div className="mt-16 md:w-2/3">
        <h3 className="text-gray-600 text-2xl font-medium">Description</h3>
        {body && <PortableText blocks={body?.en} className="text-gray-600" />}
      </div>
    </div>
  );
}

export default ProductPage;

On the ProductPage component, we use the helper functions provided by the useCartContext hook to handle the functionality for adding the rendered product to the cart (if it is not already in the cart). Additionally, we can increase or decrease the units we wish to purchase.

On the products page, we see that on each product, there is a button to directly add the product to the cart. At the moment, it doesn't work. Clicking the cart icon also takes us to the product page which we don't really want. To fix that, open components/ProductCard.js and update it to match the following:

// components/ProductCard.js
import Link from "next/link";
import { urlFor } from "../utils/sanity";
import { useCartContext } from "../utils/context";

function ProductCard({ _id, title, mainImage, slug, defaultProductVariant }) {
  const { addOrderToCart } = useCartContext();

  const handleCartButtonClick = () => {
    const order = {
      title,
      slug,
      id: _id,
      price: defaultProductVariant?.price,
      quantity: 1,
      mainImage,
    };
    addOrderToCart(order);
  };

  return (
    <div className="w-full max-w-sm mx-auto rounded-md shadow-md overflow-hidden">
      <div
        className="flex items-end justify-end h-56 w-full bg-cover"
        style={{
          backgroundImage: `url('${urlFor(mainImage)
            .auto("format")
            .fit("crop")
            .width(750)
            .quality(80)}`,
        }}
      >
        <button
          onClick={handleCartButtonClick}
          className="p-2 rounded-full bg-blue-600 text-white mx-5 -mb-4
          hover:bg-blue-500 focus:outline-none focus:bg-blue-500"
        >
          <svg
            className="h-5 w-5"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293
              2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0
              000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
            />
          </svg>
        </button>
      </div>
      <div className="px-5 py-3">
        <Link href={`/products/${slug?.current}`}>
          <a>
            <h3 className="text-gray-700 uppercase">{title}</h3>
          </a>
        </Link>
        <span className="text-gray-500 mt-2">
          ${defaultProductVariant?.price}
        </span>
      </div>
    </div>
  );
}

export default ProductCard;

Here we use the addOrderToCart function provided by the useCartContext hook to add the product to the cart (or increase the units ordered if it has already been added). We also refactor the JSX such that the user is only taken to the project page by clicking the product title.

In order to see the changes we have made, we need to render the Cart component. If you look at lines 122–124 in components/Layout.js, you'll see that the Cart component is commented out. We can go ahead to uncomment those lines and remove the props that are being passed to the Cart component since those are being handled via the Context API. Update components/Layout.js to match the following code:

omponents/Layout.js
import { useState } from "react";
import Link from "next/link";
import Cart from "./Cart";
import { useCartContext } from "../utils/context";

function Layout({ children }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const handleMenu = () => setMenuOpen(!menuOpen);
  const { toggleCartVisibility } = useCartContext();
  return (
    <div className="bg-white">
      <header>
        <div className="container mx-auto px-6 py-3">
          <div className="flex items-center justify-between">
            <div className="hidden w-full text-gray-600 md:flex md:items-center">
              <svg
                className="h-5 w-5"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721
                  14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214
                  8.06298 10.063 6.27212 12.2721 6.27212C14.4813 6.27212 16.2721
                  8.06298 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767
                  12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721
                  10.2721C10.2721 9.16755 11.1676 8.27212 12.2721 8.27212C13.3767
                  8.27212 14.2721 9.16755 14.2721 10.2721Z"
                  fill="currentColor"
                />
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.39409 5.48178
                  3.79417C8.90918 0.194243 14.6059 0.054383 18.2059
                  3.48178C21.8058 6.90918 21.9457 12.6059 18.5183
                  16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698
                  14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404
                  4.26452 7.97318 6.93028 5.17324C9.59603 2.3733 14.0268 2.26452
                  16.8268 4.93028C19.6267 7.59603 19.7355 12.0268 17.0698 14.8268Z"
                  fill="currentColor"
                />
              </svg>
              <span className="mx-1 text-sm">NY</span>
            </div>
            <div
              className="w-full text-gray-700 md:text-center
              text-2xl font-semibold"
            >
              Pulp Inc.
            </div>
            <div className="flex items-center justify-end w-full">
              <button
                onClick={toggleCartVisibility}
                className="text-gray-600 focus:outline-none mx-4 sm:mx-0"
              >
                <svg
                  className="h-5 w-5"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293
                    2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0
                    000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
                  />
                </svg>
              </button>

              <div className="flex sm:hidden">
                <button
                  onClick={handleMenu}
                  type="button"
                  className="text-gray-600 hover:text-gray-500
                  focus:outline-none focus:text-gray-500"
                  aria-label="toggle menu"
                >
                  <svg viewBox="0 0 24 24" className="h-6 w-6 fill-current">
                    <path
                      fillRule="evenodd"
                      d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1
                      0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <nav
            className={`${
              menuOpen ? "" : "hidden"
            } sm:flex sm:justify-center sm:items-center mt-4`}
          >
            <div className="flex flex-col sm:flex-row">
              <Link href="/">
                <a className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0">
                  Home
                </a>
              </Link>
              <Link href="/products">
                <a className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0">
                  Shop
                </a>
              </Link>
              <Link href="/about">
                <a className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0">
                  About
                </a>
              </Link>
            </div>
          </nav>
          <div className="relative mt-6 max-w-lg mx-auto">
            <span className="absolute inset-y-0 left-0 pl-3 flex items-center">
              <svg
                className="h-5 w-5 text-gray-500"
                viewBox="0 0 24 24"
                fill="none"
              >
                <path
                  d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3
                  13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </span>

            <input
              className="w-full border rounded-md pl-10 pr-4 py-2
              focus:border-blue-500 focus:outline-none focus:shadow-outline"
              type="text"
              placeholder="Search"
            />
          </div>
        </div>
      </header>

      {/* // This Cart works… well sort of! */}
      <Cart />

      <main className="my-8">{children}</main>
      <footer className="bg-gray-200">
        <div
          className="container mx-auto px-6 py-3 flex
          justify-between items-center"
        >
          <a
            href="#"
            className="text-xl font-bold text-gray-500 hover:text-gray-400"
          >
            Pulp Inc.
          </a>
          <p className="py-2 text-gray-500 sm:py-0">All rights reserved</p>
        </div>
      </footer>
    </div>
  );
}

export default Layout;

Implementing the Checkout Feature

At the moment, clicking on the Checkout button does nothing. For this tutorial, we'll create a simple endpoint that expects a HTTP Post request containing the customer's phone number, the ordered items and the order total. When we send a request to this endpoint, it will send an SMS to the customer and return the content of the message as a response. We can do this in our current project as Next.js provides a solution for us to build APIs with it.

Before we build this endpoint, let's add the Twilio Javascript SDK to our project.

npm install twilio

This library is only for back end applications running on Node.js.

Next, update the .env file as follows:

# For Twilio Locally
TWILIO_MESSAGING_SID = "your_twilio_messaging_sid"
TWILIO_AUTH_TOKEN = "your_twilio_auth_token"
TWILIO_ACCOUNT_SID = "your_twilio_account_sid"
TWILIO_PHONE_NUMBER = "your_twilio_phone_number"

Next, in the utils directory, create a new file called twilio.js.

touch utils/twilio.js

In the utils/twilio.js file add the following:

utils/twilio.js
const twilio = require("twilio");
const client = new twilio(
  process.env.TWILIO_ACCOUNT_SID,
  process.env.TWILIO_AUTH_TOKEN
);
const twilioPhoneNumber = process.env.TWILIO_PHONE_NUMBER;
const messagingServiceSid = process.env.TWILIO_MESSAGING_SID;

const sendSMS = async (recipient, message) => {
  return await client.messages.create({
    body: message,
    to: recipient,
    from: twilioPhoneNumber,
    messagingServiceSid,
  });
};

export default sendSMS;

The sendSMS function will be used by our API to send text messages. It takes two parameters, the recipient's phone number and the message to be sent. In this function, a Twilio client is instantiated using our TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN. We also retrieve our twilio phone number and messaging_sid from the .env file. In addition to the recipient's phone number and message content, these are added to the options for the request to the Twilio rest API.

Next, create the endpoint to handle orders from the front-end. In the pages directory, create a new directory called api.

mkdir pages/api

In the pages/api directory, create a new file called order.js.

touch pages/api/order.js

In pages/api/order.js, add the following code:

// pages/api/order.js
import sendSMS from "../../utils/twilio";

const getMessage = (cart, orderTotal) => {
  const orderId = Math.random().toString(36).substring(2, 9);
  return `Congratulations, your order (${orderId}) worth $${orderTotal}\ 
  for ${cart.length} items has been processed successfully. The items will be \
  delivered within 3 working days.`;
};

const handler = async (request, response) => {
  switch (request.method) {
    case "POST":
      const { cart, orderTotal, phoneNumber } = request.body;
      const message = getMessage(cart, orderTotal);
      await sendSMS(phoneNumber, message);
      response.status(200).json({ message });
      break;
    default:
      response.status(405).end("This method is not allowed for this route.");
  }
};

export default handler;

Here, we declare an async function named handler which will handle the requests made to the API. Since we only want to handle POST requests, we return a 405 response for all other request methods. When a POST request is received, we retrieve the cart (ordered items), the total amount of the order, and the customer's phone number from the request body. Using the sendSMS helper function we created earlier, we send a request to the Twilio API and trigger the dispatch of a text message to the customer's phone number. We use the async/await keyword so that our API does not send the response before the Twilio API responds to our request.

To test this, we'll update our Cart component to make an API request and display the response message in a modal. But before we do that, let's create a component for the modal. Create a file named Modal.js in the components directory.

touch components/Modal.js

In Modal.js, add the following code:

// components/Modal.js
import React from "react";

const Modal = ({ title, message, showModal, closeModal }) => {
  return (
    showModal && (
      <div
        className="absolute inset-0 bg-gray-300 text-gray-900 
      bg-opacity-25 overflow-x-hidden"
      >
        <div
          className="relative px-4 min-h-screen md:flex 
      md:items-center md:justify-center"
        >
          <div
            className="bg-black opacity-25 w-full h-full absolute 
        z-10 inset-0"
          ></div>
          <div
            className="bg-white rounded-lg md:max-w-md md:mx-auto p-4 
          fixed inset-x-0 bottom-0 z-50 mb-4 mx-4 md:relative"
          >
            <div className="md:flex items-center">
              <div
                className="rounded-full border border-gray-300 flex 
              items-center justify-center w-16 h-16 flex-shrink-0 
              mx-auto"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              </div>
              <div
                className="mt-4 md:mt-0 md:ml-6 text-center 
              md:text-left"
              >
                <p className="font-bold">{title}</p>
                <p className="text-sm text-gray-700 mt-1">{message}</p>
              </div>
            </div>
            <div
              className="text-center md:text-right mt-4 md:flex 
            md:justify-end"
            >
              <button
                onClick={closeModal}
                className="flex items-center justify-center mt-4 px-3 
                py-2 bg-blue-600 text-white text-sm uppercase 
                font-medium rounded hover:bg-blue-500 focus:outline-none 
                focus:bg-blue-500"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  );
};

export default Modal;

Update the Cart component to match the following:

// components/Cart.js
import { useCartContext } from "../utils/context";
import CartItem from "./CartItem";
import React, { useState } from "react";
import Modal from "./Modal";

function Cart() {
  const {
    cartOpen,
    toggleCartVisibility,
    cart,
    removeAllItemsFromCart,
  } = useCartContext();

  const orderTotal = cart.reduce(
    (accumulator, { price, quantity }) => price * quantity + accumulator,
    0
  );

  const [showModal, setShowModal] = useState(false);

  const [modalTitle, setModalTitle] = useState(null);

  const [modalContent, setModalContent] = useState(null);

  const [phoneNumber, setPhoneNumber] = useState("");

  const updatePhoneNumber = (event) => {
    setPhoneNumber(event.target.value);
  };

  const closeModal = () => {
    removeAllItemsFromCart();
    setPhoneNumber("");
    setShowModal(false);
  };

  const makeOrder = () => {
    fetch("/api/order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ cart, orderTotal, phoneNumber }),
    })
      .then((response) => response.json())
      .then((data) => {
        setModalContent(data.message);
        setModalTitle("Success");
        setShowModal(true);
      });
  };

  return (
    <>
      <Modal
        title={modalTitle}
        message={modalContent}
        showModal={showModal}
        closeModal={closeModal}
      />
      <div
        className={`${
          cartOpen ? "translate-x-0 ease-out" : "translate-x-full ease-in"
        } 
          fixed right-0 top-0 max-w-xs w-full h-full px-6 py-4 transition 
          duration-300 transform overflow-y-auto 
          bg-white border-l-2 border-gray-300`}
      >
        <div className="flex items-center justify-between">
          <h3 className="text-2xl font-medium text-gray-700">Your cart</h3>
          <button
            onClick={toggleCartVisibility}
            className="text-gray-600 focus:outline-none"
          >
            <svg
              className="h-5 w-5"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <hr className="my-3" />
        {cart.map((order) => (
          <CartItem key={order.id} {...order} />
        ))}
        <div className="mt-8">
          <form className="flex items-center justify-center">
            <input
              className="form-input w-48"
              type="text"
              placeholder="Enter phone number"
              value={phoneNumber}
              onInput={updatePhoneNumber}
            />
          </form>
        </div>
        <hr className="my-3" />
        <span className="text-l font-medium text-gray-700 mr-48">Total</span>
        <span>${orderTotal}</span>
        <button
          onClick={makeOrder}
          className="flex items-center justify-center mt-4 px-3 py-2 bg-blue-600
          text-white text-sm uppercase font-medium rounded hover:bg-blue-500
          focus:outline-none focus:bg-blue-500"
        >
          <span>Checkout</span>
          <svg
            className="h-5 w-5 mx-2"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </button>
      </div>
    </>
  );
}

export default Cart;

Here, we add functionality to the Checkout button by calling the makeOrder function when it is clicked. This function makes a HTTP request to the api/order route which will be handled by the handler function we declared in pages/api/order.js. Upon a successful response, the modal is rendered letting the customer know that the order was processed successfully as shown below.

An SMS will also be sent to the specified phone number as shown below.

With that, our e-commerce website is ready for launch, Congratulations!!!

Conclusion

In this article, we've seen how programmable messaging can be used to provide a better customer experience by sending notifications in the form of text messages to customers with Twilio SMS as a case study. Using Twilio's JavaScript SDK, we were able to trigger an outbound SMS request to the Twilio API. The API reference as well as code samples in Javascript and other languages (PHP, Python, Java to name a few) can be found here

Headless CMS: Building apps with Nuxt and Sanity

Joel Olawanle — Mon, 21 Jun 2021 16:25:09 +0000

Introduction

Sanity is one of the most flexible platforms for building data-driven content solutions. This article explains what Sanity is all about and how to build a simple books list app. Sanity CMS stores our content, which will be editable in Sanity Studio. We will make this app with Nuxt and style it using pure CSS.

This three-in-one article will show you how to:

Set up Sanity Studio
Set up Sanity on Nuxt
Deploy both Sanity Studio and the Nuxt app so the app can work online

You can see the deployed app on Netlify and see the final code on GitHub.

Requirements/Prerequisites

To follow this guide, you should have:

Basic understanding of HTML, CSS, and JavaScript
At least little experience or knowledge of Vue.js
Node and npm or yarn installed on your computer
Basic knowledge of how the terminal works
A Sanity.io account # What is Sanity?

According to official Sanity documentation, Sanity.io structured content platform enables you to manage your text, images, and other media with APIs. Sanity Studio helps you quickly set up a customizable editing environment. Sanity also gives you access to many APIs, libraries, and tooling that help you have all your content available as a single source of truth.

One significant advantage of Sanity is its flexibility. You get the full privilege of setting up your dashboard and even the ability to customize it to your taste. You can invite new or add existing user accounts to access your projects by assigning different roles and access rights.

Sanity studio

Sanity Studio is where you can edit and manage your content when using Sanity. You set up your schemas in plain JavaScript then Sanity Studio builds the editing environment.

This open-source CMS connects to Sanity.io's datastore and is a single-page application written in React and published on npm. It also enables users to deploy Sanity Studio to their server.

Getting started with Sanity/setup

To get started, let's install the Sanity CLI globally. To do this, you first need to install Node and npm.

npm install -g @sanity/cli

As soon as the CLI finishes installing, it can create a new project. Run the following command wherever you store codes on your local computer.

sanity init

If this is your first time, this will log you into Sanity and then you would be able to create a project, set up a dataset, and generate files which are necessary to run the editing environment locally.

Note: If you don't have an account, Sanity will direct you on how to get one. Or, visit Sanity's website to create an account.

Once that is done, Sanity prompts you to create a new project. Tap Enter. Name your project books-note and choose the default dataset configuration by typing Y.

Finally, confirm the project path and choose a schema for your Studio. For this demo, you'll need to start with the "Clean project with no predefined schemas" option.

Start the Studio by first moving into the folder by running the following command in the terminal:

cd studio

You can now start the studio with the following command:

sanity start

After compiling, Sanity Studio will open on http://localhost:3333.

Note: You can also use commands like:

sanity docs : This is used to open sanity’s documentation in the browser
sanity manage : This helps to open the project settings in your browser
sanity help : This is used to explore the CLI manual

This project is clean and has no predefined schemas, so we have a dashboard like this:

Creating the mad lib schema from scratch

A schema describes the different field types in a document. You can choose from various types of schema.

For this guide, we'll create a schema for a books note app, which will just have five fields and one schema. This will be simple for a beginner to understand before creating many schemas, requiring organizing.

For now, when you open the Sanity file you created, the directory looks like this:

├── README.md
├── config
├── node_modules
├── plugins
├── sanity-schema.txt
├── sanity.json
├── schemas // content model lives here
├── static
├── tsconfig.json
└── yarn.lock

When Sanity Studio starts, it looks for the schema in a file named schema.js in your project's schemas folder. For now, since you don't have any schema, you will find something like this in your schema.js file.

    // 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";
    // 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! */
      ]),
    });

All your schemas go into the types array by defining the schema's title, name, type, and others like a description.

Finally, you will also define the fields. For our books schema, we will use something like this:

    {
      title: "Books",
      name: "books",
      type: "document",
      fields: [
        {
          title: "Book Name",
          name: "bookname",
          type: "string",
          description: "Enter book name here",
        },
        {
          title: "Author",
          name: "author",
          type: "string",
          description: "Enter Author's name here",
        },
        {
          title: "Description",
          name: "description",
          type: "string",
          description: "Enter book name here",
        },
        {
          name: "slug",
          title: "Slug",
          type: "slug",
          options: {
            source: "bookname",
            maxLength: 96,
          },
        },
        {
          title: "Book cover",
          name: "bookcover",
          type: "image",
          description: "Upload appropriate book cover image here",
          options: {
            hotspot: true,
          },
        },
        {
          title: "Notes",
          name: "mynotes",
          type: "array",
          description:
            "Type notes as you learn something new about this book here",
          of: [{ type: "block" }],
        },
      ],
    },

Save and check your browser, you will find something like this

One last thing, lets load our studio with contents which we will be fetching into the app.

What is Nuxt.js

Nuxt.js is a free, open-source, modern web application framework based on Vue.js, Node.js, webpack, and Babel, enabling us to create static pages, single-page applications (SPAs), and server-side rendered (SSR) applications, depending on our build’s purpose.

Setting up a Nuxt.js app

We can create our Nuxt app using the scaffolding tool create-nuxt-app or build from scratch. For this app, we will use the CLI.

To get started, run the following using your package manager of choice:

npx create-nuxt-app <project-name>
//or
yarn create nuxt-app <project-name>
//or
npm init nuxt-app <project-name>

Ensure you replace <project-name> with the name of your project (app).

Once installation is complete, Nuxt will present you with a series of questions to help configure your application for development, including name, Nuxt options, user interface (UI) framework, TypeScript, linter, testing framework, and the like.

Pick what you love to use but ensure you select rendering mode "Universal (SSR / SSG)" and deployment target "Static (Static/JAMStack hosting)."

Once you've completed your project, cd into your new project and start a local development server by running yarn dev.

cd blog
yarn dev

Connecting Sanity with Nuxt.js App

To use Sanity data in Nuxt, you need to install Sanity's @sanity/nuxt plugin to your Nuxt project, and few dependencies, by running the following command in your project's root directory:

yarn add @nuxtjs/sanity @sanity/client @sanity/image-url

@nuxtjs/sanity — nuxt/sanity enables us to access text, images, and other media with Nuxt and the Sanity headless CMS.
@sanity/client — Sanity Client is the official JavaScript client by Sanity. You can use it both in Node.js and modern browsers.
@sanity/image-url — This helper library generates image URLs and performs helpful image transformations through the Sanity asset pipeline. Read more in the official docs. There is also an easier-to-install alternative that works for Nuxt.

Once these packages are installed, we'll have to enable the module in our Nuxt configuration (nuxt.config.js).

    {
      buildModules: ['@nuxtjs/sanity/module']
    }

To get started, we need to add the Sanity configuration. @nuxtjs/sanity looks for a sanity.json file in your project root directory. Just copy over the sanity.json from your CMS, and you're fully configured. You can learn more about this in the official documents.

Finally, we need to update the Cross-Origin Resource Sharing (CORS) origin for our app to work. Visit Sanity Teams and click on your Sanity project. On your project's dashboard, click on Settings → API settings, then add your site address to the CORS origins field. For example, http://localhost:3000

You're now good to go!

Building a books list app

In this app, we use two pages: the index page for all books and the slug page to display each book. We also added the about page, but it's not necessary for this tutorial.

Display all books on the Homepage

    pages/index.vue

    <template>
      <div>
        <header>
          <div class="head">
            <Logo />
            <b>Books Note</b>
          </div>
        </header>
        <section id="body">
          <p class="top-label">
            You currently have <strong>{{ books.length }}</strong> Books!
          </p>
          <div class="books">
            <div v-for="book in books" :key="book.id">
              <NuxtLink class="link" :to="book.slug.current">
                <div class="book">
                  <img
                    :src="$urlFor(book.bookcover)"
                    :alt="book.bookname"
                    loading="lazy"
                    class="book-img"
                  />
                  <div class="book-info">
                    <b class="title"> {{ book.bookname }}</b>
                    <p class="author">{{ book.author }}</p>
                    <p class="desc">
                      {{ book.description }}
                    </p>
                  </div>
                </div>
              </NuxtLink>
            </div>
          </div>
        </section>
        <footer>
          <NuxtLink to="/about">
            <div class="abt-icon">
              <About />
            </div>
          </NuxtLink>
        </footer>
      </div>
    </template>
    <script>
    import { groq } from "@nuxtjs/sanity";
    export default {
      async asyncData({ $sanity }) {
        const query = groq`*[_type == "books"]`;
        const books = await $sanity.fetch(query);
        return { books };
      }
    };
    </script>

According to official Sanity documentation, Sanity uses Graph-Relational Object Queries (GROQ) to query data. GROQ is a declarative language designed to query collections of largely schema-less JSON documents.

In the above code, in the script section, the first thing we did was import the GROQ from @nuxtjs/sanity. We then fetched all books from Sanity so we can loop the array using a v-for directive (which you can find in the template section).

    async asyncData({ $sanity }) {
      const query = groq`*[_type == "books"]`;
      const books = await $sanity.fetch(query);
      return { books };
    }

At this point, we have successfully fetched all our books from Sanity and rendered them to our template section. However, if you attempt running this code, the image won't show and might even log an error in the console.

Let's see how to display images in Nuxt from Sanity. You can do this using the @sanity/image-url, which we installed earlier. The @sanity/image-url is a plugin, and we register it globally in Nuxt since we use it in two different files.

To register this plugin globally, you need to create a file in the plugins directory of your Nuxt project, then import imageUrlBuilder from @sanity/image-url. Finally, configure this plugin.

We created a file and named it “sanity-image-builder.js” in the plugins folder. Once you have created the file plugins/sanity-image-builder.js, paste the code below into the file.

    import imageUrlBuilder from "@sanity/image-url";

    export default ({ $sanity }, inject) => {
      const builder = imageUrlBuilder($sanity.config);
      function urlFor(source) {
        return builder.image(source).auto("format");
      }
      inject("urlFor", urlFor);
    };

With this, your image will work properly, but you will bind src and use of *$urlFor*.

    <img
      :src="$urlFor(book.bookcover)"
      :alt="book.bookname"
      loading="lazy"
      class="book-img"
    />

Note: You can give your file any name, but so you don't get confused when you use many plugins, this convention might be the best.

Finally, we use the slug and create a dedicated _slug file in our pages folder to have dynamic routes.

    <NuxtLink class="link" :to="book.slug.current">
    ...
    </NuxtLink>

This should Output something like this:

Create dynamic routes for books

On our index page, we rendered a NuxtLink for each book in our dataset, using the slug value to set the URL for each book. This means if we create a blog post called "heroes only" and set the slug to heroes-only, our Nuxt application should handle a request to the page/heros-only and retrieve the corresponding book information from Sanity.

Nuxt makes this possible by building in support for these kinds of pages. You create a new file in pages in the format _slug.vue. In your page's asyncData function, you can then use the params argument to reference the slug. Let's try this and see if it will work:

    pages/_slug.vue

    <script>
    export default {
      async asyncData({ params, $sanity }) {
        console.log(params) // { slug: "heros-only" }
      }
    }
    </script>

Let's now use the code below to query Sanity and fetch only content related to this slug.

    pages/_slug.vue

    <template>
      <div v-if="book">
        <header>
          <div @click="$router.back()">
            <Back />
          </div>
          <div class="head">
            <img
              :src="$urlFor(book.bookcover)"
              :alt="book.bookname"
              loading="lazy"
              class="book-img"
            />
          </div>
          <div class="book-info">
            <b class="title">{{ book.bookname }}</b>
            <p class="author">{{ book.author }}</p>
            <p class="desc">
              {{ book.description }}
            </p>
          </div>
        </header>
        <section id="body">
          <p class="top-label">
            My Notes
          </p>
          <div class="info" v-if="book.mynotes">
            <SanityContent :blocks="book.mynotes" />
          </div>
          <div class="info" v-else>
            <p>No notes available!</p>
          </div>
        </section>
        <footer>
          <NuxtLink to="/about">
            <div class="abt-icon">
              <About />
            </div>
          </NuxtLink>
        </footer>
      </div>
    </template>
    <script>
    import { groq } from "@nuxtjs/sanity";
    import { SanityContent } from "@nuxtjs/sanity/dist/components/sanity-content";
    export default {
      components: { SanityContent },
      async asyncData({ params, $sanity }) {
        const query = groq`*[_type == "books" && slug.current == "${params.slug}"][0]`;
        const book = await $sanity.fetch(query);
        return { book };
      }
    };
    </script>

In the code above, the only major difference is the query line where we check for both the _type of books (meaning the book database ) and also the slug which is unique to only one book.

    async asyncData({ params, $sanity }) {
      const query = groq`*[_type == "books" && slug.current == "${params.slug}"][0]`;
      const book = await $sanity.fetch(query);
      return { book };
    }

We also use block contents, though a simple one. You can learn more about Portable texts on Santiy's website. We imported SanityContent from @nuxtjs/sanity, making the process simple compared to using plugins, which also exists for images making the whole process of image rendering easier.

Note: The approach also exists for images, but we decided to use both. You can check out the *@nuxtjs/sanity* image formatting docs on Sanity's website.

After you import SanityContent from @nuxtjs/sanity, you can now use it in that page.

    <div class="info" v-if="book.mynotes">
      <SanityContent :blocks="book.mynotes" />
    </div>
    <div class="info" v-else>
      <p>No notes available!</p>
    </div>

We only used SanityContent on line two. We used an if-else statement to make the app more friendly.

This should output something like this when you click on any book:

Styling our app

We have explained how to do this without styling the app, so your results may not match what you see in the images above. To style this app, you can check out this repository to get the styling we used for each page, component, and even the images.

Deploy Nuxt App To Netlify

Finally, to round up this guide, let's deploy both Sanity Studio and our Nuxt.js app, so this is available online for everybody to access.

Netlify is a Git-based workflow and serverless platform to build, deploy, and collaborate on web apps. This all-in-one platform automates modern web projects. You can use many other platforms instead, for example, Vercel, Cloudflare Pages, and more.

To deploy to Netlify, we must first push our codes to GitHub. For this, we will use our terminal and some Git commands. In case you are not familiar with Git, you can check out this series on DEV Community.

First, let's create a repository on GitHub by clicking the New button or the plus on the top right corner.

Then, fill in the necessary information and click "create repository."

Next, open your terminal. Let's start by creating a new branch, then stage all our files so we can commit our changes using the following commands:

git init #initialize repository
git checkout -b main # create a main branch 
git add . # stage all files for this commit 
git commit -m "first commit" # commit the changes

Once this completes, we can now push to the created remote repository using the following commands:

git branch -M main
git remote add origin https://github.com/olawanlejoel/books-note.git #this would be differnt based on your created repository
git push -u origin main

When you refresh your repository, your code should show up!

Now, let's deploy to Netlify.

Log in to Netlify or sign up if it's your first time with your GitHub account. Once that is successful, Netlify will redirect you to your team page, where you can get a repo from GitHub and deploy.

Click on "New site from Git." A new page will appear to choose the Git provider where your site's source code is hosted. In our case, we choose GitHub. Once it's authorized, you can now search for the GitHub repository.

When you click on the repository, it brings you to a page where you set your site settings, change the build command to Nuxt generate, and click the "Deploy Site" button.

When your deployment is successful, you should get a URL for anyone to access your app. You can now deploy your Sanity Studio.

Deploy sanity studio and update the CORS origin

Sanity enables you to host your Studio, giving you a nice my-company.Sanity.studio URL. Since the Studio runs in a browser and communicates with the Sanity API, you can also host it yourself or on your favorite hosting service.

To host with Sanity, run the following command in your studio folder.

sanity deploy

Once you run this command, Sanity asks you to choose a unique hostname for your Studio.

Finally, we need to update the CORS origin for our app to work.

Visit https://www.sanity.io/teams and click on your Sanity project. On your project's dashboard, click on Settings → API settings, then add your site address to the CORS origins field.

Note: Sometimes, this happens automatically. You can confirm using https://www.sanity.io/teams.

Congratulations! Our application is now running smoothly online.

Conclusion

In this guide, we built a book note application using Nuxt.js and Sanity. We used Sanity Studio to edit our data.

This guide will help you set up your own version of this project to improve and add more features and functions.

Here are a few ideas to get you started:

Create a category schema and link to the books
Add filter, sort, and search functionality, making use of categories
Style the app using UI libraries like Vuetify, BootstrapVue, or Tailwind
Make specific schema fields required

To get started making this or another Nuxt.js Sanity project, explore the resources below.

Useful resources:

Happy coding!

Guide to server-side rendering with Deno and React

Oluyemi — Thu, 10 Jun 2021 18:35:40 +0000

Summary

In this tutorial, we will take a look at server-side rendering with Deno and React. To get a proper hang of the fundamental concepts, we will start by discovering what Deno is, and how it compares to Node in terms of security, package management, and so on.

Introduction

"Using Node is like nails on a chalkboard."

Ryan Dahl, creator of Node.js at 2018 JSConf EU.

While Node is still considered a great server-side JavaScript runtime and used by a large community of Software Engineers, even its creator admits that it leaves a lot to be desired. That's why he created Deno.js.

What is Deno?

As stated on its official website, Deno is a simple and secured runtime for JavaScript and TypeScript. According to Ryan, it was created to fix some of the design mistakes made when Node was created. It is gaining popularity and gradually getting adopted by the JavaScript and TypeScript community.

Why Deno?

There are quite a few reasons to choose Deno over Node.js.

The first is package management. With Node.js, packages dependencies are declared in a package.json file. The packages are then downloaded to the node_modules folder. This can make the project bloated, unwieldy, and sometimes difficult to manage. Deno takes a different approach to handle package dependencies. In Deno, package dependencies are installed directly from a provided URL and stored centrally. Additionally, every package is cached on the hard drive after installation which means they don’t have to be re-downloaded for subsequent projects.
The second key advantage is security. By default, Deno takes an opt-in approach where you have to specify the permissions for the application. This means that Deno scripts cannot (for example) access the hard drive, environment, or open network connections without permission. This not only prevents unwanted side-effects in our application but also reduces the impact of potentially malicious packages on our application.
Deno also provides TypeScript support by default which means that one can take advantage of all the benefits of static typing without any additional configuration.

What is server-side rendering?

Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser instead of rendering them in the browser (client-side).

This has the advantage of making applications more performant as most of the resource-intensive operations are handled server-side. It also makes Single Page Applications (SPA) more optimized for SEO as the SSR content can be crawled by search engine bots.

What we will build

In this tutorial, we will build a movie application to show some bestselling movies and A-list actors. Sanity.io will be used for the backend to manage contents, which includes creating, editing, and updating data for the project. While Deno and React will be used for the front end and server-side rendering respectively. Tailwind CSS will be used to style the application UI.

Prerequisites

To keep up with the concepts that will be introduced in this article, you will need a fair grasp of ES6. You will also need to have a basic understanding of React and TypeScript.

Additionally, you will also need to have the following installed locally. Please click on each one for instructions on how to download:

Deno
Node Package Manager (NPM)
Sanity CLI
A code editor of your choice. For example, VS Code.

Getting started

To get started, create a new directory in your terminal.

mkdir sanity-deno

cd sanity-deno

In the sanity-deno directory, create a new directory called frontend. This will hold the components for our React UI along with the code for handling SSR using Deno.

mkdir frontend

In the frontend directory, create two new directories, ssr and components.

mkdir frontend/ssr frontend/components

Setting up SSR

In the ssr directory, create a new file named server.tsx to hold our server side code.

cd frontend/ssr

touch server.tsx

For our Deno server, we are using the Oak middleware framework, which is a framework for Deno's HTTP server. It is similar to Koa and Express and the most popular choice for building web applications with Deno. In server.tsx, add the following code:

// frontend/ssr/server.tsx

import { Application, Router } from 'https://deno.land/x/oak@v7.3.0/mod.ts';

const app = new Application();
const port: number = 8000;

const router = new Router();
router.get("/", (context) => {
    context.response.body =
        `<!DOCTYPE html>
                 <html lang="en">
                 <head>
               <meta charset="UTF-8">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
               <title>Sanity <-> Deno</title>
                 </head>
                 <body>
               <div id="root">
           <h1> Deno and React with Sanity</h1>
                 </div>
                 </body>
                 </html>`;
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen({port});
console.log(`server is running on port: ${port}`);

Using the Application and Router modules imported from the Oak framework, we create a new application that listens to requests on port 8000 of the local workstation. We've also added an index route that returns the HTML content to be displayed by the browser. Tailwind is added to the project via the link declared in the head of the HTML element.

With this in place we can test our deno server. Run the following command (within the ssr directory).

deno run --allow-net server.tsx

In this command, we specify server.ts as the entry point for the deno application. We also use the --allow-net command to grant the application permission to access network connections.

Navigate to http://localhost:8000 and you will see:

Stop your application for now by pressing Ctrl + C.

Adding other dependencies

In the frontend directory, create a file named dep.ts

touch frontend/dep.ts

The dep.ts file will contain the frontend project dependencies. This is in line with the deno convention for managing dependencies. Our application will import the following packages:

React, ReactDOM and ReactDOMServer for our React UI.
React Router to handle routing between components
The Sanity image-url builder

Add the following dependencies to dep.ts

// @deno-types="https://denopkg.com/soremwar/deno_types/react/v16.13.1/react.d.ts"
import React from "https://jspm.dev/react@17.0.2";
// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://jspm.dev/react-dom@17.0.2/server";
// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from "https://jspm.dev/react-dom@17.0.2";
import imageURLBuilder from "https://cdn.skypack.dev/@sanity/image-url@0.140.22";
export {
  BrowserRouter,
  StaticRouter,
  Link,
  Route,
  Switch,
} from "https://cdn.skypack.dev/react-router-dom";
export { React, ReactDOM, ReactDOMServer, imageURLBuilder };

We use the @deno-types annotation to specify a URL where the React and ReactDOMServer types can be found. You can read more about providing types when importing here.

Creating the app component

Next, create the App component. In the frontend/components directory, create a file named App.tsx.

In App.tsx add the following:

// frontend/components/App.tsx

import { React } from "../dep.ts";

const App = () => <h1> App Component for Deno and React with Sanity</h1>;

export default App;

Here, we are still returning a h1 tag but this will serve as the entry point for React as we build further.

Rendering components via SSR

At the moment, we're returning HTML from the deno server but we also need to render our react components server side. To do this, update ssr/server.tsx to match the following:

// frontend/ssr/server.tsx

import { Application, Router } from 'https://deno.land/x/oak@v7.3.0/mod.ts';
import { ReactDOMServer, React } from "../dep.ts";
import App from "../components/App.tsx";

const app = new Application();
const port: number = 8000;

const router = new Router();
router.get("/", (context) => {
  context.response.body = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
    <title>Sanity <-> Deno</title>
</head>
<body >
    <div id="root">${ReactDOMServer.renderToString(<App />)}
    </div>
</body>
</html>`;
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen({ port });
console.log(`server is running on port: ${port}`);

Using the renderToString function, we are able to render our App component in the body of the HTML returned by our deno server.

Restart the application using the npm run start command and you will see the new body is reflected.

With this in place, we actually have our SSR set up. Let's add some content to our application by building the backend with Sanity.

Setting up the backend

In the sanity-deno directory, create a new directory called backend. Initialize a new Sanity project in the backend directory.

mkdir sanity-deno/backend

cd backend 

sanity init

You will be prompted to provide some information. Proceed as follows:

Select the Create new project option
Name the project react_deno-backend
Use the default dataset configuration (press Y)
Select the project output path (by default it would be the backend directory)
Select the movie project (schema + sample data) option. Using the arrow keys, navigate to that option and press enter when it turns blue.
Upload a sampling of sci-fi movies to your dataset on the hosted backend (press Y)

The Sanity CLI will bootstrap a project from the movie template, link the needed dependencies and populate the backend with some science fiction movies. Once the process is completed, you can run your studio. By default, the studio runs at http://localhost:3333.

sanity start

Your studio will be similar to the screenshot below.

To connect our frontend application with Sanity, we need the projectId and dataset used for our Sanity project. You can find this in the api node of backend/sanity.json. Make a note of it as we will be using it later on.

We also need to enable CORS on our backend to ensure that it honors requests made by the application. By default, the only host that can connect to the project API is the sanity studio (http://localhost:3333). Before we can make requests to the API, we need to add the host for our application (http://localhost:8000/) to the permitted origins. To do this, open your Sanity Content Studio. This will show you all the Sanity projects you have initialized. Select the project we are working on (react_deno-backend) and click on the Settings tab. Click on the API menu option. In the CORS Origins section, click the Add new origin button. In the form that is displayed, type http://localhost:8000 as the origin. Click the Add new origin button to save the changes made.

Creating a client for sanity studio

We need a client that will help us connect and retrieve data from our Sanity studio. In the frontend directory, create a new file called SanityAPI.ts.

touch frontend/SanityAPI.ts

Rune Botten created a sample client we can use with deno here. We will use this as a foundation and make some slight modifications to suit our use case. Add the following code to frontend/SanityAPI.ts.

// frontend/SanityAPI.ts

type SanityClientOptions = {
  projectId: string;
  dataset: string;
    apiVersion: string;
  token?: string;
  useCdn?: boolean;
};

type QueryParameters = Record<string, string | number>;

const sanityCredentials = {
    projectId: "INSERT_YOUR_PROJECT_ID_HERE",
    dataset: "production",
};

const sanityClient = (options: SanityClientOptions) => {
  const { useCdn, projectId, dataset, token, apiVersion } = options;
  const hasToken = token && token.length > 0;
  const baseHost = useCdn && !hasToken ? "apicdn.sanity.io" : "api.sanity.io";
  const endpoint = `https://${projectId}.${baseHost}/v${apiVersion}/data/query/${dataset}`;

  // Parse JSON and throw on bad responses
  const responseHandler = (response: Response) => {
    if (response.status >= 400) {
      throw new Error([response.status, response.statusText].join(" "));
    }
    return response.json();
  };

  // We need to prefix groq query params with `$` and quote the strings
  const transformedParams = (parameters: QueryParameters) =>
    Object.keys(parameters).reduce<QueryParameters>((prev, key) => {
      prev[`$${key}`] = JSON.stringify(parameters[key]);
      return prev;
    }, {});

  return {
    fetch: async (query: string, parameters?: QueryParameters) => {
      const urlParams = new URLSearchParams({
        query,
        ...(parameters && transformedParams(parameters)),
      });

      const url = new URL([endpoint, urlParams].join("?"));
      const request = new Request(url.toString());

      if (hasToken) {
        request.headers.set("Authorization", `Bearer ${token}`);
      }

      return (
        fetch(request)
          .then(responseHandler)
          // The query results are in the `result` property
          .then((json) => json.result)
      );
    },
  };
};

export const runQuery = async (
  query: string,
  callback: (json: any[]) => void
) => {
  const client = sanityClient({
    ...sanityCredentials,
    useCdn: false,
        apiVersion: "2021-03-25"
  });
  await client.fetch(query).then(callback);
};

export const urlFor = (source: any) =>
  imageURLBuilder(sanityCredentials).image(source);

Note the runQuery function. We provide a GROQ query as the first parameter, the second is a callback function to be executed on the response to the provided query. This function will be called anytime we need to pull data from our backend.

We also added a helper function named urlFor which will be used to generate image URLs for images hosted on Sanity.

Lastly, don't forget to replace the INSERT_YOUR_PROJECT_ID_HERE placeholder with your projectId as obtained earlier.

Building the components

Our application will display the movies and actors saved on our Sanity Content Lake. In the components directory, create a directory named movie to hold movie-related components and another named actor to hold actor-related components.

mkdir frontend/components/actor frontend/components/movie

In the movie directory, create two files named Movies.tsx and Movie.tsx. In the Movies.tsx, add the following:

// frontend/components/movie/Movies.tsx

import { React } from "../../dep.ts";
import Movie from "./Movie.tsx";
import { runQuery } from "../../SanityAPI.ts";

const { useState, useEffect } = React;
const Movies = () => {
  const [movies, setMovies] = useState<any>([]);
  const updateMovies = (movies: any[]) => {
    setMovies(movies);
  };
  useEffect(() => {
    const query = `*[_type == 'movie']{_id, title, overview, releaseDate, poster}`;
    runQuery(query, updateMovies);
  }, []);

  return (
    <div className="container mx-auto px-6">
      <h3 className="text-gray-700 text-2xl font-medium">
        Bestselling Sci-fi Movies
      </h3>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5">
        {movies.map((movie: any) => (
          <Movie key={movie._id} {...movie} />
        ))}
      </div>
    </div>
  );
};

export default Movies;

In this component, we make a GROQ request to the Sanity API using the helper client we created earlier. In our query, we request for the id, title, overview, release date and poster image for all the movies on our backend.

Next, add the following to Movie.tsx.

// frontend/components/movie/Movie.tsx

import { React } from "../../dep.ts";
import { urlFor } from "../../SanityAPI.ts";

const Movie:React.FC<any> = ({ title, overview, releaseDate, poster }) => {
  return (
      <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
        <img
          src={`${urlFor(poster.asset._ref)}`}
          alt={title}
        />
        <div className="px-6 py-4">
          <h3 className="text-xl mb-2 text-center">{title}</h3>
          <p className="text-md justify-start">
            {overview[0].children[0].text}
          </p>
        </div>
        <div className="align-bottom">
          <p className="text-gray text-center text-xs font-medium my-5">
            Released on {new Date(releaseDate).toDateString()}
          </p>
        </div>
      </div>
  );
};

export default Movie;

Using Tailwind, we design a card that holds the poster image for the movie with the image URL generated by the urlFor helper function we declared earlier. We are also displaying the other details provided by the Movies component.

As we did for the movies, create two files named Actor.tsx and Actors.tsx in the actor directory. Add the following to Actor.tsx

// frontend/components/actor/Actor.tsx

import { React } from "../../dep.ts";
import { urlFor } from "../../SanityAPI.ts";

const Actor: React.FC<any> = ({ name, image }) => {
  const defaultImageURL =
    "https://images.vexels.com/media/users/3/140384/isolated/preview/fa2513b856a0c96691ae3c5c39629f31-girl-profile-avatar-1-by-vexels.png";
  return (
    <>
      <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
        <img
          className="w-full"
          src={`${image ? urlFor(image.asset._ref) : defaultImageURL}`}
          alt={name}
        />
        <div className="px-6 py-4">
          <h3 className="text-xl mb-2 text-center">{name}</h3>
        </div>
      </div>
    </>
  );
};

export default Actor;

For actors, we only display their picture and name. Because we don't have pictures of all the actors in our backend, we specify an image url to be used if a picture is not available.

Next, in the Actors.tsx file, add the following:

// frontend/components/actor/Actors.tsx

import { React } from "../../dep.ts";
import { runQuery } from "../../SanityAPI.ts";
import Actor from "./Actor.tsx";

const { useState, useEffect } = React;
const Actors = () => {
  const [actor, setActors] = useState<any>([]);
  const updateActors = (actors: any[]) => {
    setActors(actors);
  };
  useEffect(() => {
    const query = `*[_type == 'person']{ _id, name, image}`;
    runQuery(query, updateActors);
  }, []);

  return (
    <div className="container mx-auto px-6">
      <h3 className="text-gray-700 text-2xl font-medium">A-List Movie Stars</h3>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5">
        {actor.map((actor: any) => (
          <Actor key={actor._id} {...actor} />
        ))}
      </div>
    </div>
  );
};

export default Actors;

Here, we make a GROQ query to retrieve all the actors in our backed and map through the returned array, rendering and Actor component for each object in the array.

With these in place, we can update our App.tsx file as follows:

// frontend/components/App.tsx

import { React, Link, Route, Switch } from "../dep.ts";
import Movies from "./movie/Movies.tsx";
import Actors from "./actor/Actors.tsx";

const App = () => {
  return (
    <div className="bg-white">
      <header>
        <div className="container mx-auto px-6 py-3">
          <nav className="sm:flex sm:justify-center sm:items-center mt-4">
            <div className="flex flex-col sm:flex-row">
              <Link
                to="/movies"
                className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
              >
                Movies
              </Link>
              <Link
                to="/actors"
                className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
              >
                Actors
              </Link>
            </div>
          </nav>
        </div>
      </header>
      <main className="my-8">
        <Switch>
          <Route path="/" exact>
            <Movies />
          </Route>
          <Route path="/movies">
            <Movies />
          </Route>
          <Route path="/actors">
            <Actors />
          </Route>
        </Switch>
      </main>
    </div>
  );
};

export default App;

Here, we implement the client side routing for the React UI as well as style the container for the components.

Hydrating our application

At the moment, our application HTML is generated server-side. However, our application will not have the desired functionality because our JavaScript functionality isn't loaded on our page -clicking any link will trigger another render server-side instead of the routing being handled client-side. To fix this, we need to hydrate our React application as well as provide the JavaScript to be loaded client-side. This way, once the index page is loaded, the JavaScript will take over and handle everything else.

Let's start by creating the JavaScript to be used client-side. In the ssr directory, create a new file called client.tsx. In it, add the following:

// frontend/ssr/client.tsx

import { React, ReactDOM, BrowserRouter } from "../dep.ts";
import App from "../components/App.tsx";

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Notice, we've also added a BrowserRouter to handle client-side routing once the page is loaded.

Next, we need to modify the ssr/server.tsx file to include the JavaScript bundle created (by Deno) from the ssr/client.tsx file. We also need to add a route that will allow the browser to download the bundled Javascript to be loaded client-side.

Update ssr/server.tsx to match the following:

// frontend/ssr/server.tsx

import { Application, Router } from 'https://deno.land/x/oak@v7.3.0/mod.ts';
import {
  React,
  ReactDOMServer,
  StaticRouter,
} from "../dep.ts";
import App from "../components/App.tsx";

const app = new Application();
const port: number = 8000;

const jsBundlePath = "/main.js";

const { diagnostics, files } = await Deno.emit("./ssr/client.tsx", {
  bundle: "esm",
  compilerOptions: { lib: ["dom", "dom.iterable", "esnext"] },
});

console.log(diagnostics);

const router = new Router();
router
  .get("/", (context) => {
    const app = ReactDOMServer.renderToString(
      <StaticRouter location={context.request.url} context={context}>
        <App />
      </StaticRouter>
    );
    context.response.type = "text/html";
    context.response.body = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
    <title>Sanity <-> Deno</title>
    <script type="module" src="${jsBundlePath}"></script>
</head>
<body>
    <div id="root">${app}
    </div>
</body>
</html>`;
  })
  .get(jsBundlePath, (context) => {
    context.response.type = "application/javascript";
    context.response.body = files["deno:///bundle.js"];
  });

app.addEventListener("error", (event) => {
  console.error(event.error);
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen({ port });
console.log(`Server is running on port ${port}`);

We specify the bundled Javascript path as /main.js and added it as a route to our oak application.

Next using the Deno.emit() compiler API, we transpile and bundle our client.tsx file into JavaScript that can be run on the browser. We also update the JSX for the index page to include a script tag pointing to our bundle path.

The Deno.emit() is currently marked as unstable which means we need to give our application explicit permission to perform this operation. We do this with the --unstable flag.

With this in place, our server side rendered app is ready for a test run. Start your Sanity project (if you stopped it).

cd backend

sanity start

Then run your deno application using the command below

cd frontend

deno run --allow-net --unstable --allow-read ./ssr/server.tsx

Navigate to http://localhost:8000/ to see your application in action.

Conclusion

Deno is relatively new in the world of web development but it is gradually gaining popularity and acceptance due to some of its advantages over Node.js. As seen in this tutorial, we learned about Deno and why it was built. We then proceeded to build a server-side rendered movie application using Deno and React.

For proper content management, we leverage the existing infrastructure put in place by Sanity to build the backend of the application. I hope this tutorial has given you some insight into what Deno is, and how to combine it with a frontend framework such as React.

The complete source code for the application built in this tutorial can be found here on GitHub. Happy coding!

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!

How to Create a Progressive Web Application with Vue and Sanity

Joel Olawanle — Wed, 09 Jun 2021 22:18:25 +0000

Introduction

In this article, you will learn how to build a simple web application with Vue.js, query your data from Sanity, and make it a Progressive Web Application (PWA) by installing the PWA plugin. In making it a PWA, the app will be able to be installed on mobile phones.

You can see the deployed app here and see the final code here.

Requirements/Prerequisites

To understand this guide you should have:

Basic understanding of HTML, CSS and Javascript
At least little experience or knowledge of Vue.js
Node and npm or yarn installed on your computer
Basic knowledge of how the terminal

What is PWA?

PWA stands for Progressive Web App. Google Chrome engineer Alex Russell introduced the term in his blog post in 2015. Since then, Google has been promoting the use of PWAs actively and has provided a lot of resources on the topic such as a site explaining them in more detail.

A PWA is an app built from the web technologies we all know and love, like HTML, CSS, and JavaScript, but with a feel and functionality that challenges an actual native app. Big applications like Twitter makes use of PWAs.

Why do you need PWA

Over the years, we have always had native apps but the cost of building and maintaining a native app is cumbersome and quite expensive. Luckily, we now have the option of building progressive web applications, which combines the features of a native app — such as native speed and offline usage — with the technology we use on the web, all without downloading from an app store.

Still thinking of why you should make use of PWA?

It is reliable and loads instantly
It loads and responds very fast
It feels natural

Interested in more examples of PWAs? See how to build a PWA with React in Rico's article.

If that sounds nice to you, then read on because we will install PWA in this article and set it up in our application.

What is Sanity?

Sanity is a content platform that treats your structured content as data. It comes bundled with an open-source, real-time headless CMS that can be customized with JavaScript. With Sanity, you can manage your text, images, and other media via their APIs.

Why Sanity

As you make use of Sanity, you will discover many reasons to continue using Sanity to store your content, but for this article I will highlight two:

Flexibility – Sanity gives you the full privileges of setting up your dashboard and even the ability to customize up to your taste. You are also entirely in charge of managing your dashboard. Sanity is the most flexible platform for building data-driven content solutions.
Support – Sanity has a robust community, always ready to either help you as a newbie or whenever you have challenges using Sanity. They have a huge slack channel that appreciates you whenever you build with sanity or provide content with sanity.

You can read more on why you should make use of Sanity here.

Sanity Studio

Getting setup with Sanity

To start a new project with Sanity, we'll install the Sanity CLI globally. To do this you will need to have Node and NPM installed.

npm install -g @sanity/cli

As soon as the CLI finishes installing, you'll be able to create a new project using it. Run the following command wherever you store your codes on your local computer.

sanity init

This will log you into Sanity, if this is your first time, and let you create a project, set up a dataset, and generate the files needed to run the editing environment locally.

Once that is done, you will be prompted to create a new project, tap Enter. Name your project vue-pwa and choose the default dataset configuration by typing Y.

The last thing will be to confirm the project path and choose a schema for your studio. For this demo, you'll need to start with the “Clean project with no predefined schemas” option.

To start the studio, move to the folder by running the following command in the terminal:

cd studio

Now you can start the studio with the following command:

sanity start

After compiling, the studio will open on http://localhost:3333.

Remember that when we were setting up our project we choose “clean project with no predefined schemas,” that is why we have a dashboard like this:

Creating a friends schema from scratch

A schema describes the different field types in a document. There are different types of schema you can choose from.

For this guide, we will be creating a schema for a friends list app. We need two schemas for this: one for the contacts and one for categories. The contact schema will have properties including first name, last name, age, religion, and phone number, while the category will have name and description. We will also see how to use options, implement dropdowns, and lots more within Sanity studio.

When the studio starts up, it looks for the schema in a file named schema.js in the schemas folder in your project. For now, since we don’t have any schema, you will find something like this in your schema.js file.

// 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";
// 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! */
  ]),
});

All your schemas go into the types array by defining the schemas title, name, type, and finally, the fields. For our contactDetails schema, we will be having something like this.

types: schemaTypes.concat([
    /* Your types here! */
    {
      title: "Personal Details",
      name: "personalDetails",
      type: "document",
      fields: [
        {
          title: "Firstname",
          name: "firstname",
          type: "string",
        },
        {
          title: "Lastname",
          name: "lastname",
          type: "string",
        },
        {
          title: "Nickname",
          name: "nickname",
          type: "string",
        },
        {
          name: "slug",
          title: "Slug",
          type: "slug",
          options: {
            source: "nickname",
            maxLength: 96,
          },
        },
        {
              title: "Birth Day",
              name: "birthday",
              type: "number",
            },
            {
              title: "Birth Month",
              name: "birthmonth",
              type: "string",
              options: {
                list: [
                  { title: "January", value: "January" },
                  { title: "Febuary", value: "Febuary" },
                  { title: "March", value: "March" },
                  { title: "April", value: "April" },
                  { title: "May", value: "May" },
                  { title: "June", value: "June" },
                  { title: "July", value: "July" },
                  { title: "August", value: "August" },
                  { title: "September", value: "September" },
                  { title: "October", value: "October" },
                  { title: "November", value: "November" },
                  { title: "December", value: "December" },
                ], // <-- predefined values
                layout: "dropdown", // <-- defaults to 'dropdown'
              },
            },
        {
          title: "Phone Number",
          name: "phoneNumber",
          type: "string",
          options: {
            maxLength: 11,
          },
        },
        {
          title: "Profile image",
          name: "profileImage",
          type: "image",
          options: {
            hotspot: true,
          },
        },
        {
          title: "Short Bio",
          name: "excerpt",
          type: "string",
          options: {
            maxLength: 200,
          },
        },
      ],
    },
  ]),

Once you save and check your browser, you will find something like this

Taking a deeper look at the code above, each Object represents a field and must have a title, name, and type.

Title: The display name for this field
Name: The identifier for this field used in the api's
Type: The type of this field e.g string, image, e.t.c. You can find the full list of type here.

For some fields there is an additional property called options, this is used to add more features to our fields like maxlength, dropdown, etc.

The second schema to create is the category schema which will be added just below the contact details schema object.

{
  name: "category",
  title: "Category",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "description",
      title: "Description",
      type: "text",
    },
  ],
}

Save the file, and the studio will refresh to show you both types in the studio.

One last thing to do will be to include a category in our contactDetails schema. It displays the category fetched from the category schema for you when filling in contact detail. To do that, we will create a new object anywhere in the array we want this field to be

{
  name: "categories",
  title: "Categories",
  type: "array",
  of: [{ type: "reference", to: { type: "category" } }],
},

Once you save and click on the pencil at the top so you fill in a contact detail, you will see the categories field there.

Organizing our schema

Having all our schemas in just one will always work but can become very difficult to maintain with more added. It is recommended to describe each document type in a separate file and import them into schema.js like this:

// 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";

// importing two schema files 
import personalDetails from "./contactDetails";
import category from "./category";

// 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! */
    personalDetails,
    category,
  ]),
});

Looking deeper at the code above, we imported two files that export the schemas and call them in the types array. At this point, your directory will look like this:

One last thing, lets load our studio with contents which we will be fetching into the app.

What is Vue.js

VueJS is a progressive JavaScript framework used to develop interactive web interfaces and focuses more on the front end. It can be integrated with other projects and libraries.

Setting up a Vue.js app

There are many ways of making use of Vue.js, such as CDN and CLI but for this guide, we will make use of the CLI.

To install via the CLI, run the following command:

npm install -g @vue/cli

Once this installs, the next thing will be to scaffold our application.

vue create vue-friends-app

Select "Manually select features" when prompted to choose the preset.

Vue CLI v4.5.12
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

We are doing this so we just install Vue router and PWA from start instead of running the command later. The will prompt some features, ensure you select PWA and router

Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Once you hit Enter, it will ask you to choose the version of Vue.js for your project, select 3.x (Preview)

Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)

For history mode, you can type n, and for the linter, you can choose any options that make sense for the way you code.

Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Once you are done, Vue begins to install everything you selected. After the installation, you can move into the project's root directory to start the development server.

npm run serve

Then we can open our app in the browser at http:localhost:8080.

Connecting Sanity with Vue.js App

For us to make use of Sanity data in Vue.js, we need to install few dependencies by running the following command in your project's root directory. This will install the Sanity Client and other packages that will be used later.

npm install @sanity/client @sanity/image-url

@sanity/client — Sanity Client is the official JavaScript client by Sanity and can be used both in Node.js and modern browsers.
@sanity/image-url — An helper library used to generates image URLs and perform helpful image transformations through the Sanity asset pipeline. Read more on the official docs here.

Once these packages are installed, we'll create a new file named client.js inside the src directory and then add the following code to the client.js file.

import sanityClient from "@sanity/client";

export default sanityClient({
  projectId: "Your Project ID Here", // find this at manage.sanity.io or in your sanity.json
  dataset: "production", // this is from those question during 'sanity init'
  useCdn: true,
  apiVersion: "2021-03-25"
});

Note: To get your project ID, visit https://www.sanity.io/teams, click on the project so it displays full info about the project including the Project ID.

Finally, You will also need to add the port where the Vue.js development server is running to the CORS origins of your Sanity project. Visit https://www.sanity.io/teams and click on your Sanity project. On your project's dashboard, click on Settings → API settings and then add http://localhost:8080/ to the CORS origins field.

You can also use the Sanity CLI to add the CORS origins to your project by running the following command in the studio folder of your project. Read more about this here.

sanity cors add http://localhost:8080

You will also need to update the browserslist in the Vue.js project's package.json. Replace not dead with not ie <= 8.

"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]

Building the friend's list app

The app in this guide will fetch all your friends from the Sanity API, and open up contact details on a new page.

In this app, we will be making use of two pages which are the Home page for all contacts and the personal details page. Note: Router is already installed. That’s why we have a home page instead of an index page.

Display all friends on the Homepage

<template>
  <div class="home">
    <div class="head-info">
      <p class="title">Welcome!</p>
      <p class="sm-text">
        You currently have
        <strong>{{ personalDetails.length }}</strong> Friend(s).
      </p>
    </div>
    <div class="friends-area">
      <p class="sm-title">Friend(s)</p>
      <div class="friends">
        <div
          class="friend"
          v-for="personalDetail in personalDetails"
          :key="personalDetail.id"
        >
          <img
            v-if="personalDetail.image"
            :src="imageUrlFor(personalDetail.image)"
          />
          <p>{{ personalDetail.firstname }} {{ personalDetail.lastname }}</p>
          <router-link :to="`/personalDetails/${personalDetail.slug.current}`">
            <button>View</button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import sanity from "../client";

import imageUrlBuilder from "@sanity/image-url";
const imageBuilder = imageUrlBuilder(sanity);

const query = `*[_type == "personalDetail"]{
  _id,
  firstname,
  lastname,
  slug,
  "image": profileImage{
  asset->{
  _id,
  url
}
}
}[0...50]`;

export default {
  name: "Home",
  data() {
    return {
      loading: true,
      personalDetails: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    imageUrlFor(source) {
      return imageBuilder.image(source);
    },
    fetchData() {
      this.error = this.personalDetail = null;
      this.loading = true;
      sanity.fetch(query).then(
        (personalDetails) => {
          this.loading = false;
          this.personalDetails = personalDetails;
        },
        (error) => {
          this.error = error;
        }
      );
    },
  },
};
</script>

GROQ (Graph-Relational Object Queries) is a declarative language designed to query collections of largely schema-less JSON documents.

Note: If you're not yet familiar with GROQ which is used to query Sanity for data, check the official docs here.

In the above code, the first thing we did was import the client from the file we created so we can have access to the sanity studio.

import sanity from "../client";

After importing the client file, the next thing was to import imageUrlBuilder from @sanity/image-url which we use to generate image URLs for our images by creating a method called imageUrlFor() and making use of it inside the template.

Note: A lot of things can be done with imageUrlBuilder, such as specifying width and height. You can read more about imageUrlBuilder here.

The GROQ query fetched all the documents of _type of personalDetail . This will return all the contacts.

For the query to be executed we created a function fetchData() to request the data using sanity.fetch() and pass the query variable in it. We then stored the fetched content in the personalDetails array using this.personalDetails=personalDetails.

In the template section, you will notice the component enables user navigation in a router-enabled app. The slug of the post is passed to its prop. You can read more about this component here.

<router-link :to="`/personalDetails/${personalDetail.slug.current}`">
  <button>View</button>
</router-link>

Finally, we looped the personalDetails array and added the queried data to the template area.

Restart the development server and navigate to http://localhost:8080/ in your browser. Your app will look like this.

Create dynamic routes for friends

To create a dynamic route, we will be making use of a component, creating a new file named personalDetail.vue in the src/components directory.

The next thing will be to define this route in router/index.js file.

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
  },
  {
    path: "/personalDetails/:slug",
    name: "personalDetail",
    component: () => import("../components/personalDetail.vue"),
  },
];

Then use the code below in your personalDetail.vue component.

<template>
  <div class="personalDetails">
    <div class="loading" v-if="loading">Loading...</div>

    <div v-if="error" class="error">
      {{ error }}
    </div>
    <div>
      <p class="back">&#x3c; Back</p>
    </div>
    <div class="main" v-if="personalDetail">
      <div class="container">
        <img
          v-if="personalDetail.image"
          :src="imageUrlFor(personalDetail.image)"
          class="pic"
        />
        <div class="content">
          <p class="name">
            {{ personalDetail.firstname }} {{ personalDetail.lastname }}
          </p>
          <p class="nickname">{{ personalDetail.nickname }}</p>
          <div class="main-info">
            <p class="bio">
              <span class="label">Description</span><br />
              {{ personalDetail.excerpt }}
            </p>
            <p class="phone-number">
              <span class="label">Phone Number</span><br />
              {{ personalDetail.phoneNumber }}
            </p>
            <p class="age">
              <span class="label">Age</span><br />
              {{ personalDetail.birthmonth }} {{ personalDetail.birthday }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sanity from "../client";
import imageUrlBuilder from "@sanity/image-url";

const imageBuilder = imageUrlBuilder(sanity);

const query = `*[slug.current == $slug]{
  _id,
  firstname,
  lastname,
  nickname,
  slug,
  birthday,
  phoneNumber,
  birthmonth,
  "image": profileImage{
  asset->{
  _id,
  url
}
},
  categories,
  excerpt
}[0]
`;

export default {
  name: "PersonalDetails",
  data() {
    return {
      loading: true,
      personalDetail: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    imageUrlFor(source) {
      return imageBuilder.image(source);
    },
    fetchData() {
      this.error = this.personalDetail = null;
      this.loading = true;
      sanity.fetch(query, { slug: this.$route.params.slug }).then(
        (personalDetail) => {
          this.loading = false;
          this.personalDetail = personalDetail;
        },
        (error) => {
          this.error = error;
        }
      );
    },
  },
};
</script>

This is similar to the previous route, except we are fetching this component via a dynamic route. We'll use its unique slug to fetch the data for a specific person, which is accessed using this.$route.params.slug. This is the route object present in Vue Router, representing the currently active route. You can read more about Vue Router route object here. We also make use of *[slug.current == $slug] to query our data via GROQ.

Styling our app

The app looks a little odd right now, but you can check out this repository to get the styling used for each of the pages, components, and even the images used here.

PWA

In this section, we'll set up PWA for our app. Be sure PWA is already installed by checking your package.json file in the root directory and looking in the dependencies array. You should find register-service-worker and @vue/cli-plugin-pwa alongside their version. If it isn't there, you will have to install PWA using the command below and read more info here.

vue add pwa

Setting up the PWA

The service worker added with this plugin is only enabled in the production environment (e.g. only if you run npm run build or yarn build). Once you run either of the build command, you will have a folder structure like this in your dist folder.

This won’t work for us or won’t be a best idea since we would be deploying our app online. To configure our PWA app, this is handled via the pwa property of either the vue.config.js file or the "vue" field in package.json.

vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json). You can create this file in the root of your project manually if it’s not there. Read more here.

Once you have created the file, add the code below

// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: "Friends List",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
  },
};

You can read about these settings in the vue.js pwa docs here.

PWA caching

If you try to access the app offline at this point, it won’t show anything. For our app to work offline, we need service workers. The first thing we will do is create a file named service-worker.js or sw.js in the src folder and use the code below.

// Inside src/service-worker.js
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

Then in the vue.config.js file we created, we will configure the workbox plugin and include the service worker file. Our vue.config.js file will now look like this

// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: "My App",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    // configure the workbox plugin
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: "src/service-worker.js",
      // ...other Workbox options...
    },
  },
};

At this point, our app can now work offline. Our data won’t be stored offline unless it’s being cached, to confirm check the offline box in the service worker area of your application when you inspect the app and refresh your browser.

Deployment

To round up this guide, let's deploy both the Sanity Studio and our Vue.js app, so this can be available online for everybody to access.

Deploy Vue app to Netlify

Netlify is a Git-based workflow and serverless platform used to build, deploy, and collaborate on web apps. It is an all-in-one platform for automating modern web projects.

Note: There are many other platorms you can use e.g vercel, cloudflare pages, e.t.c.

To deploy to Netlify, we will have to push our code to GitHub. For this, we will be using the terminal and making use of git commands. In case you are not familiar with git, you can check out this series on DevCommunity.

First thing, lets create a repository on GitHub

Then fill in the necessary info and create repo!

Back in the terminal, let's start by creating a new branch, then stage all our files so we can commit our changes using the following commands:

git init #initialize repository
git checkout -b main # create a main branch
git add . # stage all files for this commit
git commit -m "first commit" # commit the changes

Once this is done, we can now push to the created remote repository using the following commands:

Note: You would have to replace the GitHub remote URL with yours.

git branch -M main
git remote add origin https://github.com/olawanlejoel/friends-list-app.git
git push -u origin main

When you refresh your repository, your code should show up!

Now we can deploy to Netlify!

Login to Netlify or sign up if it’s your first time with your GitHub account. Once that is successful, you will be redirected to your team page where you can get a repo from GitHub and deploy.

Click on “New site from Git," a new page will appear for you to choose the Git provider where your site’s source code is hosted. In our case, we will choose GitHub. Once it's authorized, you can now search for the GitHub repository

When you click on the repository, it will bring you to a page where you set your site settings

If you have something like this, you can now deploy your site. There are many other things you can do like Domain settings, e.t.c.

Once your deployment is successful, you can now deploy your sanity studio.

Deploy sanity studio and update the CORS origin

Sanity allows you to host your studio, giving you a nice my-company.sanity.studio URL. Since the Studio runs in the browser and communicates with the Sanity API, it is also possible to host yourself or your favorite hosting service. To host with Sanity, run the following command in your studio folder.

sanity deploy

Once you run this command, it will ask you to choose a unique hostname for your Studio.

Finally, we need to update the CORS origin for our app to work. If you check the deployed Vue.js app, you will notice it did not fetch your data. For us to fix this issue, copy your site address e.g. https://friendslist-app.netlify.app/ so we can add it to the allowed CORS origins like we did earlier.

Visit https://www.sanity.io/teams and click on your Sanity project. On your project's dashboard, click on Settings → API settings and then add your site address to the CORS origins field.

Congratulations! we now have our application running smoothly online.

Conclusion

In this guide, we built a friends list application using Progressive Web App (PWA) functionality with Vue.js and Sanity. When you access this web app via the deployed link, you would be asked to add "to home screen." We made use of Sanity Studio to edit our data. This guide will help you set up your own version of this project to improve on and add certain features and functionalities.

Here are a few ideas to get you started:

Cache the data from Sanity and make it visible offline
Add Filter, Sort, and Search functionality making use of categories.
Implement notification with PWA
Style the app using UI libraries like Vuetify, BootstrapVue, or Tailwind.
Make certain fields of the schema required

Useful resources

Happy coding!

Build a Webhook Listener with React Charts and Sanity

Fikayo Adepoju — Tue, 27 Apr 2021 15:28:48 +0000

Introduction

In this fast-paced world, even the smallest delay in communicating information from one end to another can be the difference between loss or gain of money, customers, or app traffic. The ability to communicate new information in real-time is fast becoming a de facto feature in every modern application. In this tutorial, you will learn and demonstrate the use of Sanity Listeners, a feature of Sanity that enables developers to build real-time functionality into their applications.

What are Sanity Listeners

Listeners are a part of the Sanity API that allows you to listen to content changes in your Sanity database in real-time. Sanity Listeners are built around the Server-Sent Events protocol thus they push updates to clients when data changes occur in the Sanity project. You can learn more about Sanity Listeners here.

Why use Sanity Listeners

If you're building applications like stock market visualization charts, document collaboration apps, or any application that requires users to get updates in real-time, then you need Sanity Listeners to help you listen to changes on your data and respond accordingly. They also save you from the complexity of implementing the WebSocket API or Server-Sent Events protocol from scratch.

What are we going to build?

In this tutorial, we will build a simple data visualization chart using React with Sanity listeners. This chart will update in real-time using through the power of listeners. Sanity will be used to hold data for this chart and the chart will get updated automatically as new data is fed in through Sanity studio. Shown below is a preview of the finished chart application

Prerequisites

To follow along with this tutorial, there a couple of things you need to have set up:

Node.js installed on your machine (version > = 10)
Sanity CLI installed (find details on how to install the CLI here)
Basic understanding of Javascript and Node.js
Basic knowledge of React

Setting up the Chart Data

In this section, you will be setting up the database that will power the charts. The data will represent the monthly sales for a fictitious product. This will be a simple chart so all that will be needed is the month and the total sales for that month. You will build a schema for this using Sanity and populate some test data.

Creating the Sanity Project

To begin the chart project, you first need to create the folder for the project. This folder would contain the Sanity Studio application to manage the chart data and the react application that displays the chart.

Run the following commands to create the project folder and go into the root of the folder:



mkdir react-charts
cd react-charts

Next, create a new folder where the Sanity studio will reside by running the following command:



mkdir cms
cd cms

Now within the cms folder, run the following command to create a new Sanity project:



sanity init

You might be prompted to log in to your Sanity account through the browser if you have not already done this or the last login session has expired.

You will then be asked if you want to create a new project or use an existing one. Select "creating a new project" and the CLI tool will begin the project creation process by bringing up an interactive CLI that will prompt you for a few answers.

Below are the questions from the process and the replies you should provide for this demo. Italics are used to describe an action to perform

Project name: charts-cms
Use the default dataset configuration: Y
Project output path: Hit the Enter key to select the default current directory
Select project template: Clean project with no predefined schemas

This will then proceed to create the project and scaffold a new Sanity studio project inside the cms folder. You can now run the Studio by running the following command:



sanity start

This command will get the studio up and running, navigate to [http://localhost:3333/](http://localhost:3333/) and you will see a schema-less dashboard as shown below:

Note that you might be prompted to log into your Sanity account before the studio dashboard is shown.

Defining the Schema

Time to set up the data. You will be creating a schema for the total number of product sales for each month. Withing the code, locate the schemas folder inside cms, create the file salesrecords.js and enter the following code in the file:



// ./cms/schemas/salesrecords.js

export default {
    name: "salesrecords",
    title: "Sales Records",
    type : "document",
    fields : [
        {
            name: "month",
            title: "Month",
            type: "string"
        },
        {
            name: "totalsales",
            title: "Total Number of items sold",
            type: "number"
        }
    ]
}

In the code above, a salesrecords schema is created with two fields. The month field holds the name of the month of the year while the totalsales field holds the number of sales made for that month

To add this schema into the project, replace the content of schema.js inside the schemas folder with the following:



// ./cms/schemas/schema.js

import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'

import salesrecords from "./salesrecords"

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    salesrecords
  ]),
})

In this file, the salesrecords schema that was just created is imported and added to the schema types present in the project.

Entering Data

Now return to the browser where the Studio is opened up and refresh the page, you will now see the schema management tab. Click it and add data for the month of January as shown below:

For the purpose of this demo, add data up to July so as to have enough test data to work with. Also ensure that you're entering positive values only and preferably in increments of 10 and 5 for example 65, 45, 70, 85, etc., this will help create a chart that is easy to visualize the bar heights.

Creating the Chart Application

Now that the Sanity data server has been set up for this project, it's now time to build the client application. A React application will be created to visualize the sales data on a bar chart using Chartjs.

Before creating the React app, you need to get the "project id" for your Sanity project. Go to your Sanity dashboard like below:

Click on the charts-cms project and you will see the "project id" on the details screen for the project.

Project Setup

To set up the React chart application, the first step is to scaffold a new React application using the create-react-app utility. Go out of the cms folder back into the main project folder (i.e react-charts) then run the following command to create a new React application:



npx create-react-app sales-chart

This will scaffold a new React application in the sales-chart folder.

Once this process is done, go into the root of the folder. To build the chart UI, connect to and receive updates from the server, the Sanity Client and react-chartjs-2 packages will need to be installed.

Install these by running the following command at the root of the folder:



npm install --save react-chartjs-2 chart.js @sanity/client

Once these are installed, you now have all you need to build the chart application.

Building the Chart Page

The React client application will need to make a connection to the Sanity server and listen for updates on the salesrecords schema. To achieve this, you will be creating a React hook to hold the logic for connecting to and listening to updates from the server.

Inside the src folder of the React app, create the file useSanityListener.js and add the following code:



// ./sales-chart/src/useSanityListener.js

import { useEffect, useState } from "react";

const useSanityListener = (client) => {
  const [salesRecords, setRecords] = useState([]); 

  //Listen for data changes in Sanity
  const query = '*[_type == "salesrecords"]';
  const params = {};

  fetchRecords();

  useEffect(() => {

    const subscription = client
    .listen(query, params)
    .subscribe(newRecords => {
        console.log(JSON.stringify(newRecords.result, null, 4));

        let item = newRecords.result;

        let records = [...salesRecords, item];
        setRecords(records);

    })


    return () => {
        subscription.unsubscribe();
    };
  }, [client]);

  function fetchRecords(){
    client.fetch(query, params).then(records => {
        console.log(records);
        setRecords(records)

    })
  }


  return { salesRecords, setRecords };
};

export default useSanityListener;

In the file above, a useSanityListener method is then created and exported from the file.

This method takes in a Sanity project client and uses it to access the Sanity project.

A fetchRecords method that uses the query variables defined to fetch and set the records in the salesrecords schema is called to fetch records immediately the hook is initialized:



const query = '*[_type == "salesrecords"]';
const params = {};

fetchRecords();

Next, a useEffect hook is used to set up a subscription to the salesrecords schema using Sanity listeners by calling the listen method on the Sanity client and passing it the query to listen on and other parameters that might be required in the query (non for this demo). The subscribe method is then chained to the listen call and passed a callback that appends the newly created item to the records.

With this module in place, you can now build the chart UI. Locate src/App.js and replace the content with the code below:



// ./sales-chart/src/App.js

import {useEffect, useState} from "react"
import './App.css';
import useSanityListener from "./useSanityListener";
import { Bar } from 'react-chartjs-2';
const sanityClient = require('@sanity/client');

function App() {

  const client = sanityClient({
    projectId: "YOUR_PROJECT_ID",
    dataset: 'production',
    apiVersion: 'v2021-03-25',
    useCdn: false // `false` if you want to ensure fresh data
  })

  const { salesRecords } = useSanityListener(client);

  const [records, setSalesRecords] = useState([]);
  const [chartData, setChartData] = useState({});

  useEffect(() => {

    if(salesRecords && salesRecords.length > 0){
      console.log(salesRecords)
      let labels = ['January', 'February','March', 'April', 'May', 'June','July'];


      let salesData = labels.map(label=> {

        console.log(label);

        const monthData = salesRecords.filter(record => record.month === label);

        console.log(monthData);

        return monthData[0].totalsales
      })
      //let salesData = salesRecords.map(record => record.totalsales);

      console.log(labels);
      console.log(salesData)

      const data = {
        labels: labels,
        datasets: [
          {
            label: 'Sales Data Set',
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
            hoverBorderColor: 'rgba(255,99,132,1)',
            data: salesData
          }
        ]
      }

      setChartData(data)

      setSalesRecords(salesRecords);
    }


  }, [salesRecords])

  return (
    <div className="App">
      <h1>Sales Realtime Charts</h1>
      <Bar
        data={chartData}

        options={{
          maintainAspectRatio: false,
          scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
          },
        }}
      />

    </div>
  );
}

export default App;

Breaking down the file above, the dependencies are imported including the useSanityListener hook and the Bar chart module from react-chartjs-2.

The Sanity SDK is used to create an instance of the Sanity client.

The dataset property is set to production which was the default dataset selected when creating the Sanity project in the previous section:




const client = sanityClient({
    projectId: "YOUR_PROJECT_ID",
    dataset: 'production',
    apiVersion: 'v2021-03-25', 
    useCdn: false // `false` if you want to ensure fresh data
})

The useCdn property is set to false to ensure that fresh data is gotten always when a query is made.

Within the App function component, useSanityListener is passed the client created to fetch the salesRecords. A useEffect hook is then set up to watch for changes in the salesRecords in order to update the data setup for the Bar chart. For the purpose of this demo, only January to July is covered, each time salesRecords change, the Bar chart is updated in real-time.

Make sure you to replace YOUR_PROJECT_ID with the project id from your project dashboard

Testing the Application

Now is the moment you have been waiting for, testing the chart application to watch it update in real-time. Ensure that the Sanity studio is running.

Now run the React chart application by running the following command at the root of the project folder:



npm start

Once the above command boots up the application, navigate to http://localhost:3000, this will display a chart similar to the one below, the length of each bar will be based on the values you entered into the Sanity Studio:

To test the real-time behavior of the application, open your Sanity Studio in another window (ensure that you have sanity start running within the cms folder) and update the sales number value for one of the months. You will see the bar for that month change size in real-time responding to the data change.

Wholla!

Conclusion

Applications like Google Docs, Figma, and Google maps all possess real-time capabilities that enable users get updates as new data is received. These real-time features help achieve functionalities like document creation collaboration among different users, getting real-time updates and analytics on sensitive information like stocks and foreign exchange figures, and even multi-player internet gaming.

With Sanity Listeners, using knowledge from the exercise in this tutorial, you can build a better experience for your users like the ones mentioned above.

Happy Coding 😊

Form validation with Yup

Joseph Udonsak — Wed, 21 Apr 2021 22:49:35 +0000

Introduction

The primary aim of this article is to show you how to manage and validate forms in React using Formik and Yup. You can see the form we will build here. In addition to this, you will also learn how to set up and manage a CRM using Sanity as well as reading and writing data to a Sanity hosted CRM using GROQ. The code for the complete project is available on Github should you get stuck at any point.

Forms are a key medium of collecting data from people interacting with your application. This data could prove crucial in future activities such as sending notifications or even transferring money to saved accounts. As such it is important to reduce the possibility of invalid data being supplied to the barest minimum. The first step to doing that is via form validation.

Simply put, form validation is the process of ensuring that appropriate data is supplied in a form. Via this process, an application is not only able to ensure that required information is provided at all times, but that all data is provided in an appropriate format.

In React, there are many options for managing forms - Formik, Unform, React Hook Form, and Redux Form to name a few. However, Formik has proven itself to be a popular choice as it combines efficiency, ease of use, and a small library footprint to provide a smooth developer experience. Another positive for using Formik is its seamless integration with Yup.

When it comes to validation in JavaScript, no library comes to mind faster than Yup by JQuense. With Yup, the developer can define a schema (or structure) of the expected data specifying its data type and whether it is required or not. With Yup, you are also able to determine the structure of data in the yup schema including input length, or even validate the supplied data against a regular expression (regex validation).

In this article, we will build a small application that allows customers to leave product reviews for an e-commerce website. We will build the web application with React while the content (and back end) will be hosted on Sanity. Communication between the web application and back end will be via Graph-Relational Object Queries (GROQ).

Prerequisites

To keep up with the concepts that will be introduced in this article, you will need a fair grasp of ES6. You will also need to have an understanding of some basic React concepts like hooks and functional components.

You will also need to have the following installed on your workstation:

Node Package Manager (NPM)
Sanity CLI
A code editor of your choice

Form validation

Create a new folder called product-review-site to hold the code for the front-end and back-end.

mkdir product-review-site

cd product-review-site

In the product-review-site folder create a new React application named front-end.

npx create-react-app front-end

In the product-review-site folder create a new React application named front-end.

npx create-react-app front-end

Create a new directory called components in the front-end/src directory.

mkdir front-end/src/components

For this tutorial, we will use Bulma CSS to style our application. Use the following command to add Bulma CSS to your application

npm install bulma

To import the Bulma CSS into the project, create a file named style.css in the src directory and add the following:

@import 'bulma/css/bulma.css'

You can delete the App.css and index.css files we’ll be relying on Bulma for our styling.

Import style.css in the src/index.js file as follows:

import './style.css';

In this tutorial, we will use Formik to manage our forms while using Yup for validation. Install both packages using the command below:

npm install formik yup

Building the reviews component

In the components directory, create a file called ReviewForm.jsx. This component will be responsible for managing the form displayed for a customer to review a product. For now, the form will return a React Fragment.

import React from "react";

const ProductReviewForm = () => <></>;

export default ProductReviewForm;

A product review will have the following inputs:

The product being reviewed. This field is required and must be from the list of products currently available.
The name of the customer. This field is also required.
The customer’s email address. This field is required. Additionally, the email address must be valid.
The title of the review. This field is essentially the review in less than 10 words. This is required.
A more detailed review. This field is required.
A rating of the product with 1 as the lowest and 10 as the highest. This field is required.
The date the review was given. This will be generated automatically.
Whether the customer would recommend the product to someone else. This is optional and by default should be false.

We will use a Formik component as the root component of our ReviewForm. This component will have three props - a set of initial values, a validation schema, and a callback function to be triggered when the form is submitted.

import React from "react";
import * as Yup from "yup";

const ProductReviewForm = () => {
  const products = ["Product 1", "Product 2", "Product 3", "Product 4"];

  const validationSchema = Yup.object({
    product: Yup.string().required("Please select a product").oneOf(products),
    name: Yup.string().required(),
    email: Yup.string().email().required(),
    title: Yup.string().required(),
    review: Yup.string().required(),
    rating: Yup.number().min(1).max(10).required(),
    date: Yup.date().default(() => new Date()),
    wouldRecommend: Yup.boolean().default(false),
  });

  const initialValues = {
    name: "",
    email: "",
    title: "",
    review: "",
    rating: "",
    date: new Date(),
    wouldRecommend: false,
    product: "",
  };

  const onSubmit = (values) => {
    alert(JSON.stringify(values, null, 2));
  };

  return <></>;
};

export default ProductReviewForm;

We are using a dummy array of products for now. We will update the products array and onSubmit callback after setting up the API.

In addition to the Formik component, Formik provides the Form , Field and ErrorMessage components which all work together to handle form state, events, validation (based on the object schema provided by Yup) and display of validation errors. This allows us to focus on the structure of the form and the submission process.

Before returning the JSX for the ProductReviewForm, we'll declare a constant called productOptions which is an array of options for the dropdown of products. We'll also declare a function called renderError which will be passed as a prop to the ErrorMessage component and used to display a properly styled error message.

//other import statements
import { Formik, Form, Field, ErrorMessage } from "formik";

const ProductReviewForm = () => {
  //declaration of products
  //declaration of validationSchema
  //declaration of initialValues
  //declaration of onSubmit callback

  const productOptions = products.map((product, key) => (
    <option value={product} key={key}>
      {product}
    </option>
  ));

  const renderError = (message) => <p className="help is-danger">{message}</p>;

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={async (values, { resetForm }) => {
        await onSubmit(values);
        resetForm();
      }}
    >
      <Form>
        <div
          className="container"
          style={{
            width: "60%",
          }}
        >
          <div className="field">
            <label className="label" htmlFor="name">
              Full name
            </label>
            <div className="control">
              <Field
                name="name"
                type="text"
                className="input"
                placeholder="Full name"
              />
              <ErrorMessage name="name" render={renderError} />
            </div>
          </div>
          <div className="field">
            <label className="label" htmlFor="email">
              Email address
            </label>
            <div className="control">
              <Field
                name="email"
                type="text"
                className="input"
                placeholder="Email address"
              />
              <ErrorMessage name="email" render={renderError} />
            </div>
          </div>
          <div className="field">
            <label className="label" htmlFor="product">
              Product
            </label>
            <div className="control">
              <Field name="product" as="select" className="select is-fullwidth">
                <option value={""}>Select a product</option>
                {productOptions}
              </Field>
              <ErrorMessage name="product" render={renderError} />
            </div>
          </div>
          <div className="field">
            <label className="label" htmlFor="title">
              Title
            </label>
            <div className="control">
              <Field
                name="title"
                type="text"
                className="input"
                placeholder="Title"
              />
              <ErrorMessage name="title" render={renderError} />
            </div>
          </div>
          <div className="field">
            <label className="label" htmlFor="review">
              Review
            </label>
            <div className="control">
              <Field
                name="review"
                as="textarea"
                className="textarea"
                placeholder="Review"
              />
              <ErrorMessage name="review" render={renderError} />
            </div>
          </div>
          <div className="field">
            <label className="label" htmlFor="rating">
              Rating
            </label>
            <div className="control">
              <Field
                name="rating"
                type="number"
                className="input"
                placeholder="Rating"
              />
              <ErrorMessage name="rating" render={renderError} />
            </div>
          </div>
          <div className="field">
            <div className="control">
              <label className="checkbox label" htmlFor="wouldRecommend">
                <Field
                  name="wouldRecommend"
                  type="checkbox"
                  className="checkbox"
                />
                Would recommend
              </label>
            </div>
          </div>
          <button type="submit" className="button is-primary">
            Submit
          </button>
        </div>
      </Form>
    </Formik>
  );
};
export default ProductReviewForm;

To see the form in action, edit the src/App.js file to render the ProductReviewForm.

import ProductReviewForm from "./components/ReviewForm";

const App = () => <ProductReviewForm />;

export default App;

Run your application. By default, your application will be available on http://localhost:3000/.

npm start

Your application should look like this at the moment:

Click the submit button and see the error messages pop up.

When filled properly and submitted, we see the following:

Creating the API

We will use Sanity to build our API. Initialize a new Sanity project named back-end in the product-review-site folder.

cd product-review-site 

sanity init

You will be prompted to provide some information. Proceed as follows:

Select the Create new project option
Name the project back-end
Use the default dataset configuration (press Y)
Select the project output path (by default it would be the product-review-site folder)
Select the e-commerce (schema + sample data) option. Using the arrow keys, navigate to that option (it turns blue when selected).
Upload a sampling of products to go with your e-commerce schema (press Y)

The Sanity CLI will bootstrap a project from the e-commerce template, link the needed dependencies and populate the backend with sample data (in our use case, this will be products that we can make reviews for).

Before we run our backend, let us define a schema for our product reviews. In the back-end/schemas directory, create a file named productReview.js. In it, declare the schema for a product review.

export default {

  name: "productReview",
  title: "Product Review",
  type: "document",
  fields: [
    {
      name: "product",
      type: "reference",
      to: { type: "product" },
    },
    {
      name: "title",
      type: "string",
      description: "Your review in less than 10 words",
    },
    {
      name: "name",
      type: "string",
      title:"Full name",
    },
    {
      name: "email",
      type: "string",
      title:"Email address"
    },
    {
      name: "rating",
      type: "number",
      description: "Rate the product out of 10",
    },
    {
      name: "date",
      type: "datetime",
    },
    {
      name: "review",
      type: "text",
      description: "Your review in as many words as you can come up with",
    },
    {
      name: "wouldRecommend",
      title: "Would recommend to a friend",
      type: "boolean",
    },
  ],
};

Next, open the schema.js file (in the back-end/schemas directory) and include the newly created schema:

//other import statements
import productReview from './productReview';

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
// other predefined schemas
    productReview,
  ]),
});

Run your studio. By default, the studio runs at http://localhost:3333.

sanity start

Your studio should be as shown below:

Using the studio we can add new products and reviews for products by clicking the compose icon.

Enable CORS on the API

By default, the only host that can connect to the project API is the sanity studio (http://localhost:3333). Before we can make requests to the API, we need to add the host for our React application (http://localhost:3000/) to the permitted origins. To do this open, your Sanity Content Studio. This will show you all the Sanity projects you have initialized. Select the project we are working on (back-end) and click on the Settings tab. Click on the API menu option.

In the CORS Origins section, click the Add new origin button. In the form that is displayed, type http://localhost:3000 as the origin and enable the Allow credentials option. We will need the credentials so that we can make authenticated requests to our API when posting product reviews. Click the Add new origin button to save the changes made.

Because we will be making write requests to the API, we need a token that is authenticated by the API. To create one, click Add new token in the Tokens section. As a label, you can provide anything memorable. This time we’ll use Front-End as the label. Make sure you check the write option in the Rights section. Click Add new token to view the newly generated token.

MAKE SURE YOU COPY THE TOKEN BEFORE CLOSING THE MODAL AS IT WILL ONLY BE DISPLAYED ONCE.

One last thing to note before we return our attention to the review form is the project ID. We will need this when we link the review form to the backend. In the root directory of the backend project, open the sanity.json file and look for the api node. This node will contain the project ID as well as the targeted dataset.

With these in hand, we can link our front-end to the API. This will allow us to get the list of products as well as save and retrieve product reviews.

Linking the React application to Sanity

To make our product review form fully functional, we need to pull the list of products from the backend- so that the customer can select the product to be reviewed. We also need to post the review to the API when the user submits the form (with valid input). We will use the Sanity Client package to handle interactions with the API.

Add the @sanity/client dependency to your front-end project.

npm install @sanity/client

In the src directory, create a file called client.js. In it, add the following:

import sanityClient from "@sanity/client";
export default sanityClient({
  projectId: "INSERT_YOUR_PROJECT_ID_HERE",
  dataset: "production",
  // authenticated requests can't be cached so we have to set useCdn to false
  useCdn: false, 
  token: "INSERT_YOUR_TOKEN_HERE"   
});

The token is saved here for the sake of brevity. You should not do the same in applications that will be made available to the public. You can read more about securing tokens here.

Back in our ProductReviewForm, remove the products declaration. We will take advantage of the useState and useEffect React hooks to make a fetch request to the API and save the response to the products array.

// other import statements
import sanityClient from "../client";
import { useEffect, useState } from "react";

const ProductReviewForm = () => {

  const [products, setProducts] = useState([]);

  useEffect(() => {
    sanityClient
      .fetch(`*[_type == "product"]{_id, title}`)
      .then((products) => {
        setProducts(products);
      })
      .catch(console.error);
  }, []);

// other declarations
// return statement
};

export default ProductReviewForm;

Using our configured Sanity client, we get the products by making a fetch request with a GROQ statement. The statement is broken down as follows:

*fetches all documents
[_type == "product"] filters all the documents and returns only the documents of the type product.
{_id, title} selects only the id and title from each document. We need the id to let the backend know which product the review is referencing. We need the title for the dropdown of product options.

We also need to update our validation schema. Previously, we were only validating to check that the selected product was in the array of products. Now that we have a list of product objects, we need to ensure that whatever value is provided to the schema matches the id of a product in our array of products. Replace the validationSchema declaration with the following:

const validProductValues = products.map(({ _id }) => _id);

  const validationSchema = Yup.object({
    product: Yup.string()
      .required("Please select a product")
      .oneOf(validProductValues),
    name: Yup.string().required(),
    email: Yup.string().email().required(),
    title: Yup.string().required(),
    review: Yup.string().required(),
    rating: Yup.number().min(1).max(10).required(),
    date: Yup.date().default(() => new Date()),
    wouldRecommend: Yup.boolean().default(false),
  });

We also need to update the productOptions constant. Replace the productOptions declaration with the following:

const productOptions = products.map(({ _id, title }, key) => (
      <option value={_id} key={key}>
        {title}
      </option>
    ));

To save the reviews on the back-end, we need to update the onSubmit function.

const onSubmit = (values) => {
    const { product } = values;
    const request = { ...values, product: { _ref: product } };
    sanityClient.create(request).then(() => {
      alert(`Review submitted successfully`);
    });
  };

We replace the product key in the request with a _ref value of the selected product id. This lets the backend know which product we’re referencing in the submitted review.

Building the rest of the front-end

In addition to the review form we just created, let’s make it possible for customers to see all the available products and reviews. To do this we’ll build the following:

A component to view all products
A component to view all product reviews

Image handling

Because we will also be loading product images on our pages, let’s add the Sanity Image-URL dependency to our project:

npm install @sanity/image-url

In the src folder create a file named imageHelper.js and add the following code:

import imageUrlBuilder from "@sanity/image-url";
import sanityClient from "./client";

const getImageUrl = (source) => {
  const builder = imageUrlBuilder(sanityClient);
  return builder.image(source);
};

export default getImageUrl;

In the components directory, create a file called Products.jsx. In it, add the following code.

import React, { useEffect, useState } from "react";
import sanityClient from "../client";
import getImageUrl from '../imageHelper';

const Products = () => {

  const [products, setProducts] = useState(null);

  useEffect(() => {
    sanityClient
      .fetch(
        `*[_type == "product"]{
          title, 
          blurb,
          defaultProductVariant
      }`
      )
      .then((products) => {
        setProducts(products);
      })
      .catch(console.error);
  }, []);

  return (
    <div className="container">
      <div className="columns is-multiline">
        {products &&
          products.map((product, index) => (
            <div className="column is-3" key={index}>
              <div className="card">
                <div className="card-image">
                  <figure className="image is-4by3">
                    <img
                      src={getImageUrl(
                        product.defaultProductVariant.images[0]
                      ).url()}
                      alt={product.title}
                    />
                  </figure>
                </div>
                <div className="card-content">
                  <div className="media">
                    <div className="media-content">
                      <p className="title is-4">{product.title}</p>
                      <p className="subtitle is-6">
                        ${product.defaultProductVariant.price}
                      </p>
                    </div>
                  </div>
                  <div className="content">
                    {product.blurb.en}
                    <br />
                  </div>
                </div>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
};

export default Products;

Building the Reviews component

For the product reviews interface, we’ll use a master-detail layout as shown in the image below:

To do this we’ll need 3 components:

A component to display the list of reviews
A component to display the selected review
A component to display the list and details of the selected review side by side

In the components directory, create a new directory called reviews. In the reviews directory add the following files:

ReviewCard.jsx
ReviewDetails.jsx
Reviews.jsx

In the ReviewCard.jsx file add the following:

import React from "react";
import getImageUrl from "../../imageHelper";

const ReviewCard = ({ review, index, onClick, isSelected }) => {

  const { rating, name, title, product } = review;

  return (
    <div
      className="card"
      key={index}
      onClick={onClick}
      style={{
        backgroundColor: isSelected ? "#e2e2e2" : "white",
        marginBottom: "5px",
      }}
    >
      <div className="card-content">
        <div className="columns">
          <div className="column is-narrow">
            <div className="media-left">
              <figure className="image is-96x96">
                <img
                  src={getImageUrl(
                    product.defaultProductVariant.images[0]
                  ).url()}
                  alt={product.title}
                />
              </figure>
            </div>
          </div>
          <div className="column">
            <div className="media-content">
              <p className="title is-4">{product.title}</p>
              <p className="subtitle is-5">{title}</p>
              <p className="is-6">Rating: {rating} out of 10</p>
              <p className="is-6">{name}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ReviewCard;

In the ReviewDetails.jsx file add the following:

import React from "react";
import getImageUrl from "../../imageHelper";

const ReviewDetails = ({ selectedReview }) => {

  if (!selectedReview) {
    return <p className="title is-5">Click on a card to get started</p>;
  }

  const { product, name, rating, email, date, review } = selectedReview;

  return (
    <>
      <figure className="image is-16by9" style={{ marginBottom: "5%" }}>
        <img
          src={getImageUrl(product.defaultProductVariant.images[0]).url()}
          alt={product.title}
        />
      </figure>
      <p className="title is-5">{product.title}</p>
      <p className="subtitle">{product.blurb.en}</p>
      <p className="subtitle">
        {name} said "<b>{review}</b>"
      </p>
      <p className="is-6">Rating: {rating} out of 10</p>
      <p className="subtitle is-6">
        Review provided by <a href={`mailto:${email}`}>{name}</a> on{" "}
        {new Date(date).toUTCString()}
      </p>
    </>
  );
};

export default ReviewDetails;

In the Reviews.jsx file, add the following:

import React, { useEffect, useState } from "react";
import sanityClient from "../../client";
import ReviewCard from "./ReviewCard";
import ReviewDetails from "./ReviewDetails";

const ProductReviews = () => {

  const [reviews, setReviews] = useState(null);
  const [selectedReview, setSelectedReview] = useState(null);
  const [selectedReviewIndex, setSelectedReviewIndex] = useState(null);

  useEffect(() => {
    sanityClient
      .fetch(
        `*[_type == "productReview"]{
        name, 
        email,
        title, 
        rating,
        date,
        review,
        wouldRecommend,
        product ->{
          title, 
          blurb,
          slug, 
          defaultProductVariant
        }
      }`
      )
      .then((reviews) => {
        setReviews(reviews);
      })
      .catch(console.error);
  }, []);

  const isSelected = (index) => selectedReviewIndex === index;

  return (
    <div className="container">
      <div className="columns">
        <div className="column is-narrow">
          {reviews &&
            reviews.map((review, index) => (
              <ReviewCard
                review={review}
                index={index}
                onClick={() => {
                  setSelectedReview(review);
                  setSelectedReviewIndex(index);
                }}
                isSelected={isSelected(index)}
              />
            ))}
        </div>
        <div className="column">
          <div className="box" style={{ minHeight: "85vh" }}>
            <ReviewDetails selectedReview={selectedReview}/>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductReviews;

Notice the following snippet in the GROQ statement we use to fetch all the reviews:

product -> {
                  title, 
                  blurb,
                  slug, 
                  defaultProductVariant
                }

Because we save a reference to the product when creating a review, we can destructure the referenced item using the → operator and access the fields enclosed in the curly brackets.

Navigation

For ease of navigation, we’ll create a simple menu to link all the components we created. We’ll use React Router to handle routing between components so let’s add that to our project

npm install react-router-dom

In the components folder, create a file called Menu.jsx and add the following to it:

import React from "react";
import { Link } from "react-router-dom";

const Menu = () => (
    <div className="container" style={{ marginTop: "2%" }}>
      <nav className="navbar" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
          <Link className="button is-primary" to={"/"}>
            Home
          </Link>
        </div>
        <div className="navbar-menu">
          <div className="navbar-end">
            <Link className="navbar-item" to="/products">
              Products
            </Link>
            <div className="navbar-item has-dropdown is-hoverable">
              <a className="navbar-link">Reviews</a>
              <div className="navbar-dropdown">
                <Link className="navbar-item" to="/review">
                  Add review
                </Link>
                <Link className="navbar-item" to="/">
                  View all
                </Link>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  );

export default Menu;

Update the App.js to include a [BrowserRouter](https://reactrouter.com/web/api/BrowserRouter), our menu and a [Switch](https://reactrouter.com/web/api/Switch)

import Products from "./components/Products";
import ProductReviewForm from "./components/ReviewForm";
import ProductReviews from "./components/reviews/Reviews";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Menu from "./components/Menu";

const App = () => (
  <Router>
    <Menu />
    <div
      style={{
        padding: "2%",
      }}
    >
      <Switch>
        <Route path="/" exact>
          <ProductReviews />
        </Route>
        <Route path="/products">
          <Products />
        </Route>
        <Route path="/review">
          <ProductReviewForm />
        </Route>
      </Switch>
    </div>
  </Router>
);

export default App;

With that, our product review website is ready for launch, Congratulations!!!

Conclusion

Validating user input before saving to the database is a practice that will improve data integrity in web applications. In this article, we see the benefits of combining Formik and Yup for form validation. By taking advantage of Formik, we were able to manage and update the form state as the user triggered the onChange event. Also, by integrating Yup with Formik, we saved ourselves the burden of building a validator. This allows us to build industry standard forms more efficiently.

Setting up Tailwind with Vue.js

James Perkins — Fri, 02 Apr 2021 23:20:27 +0000

Summary

In this guide, you will add Tailwind to a Vue application to improve the layout for our blog pages. You will go through dependencies, configuration, and component creation. To follow this tutorial you will need a basic understanding of Vue.

Why use TailwindCSS?

In 2019‚ and even more so in 2020, Tailwind CSS exploded in popularity when developers saw the potential in a design system that was more like an API. Unlike Bootstrap, which provides pre-built components, Tailwind CSS provides utility classes to build your own components that are completely responsive and let developers create exactly what they need. Tailwind and Vue integrate together with just a few packages, making it a go-to option for any developer.

What are utility classes?

Utility classes are single purpose classes which are self descriptive in nature, unlike traditional CSS classes. For example:

.flex: {
    display: flex
}

This example describes that you are adding flex, and only adds display flex to an element. This makes it reusable anywhere in the code and know exactly what it does.

Finished project link

To follow along exactly with the blog post you can find the repository on my GitHub by clicking this

link.

Setup

Add the dependencies

To begin with, you need to install the dependencies for Tailwind. Inside your terminal or command prompt, from the root of your project, type the following:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

First, you are probably wondering why you are versioning, well there is (as of April 2021) a compatibility issue between tailwindcss and postcss which you can read about here. So what do these dependencies do? Let's break them down:

tailwindcss : Contains all the Tailwind code that you can use in our Vue application.

postcss : PostCSS is used to transform CSS using a variety of JS plugins, it's a one stop-shop for being able to lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

autoprefixer : AutoPrefixer is a plugin for postCSS that parses all of your CSS and adds the vendor prefixes to your CSS rules. This means you don't have to worry whether you are using Microsoft Edge , Firefox, or Chrome!

Creating Tailwind configuration files

Now you have all of the dependencies installed you need to create two configuration files that will handle both what happens with PostCSS and any configuration you want to make with Tailwind such as themes, dark mode etc. At the root of your project create a tailwind.config.js and postcss.config.js and let's take a deep dive into what you have, first let's open the newly created tailwind.config.js file and create our default configuration:

// ./tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwind is built on the premise of building customized user interfaces from the ground up, in this file you can create a whole theme, use plugins, set default colors and so much more. In this tutorial, you will be using the purge option only. The purge option allows you to put in all of your files that contain CSS and as part of the build step will removed any used styles. You can learn more about configuring Tailwind in the configuration documentation. Let's move on to the postcss.config.js file and enter the following :

// ./postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

As mentioned earlier, you use PostCSS to transform CSS using a variety of JS plugins, in this case when our code is built PostCSS will handle both Tailwind CSS and any prefixes for browsers without any intervention from us!

Configure Tailwind to remove any unused styles in production

The final piece of our configuration is to have Tailwind purge any unused styles when in production to keep our bundle size as small as possible, to do this open up your tailwind.config.js file and type the following:

// ./tailwind.config.js
module.exports = {
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false,
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

What you are doing here is telling Tailwind where the paths to all our components and pages so Tailwind can remove all unused styles using a technique called tree-shaking, which deletes all the unused styles.

Adding Tailwind to our CSS

Now that you have installed and set up everything required to start using Tailwind you need to create a way to use it globally. So let's create an index.css in your src folder to hold our Tailwind styles:

<!-- ./src/main.css -->
@tailwind base;
@tailwind components;
@tailwind utilities;

This might seem like you are going to have every single Tailwind style in our application but at build time Tailwind is smart enough to styles generated based upon your configuration.

Import your CSS file into main.js

The final setup piece is to import the CSS file into our main.js which is located at ./src/main.js and once imported your file should look like:

// ./src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Tailwind is now set up and referenced, so you are ready to create a great looking blog page.

If you are following along here is the commit

Creating Components

For this tutorial, you are going to create a navigation bar and a blog page which will be our home page, the blog posts won't actually exist but it will give you a great starting point for your own blog post.

Creating a Navigation Bar.

Let's begin by creating a responsive navigation header that you can use on each page. Let's have create some starter code that doesn't have any Tailwind attached, create a new component called NavBar:

<!--./src/components/NavBar.vue -->
<template>
  <header>
    <div>
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/">Blog</router-link></li>
          <li><router-link to="about">About</router-link></li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  name: "NavBar",
};
</script>

Now you have this new NavBar component let's use it in our application by adding it to our App.vue file. Inside the App.vue file remove the original div above the router-view below is the before and after:

<!-- ./src/App.vue -->

<!--before -->
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<!-- after --> 
<template>
  <div id="app">
    <router-view />
  </div>
</template>

You are now ready to place use our own NavBar component. To import a Component you need to add a script tag under our template and then register the template copy the code below :

// ./src/App.vue
...
<script type="text/javascript">
import NavBar from "@/components/NavBar.vue";
export default {
  components: {
    NavBar, // register component
  },
};
</script>

Then you can add this into our template, so before the router-view add in the NavBar so your finished code should look like the following:

// ./src/App.vue
<template>
  <div id="app">
    <NavBar />
    <router-view />
  </div>
</template>

<script type="text/javascript">
import NavBar from "@/components/NavBar.vue";
export default {
  components: {
    NavBar, // register component
  },
};
</script>

Now launch your code and navigate to localhost:8080 and you should see the following:

It doesn't look great but the links to Home and About work as expected so let's add some Tailwind to this to make a navigation bar with responsiveness!

Adding Tailwind to our component

Open up your NavBar component and let's start adding some classes from Tailwind, first you want to add a border to the bottom to add some division, and then you will add some flex to our surrounding div:

// ./src/components/NavBar.vue
<template>
  <header class="border-b">
    <div
      class="container flex flex-col flex-wrap p-5  md:items-center md:flex-row"
    >
....

So let's explain what is happening here,

Under the header, you are adding a class="border-b" which is a border on the bottom.
Then in the div you are adding the container class.
Adding flex and any screen, bigger than medium size will be flex-col with flex wrap.
Adding p-5 which adds padding: 1.25rem

The part md:items-center md:flex-row means when the size reduces to a breakpoint for medium screens, it will center the items and make them into a row. You can read about responsive designs and conditional breakpoints in the link below:

https://tailwindcss.com/docs/responsive-design

Next, you can add flex to our <ul> and some margin and font styles to our links to make sure you have a functional and responsive Navbar.

// ./src/components/NavBar.vue
<ul class="flex flex-wrap items-center justify-center text-base ">
          <li class="mr-5 text-sm font-semibold hover:text-gray-800">
            <router-link to="/">Home</router-link>
          </li>

So this code, allows the items to wrap as needed, and on the individual items you are adding a margin on the right, making the font bold and changing the state when you hover over them, at this point your code should look like the following:

// ./src/components/NavBar.vue
<template>
  <header class="border-b">
    <div
      class="container flex flex-col flex-wrap p-5  md:items-center md:flex-row "
    >
      <nav>
        <ul class="flex flex-wrap items-center justify-center text-base ">
          <li class="mr-5 text-sm font-semibold hover:text-gray-800">
            <router-link to="/">Home</router-link>
          </li>
          <li class="mr-5 text-sm font-semibold hover:text-gray-800">
            <router-link to="/">Blog</router-link>
          </li>
          <li class="mr-5 text-sm font-semibold hover:text-gray-800">
            <router-link to="about">About</router-link>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  name: "NavBar",
};
</script>

If you are following along here is the commit.

You should now have a navbar that looks like this on your desktop:

Then when you shrink the screen size down and hit the media point you should now have a navbar that looks like:

Looking pretty good! A nice NavBar component to help our users navigate our website.

Creating the blog post page

As I explained previously, you aren't creating any blog posts but you can create a "fake" Blog page that will show the user a cover image, title, and excerpt. To make this easier below is the code will be using but first let's create a new component called BlogPage which will handle that in our components directory.

<!-- ./src/components/BlogPage.vue -->
<template>
  <div id="blog-home">
    <h1>Thoughts and Posts</h1>
    <div>
      <article>
        <figure>
          <img src="http://via.placeholder.com/250x250" alt="" />
        </figure>
        <h2>A blog post about my dog</h2>
        <p>Super awesome doggo, with a great smile.</p>
      </article>
    </div>
    <div>
      <article class="media">
        <figure>
          <img src="http://via.placeholder.com/250x250" alt="" />
        </figure>
        <h2>Post about some code we wrote</h2>
        <p>Sometimes coding is very hard, and othertimes it's very easy</p>
      </article>
    </div>
    <div>
      <article class="media">
        <figure>
          <img src="http://via.placeholder.com/250x250" alt="" />
        </figure>
        <h2>Titles are hard to think of.</h2>
        <p>Just like naming variables, naming title are hard.</p>
      </article>
    </div>
  </div>
</template>

This has three basic blog posts with a title, image holder and a short excerpt, you now have a component but you need to create a route and view so our users can navigate. Create a new file inside your views folder called Blog.vue, this will handle what is displayed to the user when they navigate to the route.

The view template will be simple because you created a component and don't have to worry about creating any more HTML so below is the template part

<!-- ./src/views/Blog.vue-->
<template>
  <div class="blog">
    <BlogPage />
  </div>
</template>

Similar to App.vue you are registering the component to use it. Now you need to add a route to our routes file, which is located under router named index.js . To add the router you can copy the about route.

Now you need to import the BlogPage component and reference it so you can actually use it in our view.

<!-- ./src/views/Blog.vue-->
...
<script>
import BlogPage from "@/components/BlogPage.vue";

export default {
  name: "Blog",
  components: {
    BlogPage,
  },
};
</script>

<!-- ./src/router/index.js -->
{
    path: "/blog",
    name: "Blog",
    component: () => import(/* webpackChunkName: "blog" */ "../views/Blog.vue"),
  },

If you are following along you can check out this commit.

Go ahead and launch your application and navigate to http://locahost:8080/blog and you should now see the following:

This is not pretty or responsive, so let's start adding our Tailwind to make a blog post page look great!

Adding Tailwind to the blog post.

So you are going to create a grid style blog page where each post takes up 1/3 of the width of the screen. To begin with let's center our Heading and increase the size and add a margin to the top:

<!--./src/components/BlogPage.vue-->
<template>
  <div id="blog-home">
    <h1 class="text-center text-xl mt-4">Thoughts and Posts</h1>
...

This will give our heading a nice centered look and increase the size.

Now you can create a container using the next main and add some padding around the top and sides.

<!--./src/components/BlogPage.vue-->
<template>
  <div id="blog">
    <h1 class="text-center text-xl mt-4">Thoughts and Posts</h1>
    <main class="container px-8 pt-24 mx-auto lg:px-4">
.....

This gives us the container class padding on the sides and top, margin on the x-axis to auto and on large screens, you will also at padding on the x-axis.

You now need to add an additional div surrounding our article, which will handle flex for us. So create a new div and add the classes flex flex-wrap.

<!--./src/components/BlogPage.vue-->
<template>
  <div id="blog">
    <h1 class="text-center text-xl mt-4">Thoughts and Posts</h1>
    <main class="container px-8 pt-24 mx-auto lg:px-4">
      <div class="flex flex-wrap">
....

Now you have our container, and flex div you can start working on our articles, now in the real world, you would only need to create a single one and loop over all of your articles. So I will show you how to create a single version of it, and then I will show you a complete version.

On our article tag let's add the classes for padding, and width for both large screens and the default sizing.

<!--./src/components/BlogPage.vue-->
<article class="px-8 py-6 lg:w-1/3 md:w-full">

This will add padding on the sides and top and bottom, on a large screen it will take 1/3 of the width and on smaller than large screens it will create a full width, this will allow us to create a column effect when the screen is smaller.

You can now add padding to the div that contains all of our blog post information:

<!--./src/components/BlogPage.vue-->
<article class="px-8 py-6 lg:w-1/3 md:w-full">
          <div class="p-6 rounded-md">
...

Now for our cover image you are going to make the image rounded also and specific height so no matter what size image it will always look great!

<article class="px-8 py-6 lg:w-1/3 md:w-full">
          <div class="p-6 rounded-md">
            <img
              class="object-cover object-center w-full h-40 mb-6 rounded"
              src="http://via.placeholder.com/250x250"
              alt="content"
            />

So you are creating a full width and height of h-40 (10rem) you are also using object-cover which will make the image cover the container. Finally you are rounding the corners, your images should now look like:

For our blog title will will make the the text have a margin on the bottom and the text larger so it pops for our users:


<article class="px-8 py-6 lg:w-1/3 md:w-full">
          <div class="p-6 rounded-md">
            <img
              class="object-cover object-center w-full h-40 mb-6 rounded"
              src="http://via.placeholder.com/250x250"
              alt="content"
            />
            <h2 class="mb-3 text-lg lg:text-2xl">
              A blog post about my dog
            </h2>

As you can see for any screen it should have large text, and only on large screen it should be 2xl, now you just need to take care of our excerpt and link to read more.

To handle our paragraph that is an excerpt you are going to use leading-relaxed which actually means you are going to a 1.25 rem to our line height and you will add a margin at the bottom also.

<!--./src/components/BlogPage.vue-->
<article class="px-8 py-6 lg:w-1/3 md:w-full">
          <div class="p-6 rounded-md">
            <img
              class="object-cover object-center w-full h-40 mb-6 rounded"
              src="http://via.placeholder.com/250x250"
              alt="content"
            />
            <h2 class="mb-3 text-lg lg:text-2xl">
              A blog post about my dog
            </h2>
            <p class="mb-4 leading-relaxed">
              Super awesome doggo, with a great smile.
            </p>

So the final piece to the puzzle is the link to "read more" , you are going to add some hover color change and then add some margin on the bottom, you are also going to make it inline-flex and center the items.

<article class="px-8 py-6 lg:w-1/3 md:w-full">
          <div class="p-6 rounded-md">
            <img
              class="object-cover object-center w-full h-40 mb-6 rounded"
              src="http://via.placeholder.com/250x250"
              alt="content"
            />
            <h2 class="mb-3 text-lg lg:text-2xl">
              A blog post about my dog
            </h2>
            <p class="mb-4 leading-relaxed">
              Super awesome doggo, with a great smile.
            </p>
            <a
              href="#"
              class="inline-flex items-center md:mb-2 lg:mb-0 hover:text-blue-400 "
            >
              Read More
            </a>
          </div>
        </article>

You now have a complete article , so you can find the final commit here.

If you launch your application you should now see the following:

and on mobile you will see this:

Conclusion

You have now come to the end of our tutorial and created a blog page example using Tailwind, if you have been coding along while reading you would have learnt the following:

Learnt how to install TailwindCSS and PostCSS and setup our Vue application to use them.
Create a responsive Navigation Bar that allows your end users to navigate regardless of the size of their screen.
Create a fully responsive Blog page with styled images, headings and excerpts and the option to read more.

Now you have a good base layer, you can start adding your own post to your Vue application and explore using the ability to create your own themes.

Forem: Sanity.io

Add the Telegram Messaging API to your React application

Introduction

Prerequisites

Setting up a Telegram bot

Getting your unique id

Get user id via Deep Linking

Sending a notification

Building the movie application

Add project dependencies

Set up Chakra

Set environment variables

Write utility functions

Build page components

Build the MovieCard component

Build the MoviesPage component

Build the Team component

Build the MoviePage component

Build the Share endpoint

Build pages

Conclusion

How to use SVGs in React

How to use SVG in React

Use SVGs as regular images

Import SVGs as components via bundler magic

Include SVGs directly in JSX

SVGs & React in practice

Prerequisite

Example 1: A Loading Icon

Example 2: Special Text Effect

Example 3: Pizza Customizer

Prerequisite

Writing the schema

Add customizer

Result

d4rekanguok / sanity-pizza

Wrapping Up

Add Alpine.js to your Node Application

Introduction to Alpine.js

Why choose Alpine.js

Basic syntax

Setting up the sanity schema and studio

Adding Alpine.js

Exploring Alpine.js Components

Performing interactions with Alpine.js

Performing HTTP request

Enabling CORS

Conclusion

References

How to Create a Single Page Application with React and Sanity

Introduction

Requirements/Prerequisites

What is React?

Understanding SPA

Setting up a React app

Using Tailwind CSS

What is Sanity?

Getting started with Sanity/setup

Sanity studio

Creating a food catalog schema from scratch

Organizing our schema

Connecting Sanity with React App

Connecting React to Sanity

Connecting Sanity to React

Building a food catalog application

Building the Header and footer Section

Display all food categories on the Homepage

Display all foods on Food's page

Create dynamic routes for each category

Conclusion

Useful resources

Guide to sending SMS with the Twilio API

Introduction

Prerequisites

Getting started

Setting up Sanity

Making the 'Cart' work

Implementing the Checkout Feature

Conclusion

Headless CMS: Building apps with Nuxt and Sanity

Build the `MovieCard` component

Build the `MoviesPage` component

Build the `Team` component

Build the `MoviePage` component

Build the `Share` endpoint