Forem: Joel Olawanle

Building a full stack app with Remix, Prisma, and Neon

Joel Olawanle — Tue, 12 Mar 2024 09:43:00 +0000

In modern web development, scalable applications are paramount due to the ever-increasing demand for flexible, responsive systems that can handle growing user data and evolving functionalities. One way to achieve this involves leveraging technologies like Remix, Prisma, and Neon.

Remix enhances web application development with a user-centric and developer-friendly approach. Prisma offers streamlined data management for scalable growth, whereas Neon's serverless PostgreSQL ensures effortless scaling and reduced database complexity. By combining these tools, developers can build a robust ecosystem that empowers the crafting of such applications.

React and JavaScript frameworks have always reigned supreme for developing fast-loading apps. However, they often require separate server code for database or API interaction. Server-side rendering frameworks like Remix streamline this process by allowing you to combine client and server-side functionalities within a project.

This guide walks you through integrating Remix with a Neon serverless Postgres database. It focuses on how to set up the database and fetch data for a posts application using Prisma as the object-relational mapping (ORM) tool for efficient database management.

Prerequisite

To follow along with this guide, you should have:

A fundamental understanding of HTML, CSS, and JavaScript
Basic knowledge of React and TypeScript
Node.js and npm (Node Package Manager) or yarn installed on your computer

Setting up the environment

To get started with this guide, having a Remix project is essential. If you already have a Remix project, skip to the “Setting up Prisma in Remix” section. If not, clone the starter project prepared for this guide. The complete project is at the end of this tutorial.

The starter project contains basic Remix code, including pages and layout files with styles. To clone the project to your local machine, follow these steps:

1) Navigate to your preferred directory for storing your code and execute the following command in your terminal:



git clone -b starter-files --single-branch https://github.com/olawanlejoel/PostHive.git

2) Move into the project folder and install all the required dependencies:



cd PostHive
npm install

3) Start the development server:



npm run dev

The local development server starts on http://localhost:3000/ where you can access your Remix app.

Understanding the Remix file structure

You will notice some standard files for every Remix project, but focus on the app folder, which is the heart of every Remix application.

In the app folder, you will get the following structure:



/
|-- /app
    |-- /routes
        |-- _index.tsx
        |-- posts._index.tsx
        |-- posts.$postid.tsx
        |-- posts.new.tsx
        |-- posts.tsx
    |-- /styles
        |-- global.css
    |-- entry.client.tsx
    |-- entry.server.tsx
    |-- root.tsx

entry.client.tsx: Serves as the entry point for client-side code, mainly for browser rendering. We'll stick to the basic code here and won't delve deeper.
entry.server.tsx: The entry point for server-side rendering, responsible for initial server rendering. We'll focus on basic code here as well.
root.tsx: This file represents the root component of your application, shaping the primary UI structure. Here, we've included the navbar code, intending to be global across all pages, and imported the CSS file.
/styles: This directory holds your application's stylesheets or CSS files.
/routes: Manages various routes or pages within your app. Any file created in this folder serves as a route.
- _index.tsx: Represents the index or home page, displaying some text and a button.
- posts._index.tsx: Displays an array of all posts. It should retrieve these posts from the Neon database and showcase them within the Remix application.
- posts.$postid.tsx: Manages individual posts, where $postid acts as a placeholder for the post ID. Configuration for this occurs when integrating the server-side actions.
- posts.new.tsx: Displays a form for creating new posts to be stored in the database.
- posts.tsx: This serves as the layout for the posts pages.

Loaders and Actions in Remix

Understanding Loaders and Actions in Remix is pivotal for effective interaction with databases like Prisma and Neon. These concepts are crucial in managing data retrieval and executing necessary operations within the database.

Loaders: Fetching data with `useLoaderData`

Within the posts._index.tsx file, a loader function is created to declare the posts array and access its value using the useLoaderData function from Remix.

useLoaderData is a function in Remix that facilitates data fetching from various sources, including databases such as Neon via Prisma. By leveraging this function, developers can efficiently load necessary data for rendering components or executing actions in their applications.

Here's a snippet demonstrating its usage:



import { useLoaderData } from '@remix-run/react';

export const loader = async () => {
    const data = {
        posts: [
            // all posts
        ],
    };
    return data;
};

This server-side code enables data access on the client side using the useLoaderData function:



const { posts } = useLoaderData();

The posts data can then be looped through in your component for rendering:



<ul className="posts-list">
    {posts.map((post) => (
        <li key={post.id}>
            <Link to={post.id}>
                <h3>{post.title}</h3>
                {new Date(post.createdAt).toLocaleString()}
            </Link>
        </li>
    ))}
</ul>

Note: This is a TypeScript file, so you’ll notice type checkings in the starter-files code.

Action: Handling form data submission

In the posts.new.tsx file, a form is present. To handle data submission from this form, Remix employs action. Similar to the loader, action facilitates operations or modifications within the database.

To use action, you’d create a function and export it:



export const action = () => {
    // server actions
    return {};
};

You can get the data from a form by attaching a POST method and a type of submit to the button. You will also give each field a name, which can then be accessed in the action function using the request.*formData*() method:



export const action = async ({ request }) => {
    const form = await request.formData();
    const title = form.get('title');
    const body = form.get('body');

    const fields = { title, body};

    console.log(fields);
    return {};
};

When you fill out the form and submit it, you will notice the values logged to the console of your terminal (not on the client side because it’s server-side code). You can import the redirect function to return redirect so once the form is submitted, it redirects you to another page:



import { redirect } from '@remix-run/node';

export const action = async ({ request }) => {
    const form = await request.formData();
    const title = form.get('title');
    const body = form.get('body');

    const fields = { title, body};

    console.log(fields);

    return redirect('/posts');
};

In the above, we have not performed any significant action, but when dealing with databases, action will involve creating new database entries, updating existing records, deleting data, or executing complex queries to modify the database.

Note: Type-checking is not implemented in the snippet above, but remember to implement it since this is a TypeScript file.

Now that you understand how loaders and actions work, it's time to explore using Prisma and Neon with Remix.

Setting up Prisma in Remix

Prisma is a modern database toolkit that simplifies database access for developers, offering an intuitive interface to work with databases while providing a type-safe and powerful query API.

It supports databases like PostgreSQL, MySQL, SQLite, and SQL Server, allowing seamless interaction through its ORM (Object-Relational Mapping) capabilities. To set up Prisma, follow these steps:

1) Open your terminal and install Prisma alongside Prisma Client:



npm i prisma @prisma/client

2) Initialize a new Prisma project in your Remix project, creating a prisma directory with a schema.prisma file:



npx prisma init

After initializing, the schema.prisma file will contain a default configuration:



generator client {
    provider = "prisma-client-js"
}

datasource db {
    provider = "postgresql"
    url      = env("DATABASE_URL")
}

3) Next, define a basic Post model in Prisma that mirrors your database's structure. Add the following code to your schema.prisma file:



model Post {
    id        String    @id @default(uuid())
    title     String
    body      String
    createdAt DateTime  @default(now())
    updatedAt DateTime  @updatedAt
}

The Post model defines essential attributes: a unique ID generated by uuid(), fields for title and body containing post content, and timestamps createdAt and updatedAt for creation and modification times.

To enable this Prisma configuration, create a .env file in your Remix project's root directory if one doesn't exist. This file should contain your Postgres database URL. You have not created the Postgres database; you'd do that with Neon.



DATABASE_URL='postgresql://USER:PASSWORD@HOST:PORT/DATABASE'

Setting up a Postgres database with Neon

Neon is a fully managed, serverless PostgreSQL database. It separates storage and computing, offering unlimited autoscaling, branching, and storage.

Its serverless architecture allows instantaneous database creation, connection, and dynamic scaling computing based on usage to optimize costs and integrates with cloud object stores like S3 for cost-effective storage.

To set up a Postgres database, follow these steps:

Visit the Neon website and create an account if you haven’t already.
Start a new project (e.g., postapp).
Keep the version as 15, the latest release.
Name your database (e.g., postappdb).
Choose your preferred Region and click Create project.

A modal will pop up, displaying the Postgres database URL. Copy this URL and save it in your .env file. Ensure you only copy the URL and remove psql.

With this, you have successfully created a Postgres database.

Seeding your Neon database with Prisma

Your Prisma project is currently configured, and your Postgres database is set up with Neon. Next, seed the database with primary data to test everything before diving into Remix interactions.

Start by creating a posts.ts file to contain an array of posts you want to seed into the database. Export the array like so:



export const posts = [
    {
        title: 'JavaScript Performance Tips',
        body: `We will look at 10 simple tips and tricks to increase the speed of your code when writing JS`,
    },
    {
        title: 'Tailwind vs. Bootstrap',
        body: `Both Tailwind and Bootstrap are very popular CSS frameworks. In this article, we will compare them`,
    },
    {
        title: 'Writing Great Unit Tests',
        body: `We will look at 10 simple tips and tricks on writing unit tests in JavaScript`,
    },
    {
        title: 'What Is New In PHP 8?',
        body: `In this article we will look at some of the new features offered in version 8 of PHP`,
    },
];

Next, create a seed.ts file in the prisma folder with this configuration using PrismaClient:



import { posts } from './posts';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
async function main() {
    for (let post of posts) {
        await prisma.post.create({
            data: post,
        });
    }
}
main()
    .catch((e) => {
        console.log(e);
        process.exit(1);
    })
    .finally(() => {
        prisma.$disconnect();
    });

This seed.ts file imports the posts array, then uses PrismaClient to iterate through each post in the array and adds it to the database via prisma.post.create().

Next, you need to run the seed.ts file. To run this TypeScript file, install the tsx dependency:



npm i tsx

Then execute the seed.ts file:



tsx prisma/seed.t

Alternatively, you can add a Prisma script to your package.json file:



"prisma": {
    "seed": "tsx prisma/seed.ts"
},

When you run npx prisma db seed, it will populate your Neon database. To check, reload your Neon database, navigate to the Tables in your dashboard, and click the Post table to view the data:

This approach lets you pre-fill your database with the specified data, ensuring your setup works seamlessly before delving into Remix interactions.

Interacting with Prisma and Neon from Remix

Now that you've set up a Neon Postgres database, Prisma, and some initial data seeding to verify its functionality, the next step involves fetching these posts from Neon into your Remix app. You'll also implement the functionality to add and delete posts.

Start by creating a server file responsible for establishing a database connection using Prisma:



import { PrismaClient } from '@prisma/client';

let db: PrismaClient;

declare global {
    var __db: PrismaClient | undefined;
}

if (process.env.NODE_ENV == 'production') {
    db = new PrismaClient();
    db.$connect();
} else {
    if (!global.__db) {
        global.__db = new PrismaClient();
        global.__db.$connect();
    }
    db = global.__db;
}

export { db };

This code ensures a consistent database connection throughout the application's lifecycle. In production, it directly establishes a new connection; in other environments, it maintains a single global connection for efficiency.

Loading posts with Remix loader

In the posts._index.tsx file, to access the database, import the database schema, and update the posts array:



import { useLoaderData, Link } from '@remix-run/react';

import { db } from '~/utils/db.server';
// Define a type for a single post
type Post = {
    id: string;
    title: string;
    body: string;
    createdAt: Date;
};

// Define a type for the data returned by the loader
type LoaderData = {
    posts: Post[];
};

export const loader = async () => {
    const data = {
        posts: await db.post.findMany(),
    };

    return data;
};

This code sets up a loader function to fetch an array of posts from the database using db.post.findMany(), defining types for the fetched data. The fetched posts data is then made available to components through the loader.



const Posts = () => {
    const { posts } = useLoaderData<LoaderData>();

    return (
        <>
            <div className="page-header">
                <h1>Posts</h1>
                <Link to="/posts/new" className="btn">
                    New Post
                </Link>
            </div>
            <ul className="posts-list">
                {posts.map((post) => (
                    <li key={post.id}>
                        <Link to={post.id}>
                            <h3>{post.title}</h3>
                            {new Date(post.createdAt).toLocaleString()}
                        </Link>
                    </li>
                ))}
            </ul>
        </>
    );
};

export default Posts;

This will display all the posts stored in the Postgres database on your Remix application.

Load a single post from the database

In the posts.$postid.tsx file, which serves as a dynamic route to display each post based on its ID, you'll implement the retrieval of dynamic data from the database:

In the loader function, you’ll use the findUnique() method by attaching the where parameter indicating the ID for the post to be fetched:



import type { LoaderFunction } from '@remix-run/node';
import { useLoaderData, Link, Form } from '@remix-run/react';
import { db } from '~/utils/db.server';

export const loader: LoaderFunction = async ({ params }) => {
    const post = await db.post.findUnique({
        where: { id: params.postid },
    });

    if (!post) throw new Error('Post not found');

    const data = { post };

    return data;
};

You can then use the useLoaderData function to populate the client side of the application:



interface Post {
    title: string;
    body: string;
    // Define other properties if available in the 'post' object
}

const Postid = () => {
    const { post }: { post: Post } = useLoaderData();

    return (
        <>
            <div className="page-header">
                <h2>{post.title}</h2>
                <Link to="/posts" className="btn btn-reverse">
                    Back
                </Link>
            </div>
            <div className="page-content">{post.body}</div>
            <div className="page-footer">
                <button className="btn btn-delete">Delete</button>
            </div>
        </>
    );
};

export default Postid;

When you click any post from the Posts index page, it will redirect you to this dynamic page with the unique data.

Deleting posts with Remix action

Implementing the Delete button on the dynamic page involves steps similar to those used to fetch a dynamic post. However, this time, action is utilized. You’ll wrap the button in a form such that a post request can be submitted to trigger the button action:



<div className="page-footer">
    <Form method="POST">
        <input type="hidden" name="_method" value="delete" />
        <button className="btn btn-delete">Delete</button>
    </Form>
</div>

The form sends a POST request with a hidden input field (_method) set to delete to indicate the intention to delete the post. This is what the server-side code will look like:



import type { ActionFunction } from '@remix-run/node';
import { redirect } from '@remix-run/node';

import { db } from '~/utils/db.server';

export const action: ActionFunction = async ({ request, params }) => {
    const form = await request.formData();

    if (form.get('_method') === 'delete') {
        const post = await db.post.findUnique({
            where: { id: params.postid },
        });
        if (!post) throw new Error('Post not found');
        await db.post.delete({
            where: { id: params.postid },
        });
        return redirect('/posts');
    }
};

On the server side, when a POST request is received, it checks that it contains a _method field set to "delete". If found, it retrieves the post based on the specified postid, ensures its existence, and then proceeds to delete it from the database using db.post.delete. Finally, it redirects the user to the /posts page after successful deletion.

This approach follows a RESTful convention, utilizing a POST request with a hidden field to simulate a DELETE request, enabling the server to process the delete action accordingly.

When you click the delete button, the post will be deleted from the database and on the client, redirecting you to the posts index page.

Adding a new post with Remix action

Finally, one prominent feature of every full-stack application is being able to add new information from the client side to your database. This can be done with the create() method, specifying the form fields:



import type { ActionFunction } from '@remix-run/node';
import { redirect } from '@remix-run/node';
import { Link, Form } from '@remix-run/react';
import { db } from '~/utils/db.server';

export const action: ActionFunction = async ({ request }) => {
    const form = await request.formData();
    const title = form.get('title') ?? '';
    const body = form.get('body') ?? '';
    const fields = {
        title: String(title),
        body: String(body),
    };

    const post = await db.post.create({ data: fields });

    return redirect(`/posts/${post.id}`);
};

The code above utilizes Remix's action function to handle form submissions, extracting title and body data from a client request and then creating a new post in the database using this information. Upon successful creation, it redirects the user to the newly generated post's URL.

Conclusion

This guide explores building a full-stack application with Remix utilizing Prisma and Neon. This full-stack approach, incorporating Remix's capabilities, Prisma's robust ORM, and Neon's database agility, provides a solid foundation for building modern, scalable web applications.

You can access the complete code for this application on GitHub. This application can incorporate more features, like the update post feature. Read through the Neon and Prisma documentation to learn more.

Have fun coding!

How To Choose the Best Static Site Generator and Deploy it to Kinsta for Free

Joel Olawanle — Wed, 18 Oct 2023 15:17:49 +0000

In the ever-evolving landscape of web development, the pendulum of preference has swung back and forth between static and dynamic websites. It's a journey that reflects the industry's relentless pursuit of speed, security, and simplicity.

Not too long ago, dynamic websites ruled the internet. These sites, built on Content Management Systems (CMS) like WordPress and Drupal, offered unparalleled flexibility and interactivity. However, they also introduced complexity, vulnerabilities, and a significant trade-off in terms of speed. The world craved something faster, something that could blend the best of both worlds.

This is where the renaissance of static websites began. This article explains Static Site Generators (SSGs), how to choose an SSG, and how to deploy your static sites to Kinsta's Static Site Hosting for free!

The Dynamic Web Era and Resurgence of Static Sites

The early days of the Internet were marked by simple static HTML pages. These sites were incredibly fast but lacked the interactivity that modern users have expected. As the web matured, CMS like WordPress and Joomla emerged, ushering in the era of dynamic websites.

Dynamic sites offered powerful features like user-generated content and real-time updates. They became the default choice for businesses and bloggers seeking a dynamic online presence. However, this progress came at a cost.

Dynamic websites rely on server-side processing to generate pages on the fly, introducing latency and security concerns. The more complex the site, the more sluggish it became.

Additionally, hosting dynamic websites often comes with higher costs compared to hosting static sites, making it less accessible for smaller websites and projects. This led to a search for alternatives, which birthed a new approach: Static Site Generators.

What are Static Site Generators?

Static Site Generators are powerful tools used in web development to create websites with a unique blend of dynamism and speed.

They are designed to pre-build websites by generating HTML, CSS, and JavaScript files, which are ready to be served directly to website visitors. This innovative approach allows developers to escape the constraints of traditional CMS while still enjoying the flexibility of dynamic content alongside SEO, security, and hosting flexibility.

However, according to JAMStack.org, we have 360 SSGs — how can you then choose the best SSG for your site?

Before we explore some factors to consider when choosing an SSG, let's first understand the components of an SSG and the two types of SSG.

Components of an SSG

Here's a brief explanation of the key components of an SSG:

Environment (Platform): The environment, often referred to as the platform, is the programming language in which the SSG is built. This choice impacts the configuration, customization, and performance of the SSG. Common languages used for building SSGs include JavaScript (Node.js), Ruby, Python, and Go.
Templating engine: SSGs rely on templating engines to define the structure of web pages. These engines enable developers to create reusable templates and incorporate dynamic content. Popular templating engines include Liquid, Handlebars, Mustache, EJS, ERB, HAML, and Slim.
Markup language: Markup language is used to write documents in a way that distinguishes them from plain text. Most SSGs utilize lightweight markup languages, such as Markdown. However, alternatives like AsciiDoc, Textile, and ReStructuredText are also used. These lightweight languages simplify content creation and are converted into HTML during the site generation process.
Preprocessors: SSGs leverage preprocessors to streamline the development process. Preprocessors like SASS for CSS or Babel for JavaScript offer additional features and simplify code development.

Types of Static Site Generators

There are two major types of SSGs:

Framework-based SSGs: These SSGs are tightly integrated with a specific framework, which may have a steeper learning curve but can provide additional features and pre-built templates. A popular example of this is Gatsby, an SSG closely aligned with the React framework.
Framework-agnostic SSGs: These SSGs offer more flexibility but might require more configuration. They can work with a wider range of frameworks and templates. For example, Hugo, an SSG that doesn't favor any particular framework; instead, it relies on Go templates, allowing developers the freedom to adapt it to their specific needs.

Factors to Consider When Choosing an SSG

It'd make sense if you could look at your project needs and then say, "X is the best SSG for your project," but that's unrealistic. Instead, let's review some guidelines to help you choose the best SSG for your project.

Obviously, this article doesn’t mention all SSGs when citing examples, only the most popular. You can always check this list to know about other SSGs.

Here are essential factors you should take into consideration:

1. Project Requirements and Objectives

Before choosing an SSG, define your project's specific requirements and objectives. Consider the type of website you're building, such as a blog, e-commerce site, or portfolio. Your SSG should align with the purpose and features your project demands.

When it comes to crafting blogs, e-commerce websites, or portfolios, all SSGs can be a good fit. However, there are other crucial factors to consider, such as the type of content, website interactions, editor experience, and more.

Some SSGs allow for easy interaction with APIs, blog styling, and more. The more vividly you can envision the experience you wish your visitors to have, the easier it becomes to pinpoint the SSG that offers the feature set most aligned with your vision.

2. Technical Familiarity, Languages, and Frameworks

Assess your and your team's technical skills and familiarity with an SSG, framework, or language. You'll find options in nearly every programming language and framework conceivable. The question here is whether you're keen to delve into a new language or prefer the comfort of working with a technology you're already familiar with.

For instance, here are some SSGs and the programming languages or frameworks they align with:

Eleventy is an excellent choice if you're well-versed in vanilla JavaScript.
Next.js, Docusaurus, and Gatsby are ideal for React developers.
Nuxt.js and Gridsome are tailor-made for Vue.js developers.
SvelteKit is a top pick for Svelte developers.
Hugo is a perfect match for Go developers.
Jekyll is a great choice for Ruby developers.
Pelican is a preferred option for Python developers.

It's important to note that while these SSGs are associated with specific languages or frameworks, it doesn't mean you can't use them if you're unfamiliar with these technologies.

However, having prior knowledge of the language or framework can significantly enhance your ability to leverage the capabilities of the SSG. Many SSGs offer themes and plugins, which brings us to the next point.

3. Community and Ecosystem

It's crucial to consider the community and ecosystem surrounding the SSG. A robust and active community provides vital support, offers plugins, and serves as a rich resource pool.

The size and vibrancy of the SSG's community can be indicative of the level of support and development potentially available. Many SSGs offer starter repositories and sample sites for hands-on experimentation and use with different features.

While evaluating an SSG's ecosystem, it's essential to explore the intricacies of its templating engine, assessing whether it accommodates dynamic or JavaScript components and how seamlessly these can be integrated.

In terms of GitHub stars, SSGs like Next.js, Hugo, Gatsby, Docusaurus, Nuxt.js, and Jekyll top the list. Some popular SSGs even host conferences and workshops, providing resources and networking opportunities for those looking to explore more advanced topics in depth.

For example:

Next.js organizes Next.js Conf
Gatsby organizes GatsbyConf
Nuxt organizes Nuxt Nation Conference
Hugo organizes Hugo Conf

4. Distinct Features

Every SSG has its unique flair, making it suitable for various use cases and individuals. This distinctiveness might be rooted in the framework it employs, a special feature inherent to its templating language, or even the size of its installation binary.

Whether you're looking to embark on microblogging, showcase an academic portfolio, or establish a web presence for your business, there's an SSG tailored to your specific needs.

For instance, SSGs like Hugo and Jekyll are ideal for creating simple sites such as blogs and portfolios. SSGs like Docusaurus and VuePress excel at handling documentation needs. Additionally, SSGs like Gatsby, Astro, Next.js, Nuxt.js, and Gridsome are versatile options for a wide range of static site projects, especially when you are familiar with the framework that powers them.

5. Content Management Options

Content management involves the creation, organization, and publication of digital content, encompassing text, images, videos, and multimedia, on websites or applications. A well-managed content strategy ensures that information is readily available, up to date, and presented in a user-friendly manner.

There are two primary content management approaches: traditional content management systems (CMS) and headless CMS. A popular choice for SSGs is the headless CMS, which separates content creation and storage from presentation, delivering content through APIs for versatile SSG integration.

When deciding between a traditional CMS and a headless CMS, consider the impact on your SSG selection. Some SSGs seamlessly integrate with specific CMS platforms, while others offer flexibility to accommodate various content management needs. Make your choice based on what best aligns with your content creation and management requirements.

Choosing the Right Static Site Generator

After considering the factors discussed earlier, you should now understand what to look for when choosing an SSG. To wrap things up, here are some recommendations:

Beginner-friendly options: If you're new to JAMStack and programming languages in general, there are several beginner-friendly SSGs to consider, such as Jekyll, Hexo, VuePress, and Hugo. These SSGs are straightforward to set up, offer a wide range of themes and plugins, and require only a basic familiarity with Markdown to get your site up and running.
Programming experience: If you have some programming experience, especially with JavaScript, Vue, and React, you can explore more advanced SSGs like Gatsby, Astro, Eleventy, SvelteKit, Next.js, Nuxt.js, Gridsome, and Docusaurus.
Advanced programming and JAMStack knowledge: For those with advanced programming and JAMStack knowledge, there are additional SSGs like Pelican, Scully, RedwoodJS, Sapper.js, Middleman, and many more that you can delve into.

Now, let's tailor the recommendations for specific use cases:

Blogging: If your goal is to run a blog, beginner-friendly SSGs like Jekyll, Hexo, and Hugo are excellent choices. You can easily integrate services like Disqus or other comment systems to engage with your audience.
E-Commerce: For an e-commerce website, consider more advanced SSGs like Gatsby or Next.js, and use a payment gateway for checkout functionality. These SSGs allow you to build dynamic and interactive online stores.
Documentation site: For creating documentation or knowledge base sites, consider SSGs like Docusaurus and VuePress, which are specifically designed for this purpose. It offers features for structured content, search functionality, and versioning.
Portfolio or business site: If you want to create a simple descriptive site, such as a portfolio or a business website, you have the flexibility to choose from a wide range of SSGs based on your familiarity with programming. Beginner-friendly options work well for simple sites, while advanced SSGs can provide more customization and interactivity.

Easily Deploy Your Static Site for Free With Kinsta

When it comes to hosting, static sites have a significant advantage, thanks to the wide array of hosting platforms available today. Kinsta is one such platform — it allows you to host up to 100 static websites for free.

With platforms like Kinsta, there's no need to build your static files locally and then upload them using an FTP client. Instead, we leverage Git with your preferred Git provider (such as Bitbucket, GitHub, or GitLab) to deploy your site directly from your repository.

Once your Git repository is ready, follow these steps to deploy your static site to Kinsta:

Log in or create an account to view your MyKinsta dashboard.
Authorize Kinsta with your Git provider.
Click Static Sites on the left sidebar, then click Add site.
Select the repository and the branch you wish to deploy from.
Assign a unique name to your site.
MyKinsta will detect the build settings for the SSG automatically or check our documentation for the build setting information.
Finally, click Create site.

And that's it! You now have a deployed site within a few seconds. A link is provided to access the deployed version of your site. You can later add your custom domain and SSL certificate if you wish.

Currently, Kinsta's Static Site Hosting only builds SSGs built in Node.js. If you're using other SSGs like Jekyll or Hugo, you need to build your site first and then deploy the static files to Kinsta. There are a couple of methods to streamline this process. One of them is implementing CI/CD (Continuous Integration/Continuous Deployment) to automate the build and deployment stages. Another is pushing your static files directly to the Git repository you want to deploy from.

As an alternative to Static Site Hosting, you can opt for deploying your static site with Kinsta's Application Hosting, which provides greater hosting flexibility, a wider range of benefits, and access to more robust features. For example, scalability, customized deployment using a Dockerfile, and comprehensive analytics encompassing real-time and historical data.

Summary

It's important to note that numerous excellent choices are available, making it challenging to make a poor selection. Over the years, various SSGs have shown that almost all options are capable of creating sites effectively.

Ultimately, choosing an SSG boils down to personal preference and how open you are to learning something new.

Cloud Computing In EdTech: Benefits, Use Cases, & Challenges

Joel Olawanle — Wed, 10 May 2023 22:18:28 +0000

As technology continues to revolutionize our lives and work, it is no surprise that the education sector has also been impacted. Cloud computing has emerged as a game-changing technology for the education industry with its ability to offer on-demand access to computing resources and services over the internet.

In this article, you will explore how cloud computing is transforming education, its benefits, and various uses in EdTech, and how Appwrit e can help address some of these challenges.

What is Cloud Computing?

Cloud computing refers to the delivery of computing resources like servers, storage, databases, networking, software, and analytics over the internet. It makes these resources readily accessible on demand and can be quickly scaled up or down depending on the user's needs.

Benefits of Cloud Computing in EdTech

Cloud computing offers numerous benefits for EdTech companies and educational institutions. Some of these benefits include:

Cost-Effective: With cloud computing, educational institutions no longer need to spend money on costly hardware and software infrastructure. Organizations can now use cloud services on a rental basis which can lower capital expenses and operating costs.
This means users only pay for the resources they use — a benefit for institutions that cannot afford to invest in expensive infrastructure.

Scalable: Cloud computing helps educational institutions scale their computing resources up or down based on their needs. Institutions can expand their infrastructure to accommodate more students or scale down during off-peak periods.
This ensures the effective use of resources since you only pay for what you use by adding or removing resources as needed. This can be a huge benefit for institutions that experience fluctuations in student numbers.

Accessible: Cloud computing allows students to access educational resources anywhere and at any time. It is helpful for distance learning since it helps students to access course materials from any location with an internet connection and collaborate with other students and teachers in real time.

Flexible: Cloud computing provides flexibility in delivering education. The instructor may use different formats like audio, video, and text to pass along the content to students enabling remote learning.

Collaborative: Cloud computing enables educators and students to collaborate in real time. Students may work together on projects or assignments and educators can provide feedback and support regardless of students' location.

Reliable: Cloud computing offers high reliability and uptime which ensures educational institutions and students have uninterrupted access to resources.

Secure: Cloud computing providers offer robust security features that protect data and resources from unauthorized access, theft, data breaches, and cyber-attacks. This is essential for institutions storing sensitive information like student records.

Real-World Use Cases in the Application of Cloud Computing in EdTech

Cloud computing has advanced the way businesses operate and has transformed the education sector as well. There are so many ways to use cloud computing in the EdTech space, such as:

Learning Management Systems: Learning Management Systems (LMS) are software applications that enable educational institutions to manage, deliver, and track educational content and resources. With LMS, you can manage student records, track student progress, and provide analytics. Cloud-based LMS are cost-effective and scalable, making them suitable for institutions of all sizes. The LMS is so effective that educators can upload learning materials such as videos, podcasts, and e-books. Students can access these materials conveniently and learn at their own pace.

Cloud-based LMS solutions help educational institutions with the ability to scale resources according to their needs, reduce costs, and increase accessibility.

Collaborative Learning: Regardless of the location, students can collaborate on group projects. Instructors can track students' progress and drop feedback in real time.
Some cloud-based collaboration tools are Google Docs, Microsoft Teams, Slack, etc. These tools provide educational institutions with cost-effective ways to improve communication and collaboration between students and teachers.

Virtual Classrooms: Virtual classrooms are online learning environments that enable students and teachers to interact and collaborate in real time. You use them in every virtual boot camp, online degree, and massive open online course.

Cloud-based virtual classroom solutions provide educational institutions with the flexibility to deliver online courses and training programs. Students can access them from any device, anywhere, and anytime. Students can interact with educators and ask questions, making the learning experience more engaging. Some cloud-based tools used include; Google Classroom, Zoom, and Google Meet.

Cloud-Based Content Delivery: Cloud-based content delivery platforms help to deliver content to students in different formats using audio, video, and text. These platforms can be accessed from anywhere, making education more accessible.

Big Data Analytics: With cloud computing, education institutions can assess massive amounts of data from students, instructors, and stakeholders with a limited amount of resources and expenses for the coalition of this data.
You can use the data to improve the learning results, identify problems, allocate resources better, and enhance the results for everyone involved.

Finally, here is a list of cloud-based organization tools in the EdTech space.

Coursera: Coursera provides a massive selection of courses from diverse colleges and organizations. They host and distribute teachings to millions of students via cloud computing. Coursera uses cloud computing for reliability, scalability, and cost-effectiveness, ensuring students access high-quality educational content.
Khan Academy: Khan Academy provides free online courses in several disciplines, including tech, math, science, and humanities. Khan stores and distributes educational videos, helping students access content from any location.
Udacity: Udacity provides courses in various disciplines. They use cloud computing to host their teachings, enabling students to access resources from anywhere, anytime, using any device. Udacity uses cloud-based resources like machine learning to improve students' learning experience.
Edmodo: Edmodo is a social learning platform that helps instructors to set up virtual classrooms and interact with their students. It uses cloud computing to host and transmit classes, aiding the instructors to give students unique and personalized learning experiences.
Blackboard: Blackboard is a Learning Management System. Universities and colleges use it around the world. This platform uses cloud computing to give users access to a dependable and secure environment for facilitating communication and hosting class sessions.
Canvas: Canvas is an interactive LMS for educational institutions to manage teaching and learning activities. With Canvas, you create and oversee assignments, grades, course contents, quizzes, and students access the platform from anywhere. It also provides seamless communication between instructors and students, using discussion forums, messaging, and video conferencing.

Challenges of Cloud Computing in EdTech

Despite the many benefits of cloud computing in EdTech, there are also some challenges that need to be considered:

Connectivity: You need stable access to an internet connection to use cloud computing which may not be available in some rural or underdeveloped areas;.this makes it difficult for students in these areas to enjoy and use the EdTech resources.
Security/Privacy: Cloud computing requires data storage on remote servers and raises privacy issues such as data breaches and cyber-attacks which can compromise the security of the data.
Although this challenge is not invincible, institutions need to abide by necessary data protection rules and regulations. Adopt strict data privacy policies and monitor the compliance of cloud service providers.
Integration: It can sometimes be difficult for educational institutions to integrate their current systems with cloud-based technologies. Integration can result in data gaps and inefficiencies and can cause the cloud-based solution to be less efficient.
Vendor Lock-In: Institutions using the cloud frequently may become bound by contracts with their cloud providers. It may reduce their adaptability and make switching suppliers difficult.
Technical Expertise: You need technical expertise in the EdTech space to manage and maintain cloud infrastructure. This can be lacking in some institutions, limiting the efficient use of cloud computing.

How Appwrite Solves the Challenges of Cloud Computing in EdTech

With the revolution in the EdTech space through cloud computing, there has been a growing number of educational technologies. These platforms need a uniform medium that offers seamless integration and is easy to scale. Appwrite to the rescue.

Appwrite is an open-source backend server that simplifies the development process by providing developers with a comprehensive set of tools, services, and APIs to build, deploy, and manage cloud-based applications.

Appwrite is a medium to help educational institutions address the challenges of cloud computing in EdTech. It is modular and easy to use, making it an ideal platform for EdTech developers looking to build and scale cloud-based applications.

How can Appwrite help? Appwite helps by providing the following:

Enhanced Security: EdTech platforms deal with sensitive data such as student grades and records. Appwrite provides various privacy features like access control, encryption, multi-factor authentication, and other security facets to ensure the data is safe and secure from unauthorized access.
Scalability: Usually, you consider scalability as your user base grows. Appwrite offers a scalable architecture that can help developers add more resources without affecting the application's performance.
Cost-Efficient Solution: Appwrite is a free, open-source platform, making it ideal for EdTech organizations and enterprises. It provides different APIs and features, minimizing the need for developers to create unique solutions from scratch and saving them time and money.
Easy Integration and Development Process: Appwrite offers various APIs and tools ready for integration with other services and platforms. It helps in the easy development/deployment of cloud-based applications with other cloud-based service providers such as Google Cloud Platform, Amazon Web Services, and Microsoft Azure.

The platform offers a range of features like authentication, file storage, and database management and is essential for building a robust EdTech platform.

Conclusion

In this article, you have learned the various ways cloud computing benefits EdTech, the various use cases, and the challenges. This will help EdTech companies and educational institutions carefully consider these challenges when adopting and implementing cloud computing solutions and work towards overcoming them to fully reap this technology's benefits.

You can learn more about Appwrite and why you should use Appwrite in this article.

How to Plan for Software Scalability and Building for Growth

Joel Olawanle — Fri, 18 Nov 2022 12:25:02 +0000

In today's world, technology is advancing by the day. Whenever you plan to build software, you must plan for growath. Scalability is one of the most important factors to consider when creating software products and applications that will grow over time. When software products and applications are developed without first considering scalability, sustaining growth becomes a challenge.

There are several factors to consider when planning and developing a scalable application. This article will explain software scalability and how to plan for it to ensure growth when building software products and applications.

What is Software Scalability?

Software scalability measures how a system can expand its capacity and functionalities in response to user demand. It refers to the software's ability to handle increased workloads and support increasing data volumes while adding and removing data with minimal cost impact. For example, a database's scalability determines how well it can adapt to new users joining a system or how well it handles integrations.

Software scalability encompasses performance, maintenance, availability, and cost. Performance is a broad parameter that influences productivity and, as a result, conversion. The goal of scalable software is for it to be stable while adapting to changes, upgrades, overhauls, and resource reductions.

You now understand what software scalability is all about and why you should build software that scales. Now, let's explore some key points for planning software scalability when developing software that will grow.

How to Scale your Software for Growth

It is important to recognize that there is no universal formula or method for scaling an application. Software scaling is a methodology based on a set of principles rather than a language or a tool. Here is a list of the best practices for planning software scalability.

Build functionalities with growth in mind
When developing software, you don't have to focus on creating something with many features in the first version; however, it would help if you constructed it to allow for future expansion and growth.

Suppose your software initially only supports a few users, uses limited storage, and processes a few instructions. In that case, you should design with expansion in mind so that the same software can scale. This will simplify handling all types of expansion, such as database, speed, etc.

Make the best choice of technologies
Use and select tools that support your intended expansion, so you don't have to struggle with confining yourself to a tool that doesn't support growth when your software begins to grow.

To create scalable software, you should start with technologies that support scalability. This entails using well-known libraries, appropriate search algorithms, and asynchronous code.

Write clean code
Writing clean code is critical to scaling your software when building for growth. You'll need to use programming techniques like KISS (keep it simple, stupid), DRY (don't repeat yourself), and others to write scalable and maintainable code. You will also avoid unnecessary iterations to improve software performance.

A well-written code makes future changes simple to implement. A new programmer will spend less time analyzing existing scripts and more time creating new ones. This emphasizes why you always need a good developer who will not only complete the task but will do it well.

Use caching technique to improve scalability
Caching involves storing pre-computed results that your application can access without requiring database queries or page renders. It avoids repeatedly handling expensive requests, reducing overall response time and software performance.

This means that your software only makes a single request, caches the data, and then continues to use it. Before making a request, your software will have to search the cache for the data, which benefits users due to your software's speed even when the software scales.

Make adding features simple
Scalability is all about ensuring that growth is possible without causing problems. The development team must be able to push new features and upgrade existing features to meet the growing needs of users. It would help if you designed your software to allow for automated testing across functionality, making it easier to identify bugs and less stressful to add new features.

Unit and integration tests will make adding and updating features more efficient and straightforward. This is because unit tests examine minimal functions, such as individual functions, whereas integration tests ensure more significant components, such as an entire page. Allowing automated testing means you can use these types of testing to test your software without affecting the entire program—this aids scalability.

Use suitable databases to achieve scalability
It is critical to select the type of database storage for your project data. Many of the issues encountered when scaling software are related to the database. To minimize and avoid future complications, you must first determine which type of database is appropriate for your project. You must select between a non-relational database (NoSQL) and a relational database (RDBMS or SQL).

Both types of databases have drawbacks. If you need to make quick changes for a short period, a non-relational database is ideal. It enables you to scale your software while keeping the data simple. On the other hand, a relational database gives you a lot of access to information because data is connected, so every search query is a complex task.

Use Appwrite
Appwrite can assist you with the backend, which includes database, security, users, authentication, storage, and more if you are developing a web or mobile application. I saved this tip for last because it covers and crowns all others. Appwrite was designed to be scalable.

Appwrite is an open-source, end-to-end back-end server that allows developers to build scalable applications much more quickly by providing a set of APIs, tools, and a management console UI. It is cross-platform and technology-independent, which means it can run on any operating system, programming language, framework, or platform.

As your application grows, you face security, storage, authentication, performance, and cost challenges. Using different tools to handle different operations can be very costly. Appwrite is built with data security and privacy in mind. Not only that, Appwrite can be hosted anywhere. It enables complete data ownership and control.

Appwrite has numerous advanced security features to keep data safe. This includes data encryption for all of your sensitive information and secrets. Built-in SSL certificates are generated automatically by Let's Encrypt, ensuring secure client communication at all times. Appwrite also handles all certificate renewals automatically.

Conclusion

In this article, you learned what software scalability is and some key points to consider when planning for software scalability as you build for growth. Scalability is difficult; it necessitates these factors and more to ensure that your software is built for growth.

But the main point is that you should build with growth in mind. Tools like Appwrite will help enhance and ensure growth. You can learn more about Appwrite and why you should use Appwrite in this article.

Don't Re-Invent The Wheel, Use Appwrite

Joel Olawanle — Tue, 06 Sep 2022 16:27:28 +0000

When attempting to build a solution on the internet using any technology, it is the wisest and best advice to look for resources available to you. This eliminates the stress of creating a solution from scratch for a feature that should only require a few lines of code to integrate.

On the internet today, many groups of individuals, companies, and programmers are developing specific solutions, products, packages, and libraries to assist in the resolution of a specific problem. These solutions are designed to be easily added/integrated into your projects and used without struggling with the logic of how things work in your projects.

For example, many people struggle with implementing authentication within applications. Some companies and individuals took it upon themselves to create packages and solutions that anyone can easily integrate into their projects. You no longer have to worry about database security, data loss, and other issues.

In this article, you'll learn about Appwrite, what it does, how it can help you handle the heavy lifting for your projects, and why you should use it instead of building solutions from scratch.

What is Appwrite?

Appwrite is an open-source, end-to-end back-end server used by developers (mainly front-end and mobile developers) to build applications and web applications much faster by providing you with a set of APIs, tools, and a management console UI. It has over 24 thousand stars on GitHub and an active community of open-source contributors.

Appwrite is cross-platform and technology-agnostic, meaning it can run on any operating system, coding language, framework, or platform. You can use it with web technologies like JavaScript and its frameworks like React, Angular, and mobile technologies like F lutter, A ndroid, A pple, and even servers.

The major goal of Appwrite is to reduce the complexity of performing certain tasks, implementing certain features, and in general, building a modern, advanced and fast application. You no longer need to re-invent the wheel; you can now use Appwrite easily.

Why use Appwrite?

Appwrite helps you save development time and allows you to focus on the major problem you are attempting to solve or build. Appwrite offers the following services making it easy to implement certain features without having to re-invent them:

Databases
You can use the Appwrite database service with whatever client application (web or native). It allows you to create a structured collection of documents to manage, apply advanced queries, filter and set read and write access permissions for a specific user or team, or even grant it public access (role:all).

The databases service accepts as many databases as you want, with each database containing as many collections as you want. These databases allow you to choose how you want to structure your database, the type of data, validation rules for each document in your database, and more. The structure of your documents is based on the collection attributes you define; which helps ensure all user-submitted data/document is validated and stored according to the collection structure.

Note: All data returned by the Databases service are represented as structured JSON documents.

Account and Authentication
The account and authentication service saves a lot of time, making it easy to create accounts, implement authentication, and log in even with third-party OAuth providers such as Facebook, GitHub, LinkedIn, and more.

The account service can also allow you to update user information, retrieve the user sessions (including information about the session location, device, operating system, and user agent) across different devices, and save user preferences like their UI language, timezone, or favorite theme. It also lets you fetch the user's security logs with their recent activity and other security-sensitive events.

Storage
The Appwrite storage service also makes it easy for your users to upload and manage files securely with read and write permission roles. This storage service offers a built-in integration with an auto-updated antivirus server whereby all uploaded files are scanned and validated to ensure the safety of your users and application.

The files are managed using buckets (similar to collections you have in your databases service). These buckets provide more power to decide what kinds of files, what sizes you want to allow in that bucket, whether to encrypt the files, scan with antivirus, and more.

The storage service also has a preview endpoint that allows you to generate preview images for your files. This preview endpoint allows you to manipulate the resulting image in terms of dimensions, file size, and style to fit perfectly inside your app. Using the preview endpoint, you can also change the resulting image file format for better compression or image quality for better network delivery.

Functions
Even with all the services that Appwrite provides, it also makes it easy for you to create custom behaviors in response to any predefined schedule or Appwrite system events like account creation, user login, or document update.

Appwrite functions run in a secure, isolated Docker container. You can easily create yours by following the Appwrite detailed documentation guide that covers the entire writing process to deploy your functions and lots more.

Localization
Localization has to do with displaying content based on specific locations of the user. It is a core feature that has to be implemented for your application to be used beyond your locality. For example, if a user is in a French-speaking country, you would like the content of your website to appear to that user in French, and the same applies to other languages.

The locale service allows you to display content based on your user's location, which is gotten via the user's location. It supports multiple locales and makes it possible for us to switch locales. This service also gives you access to your users' statistics, such as their IP address, countries, continents, phone codes, currencies, etc. You can learn how localization works with Appwrite in the localization documentation.

Teams
Appwrite teams service allows you to group users and share read and write permissions for them to access specific project resources like database documents or/and storage files. This makes it easy to implement access control for your application's resources.

How to get started with Appwrite

The Appwrite server is packaged as a Docker container, which you can easily set up on your local machine or any cloud provider of your choice with a simple docker-compose command from your terminal:

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:0.15.3

Appwrite can be used to build all forms of applications, such as a todo application with React and lots more. You can check out more demos here.

Conclusion

In this article, you have learned what Appwrite is all about and why you should use Appwrite rather than coding from scratch. You can learn how to integrate Appwrite into all your platforms using the following quick start tutorials:

Beginners Guide to Consuming REST APIs in React

Joel Olawanle — Thu, 26 May 2022 15:48:37 +0000

Introduction

React is a popular frontend framework that developers use to create applications. You will need to integrate APIs into your React application at some point if you want to build real-world applications. Every developer who wants to build modern, real-world web applications with React must understand how to consume APIs to fetch data into React applications.

In this beginners guide, we will learn how to consume RESTful API in React, including fetching, deleting, and adding data. We'll also go over the two main ways to consume RESTful APIs and how to use them with React hooks.

What Is a REST API?

If you've ever spent any time programming or researching programming, you've almost certainly come across the term "API." API stands for Application Programming Interface, and it is a medium that allows different applications to communicate programmatically with one another and return a response in real time.

Roy Fielding defined REST as an architectural style and methodology commonly used in the development of internet services, such as distributed hypermedia systems, in 2000. It is an acronym that stands for "REpresentational State Transfer."

When a request is made via a REST API, it sends a representation of the resource's current state to the requester or endpoint. This state representation can take the form of JSON (JavaScript Object Notation), XML, or HTML. JSON is the most widely used file format because it is language-independent and can be read by both humans and machines.

For example:

[
   {
      "userId": 1,
      "id": 1,
      "title": "sunt excepturi",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur "
   },
   {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil"
   }
]

Consuming REST API’s in React

Consuming REST APIs in a React Application can be accomplished in a variety of ways, but in this guide, we will look at two of the most popular approaches: Axios (a promise-based HTTP client) and Fetch API (a browser in-built web API).

Note: To fully comprehend this guide, you should be familiar with JavaScript, React, and React hooks, as they are central to it.

Before we get into how to consume APIs, it's important to understand that consuming APIs in React is very different from how it's done in JavaScript because these requests are now done in a React Component. In our case, we would be using functional components, which necessitates the use of two major React Hooks:

useEffect Hook: In React, we perform API requests within the useEffect() hook so that it renders either immediately when the app mounts or after a specific state is reached. This is the general syntax that will be used:

useEffect(() => {
    // data fetching here
}, []);

useState Hook: When we request data, we must prepare a state in which the data will be stored when it is returned. We can save it in a state management tool such as Redux or in a context object. To keep things simple, we'll store the returned data in the React local state.

const [posts, setPosts] = useState([]);

Let's now get into the meat of this guide, where we'll learn how to get, add, and delete data using the JSONPlaceholder posts API. This knowledge is applicable to any type of API, as this guide is intended for beginners.

Consuming APIs Using The Fetch API

The Fetch API is a JavaScript built-in method for retrieving resources from a server or an API endpoint. This is built-in and does not require the installation of any dependencies or packages.

The fetch() method requires a mandatory argument, which is the path or URL to the resource you want to fetch, and then returns a Promise so you can handle success or failure using the then() and catch() methods.

A basic fetch request is very simple to write and looks like this: We are simply fetching data from a URL that returns data as JSON and then logging it to the console:

fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
   .then(response => response.json())
   .then(data => console.log(data));

Note: The default response is usually a regular HTTP response rather than the actual JSON, but we can get our output as a JSON object by using the response's json() method.

Performing GET Request in React With Fetch API

The HTTP GET method can be used to request data from an endpoint; as previously stated, the Fetch API accepts one mandatory argument, which is true; it also accepts an option argument, which is optional, especially when using the GET method, which is the default; however, for other methods such as POST and DELETE, it is necessary to attach the method to the options array:

fetch(url, {
    method: "GET" // default, so we can ignore
})

So far, we've learned how things work, so let's put everything we've learned together and perform a get request to fetch data from our API. As previously stated, we'll be using the free online API JSONPlaceholder to fetch a list of posts into our application:

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

const App = () => {
   const [posts, setPosts] = useState([]);
   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then((response) => response.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

return (
   // ... consume here
);
};

We created a state in the preceding code to store the data we will retrieve from the API so that we can consume it later in our application, and we also set the default value to an empty array.

const [posts, setPosts] = useState([]);

The major operation then occurred in the useEffect state, so that the data/posts are fetched as soon as the application loads. The fetch request yields a promise, which we can either accept or reject:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10').then(
      (response) => console.log(response)
   );
}, []);

This response contains a large amount of data, such as the status code, text, and other information that will be needed to handle errors later. So far, we've handled a resolve using .then(), but it returned a response object, which isn't what we wanted, so we need to resolve the Response object to JSON format using the json() method, which also returns a promise for us to get the actual data using the second .then().

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      });
}, []);

If we look at the console, we'll see that we've retrieved 10 posts from our API, which we've also set to the state we specified earlier. This is not complete because we have only handled the promise's resolve and not the promise's rejection, which is handled using the .catch() method:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

So far we have seen how to perform a GET request, this can be consumed easily into our aplication by looping through our array:

const App = () => {
// ...

   return (
   <div className="posts-container">
      {posts.map((post) => {
         return (
            <div className="post-card" key={post.id}>
               <h2 className="post-title">{post.title}</h2>
               <p className="post-body">{post.body}</p>
               <div className="button">
               <div className="delete-btn">Delete</div>
               </div>
            </div>
         );
      })}
   </div>
   );
};

export default App;

Performing POST Request in React With Fetch API

The HTTP POST method can be used to send data from an endpoint; it works similarly to the GET request, with the main difference being that the method and two additional parameters must be added to the optional object:

const addPosts = async (title, body) => {
await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
   title: title,
   body: body,
   userId: Math.random().toString(36).slice(2),
}),
headers: {
   'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((data) => {
   setPosts((posts) => [data, ...posts]);
   setTitle('');
   setBody('');
})
.catch((err) => {
   console.log(err.message);
});
};

The major parameters that will appear strange are the body and header. The body holds the data we want to pass into the API, which we must first stringify because we are sending data to a web server, and the header tells the type of data, which is always the same when consuming REST API's. We also set the state to hold the new data and distribute the remaining data into the array.

Looking at the addPost() method we created, it expects these data from a form or whatever; in our case, I created a form, obtained the form data via states, and then added it to the method when the form was submitted:

import React, { useState, useEffect } from 'react';
const App = () => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
// ...
const addPosts = async (title, body) => {
   await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
      .then((response) => response.json())
      .then((data) => {
         setPosts((posts) => [data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

const handleSubmit = (e) => {
   e.preventDefault();
   addPosts(title, body);
};    

return (
   <div className="app">
      <div className="add-post-container">
         <form onSubmit={handleSubmit}>
            <input type="text" className="form-control" value={title}
               onChange={(e) => setTitle(e.target.value)}
            />
            <textarea name="" className="form-control" id="" cols="10" rows="8" 
               value={body} onChange={(e) => setBody(e.target.value)} 
            ></textarea>
            <button type="submit">Add Post</button>
         </form>
      </div>
      {/* ... */}
   </div>
);
};

export default App;

Performing DELETE Request in React With Fetch API

The HTTP DELETE method can be used to remove data from an endpoint; it works similarly to the GET request, with the main difference being the addition of the method:

const deletePost = async (id) => {
await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
   method: 'DELETE',
}).then((response) => {
   if (response.status === 200) {
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   } else {
      return;
   }
});
};

This is triggered when the button is clicked, and we get the id of the specific post in which the button was clicked, and then we remove that data from the entire retuned data. This will be removed from the API but not immediately from the UI, which is why we have added a filter to remove the data as well. For each item in the loop, your delete button will look like this:

const App = () => {
// ...

   return (
   <div className="posts-container">
      {posts.map((post) => {
         return (
            <div className="post-card" key={post.id}>
               {/* ... */}
               <div className="button">
                  <div className="delete-btn" onClick={() => deletePost(post.id)}>
                     Delete
                  </div>
               </div>    
            </div>
         );
      })}
   </div>
   );
};

export default App;

Using Async/Await in Fetch API

So far, we've seen how to make fetch requests normally using the promise syntax, which can be confusing at times due to the. Then comes the chaining. We can avoid the.then chaining by using Async/await and write more readable code.

To use async/await, first call async in the function, and then when making a request and expecting a response, add the await syntax in front of the function to wait until the promise settles with the result.

When we use async/await, all of our Fetch requests will look like this:

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

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with fetch API
   useEffect(() => {
      const fetchPost = async () => {
         const response = await fetch(
            'https://jsonplaceholder.typicode.com/posts?_limit=10'
         );
         const data = await response.json();
         console.log(data);
         setPosts(data);
      };
      fetchPost();
   }, []);

   // Delete with fetchAPI
   const deletePost = async (id) => {
      let response = await fetch(
         `https://jsonplaceholder.typicode.com/posts/${id}`,
         {
            method: 'DELETE',
         }
      );
      if (response.status === 200) {
         setPosts(
            posts.filter((post) => {
               return post.id !== id;
            })
         );
      } else {
         return;
      }
   };

   // Post with fetchAPI
   const addPosts = async (title, body) => {
      let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      });
      let data = await response.json();
      setPosts((posts) => [data, ...posts]);
      setTitle('');
      setBody('');
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

Handling Errors

In this section, we'll look at how to handle errors both traditionally and with async/await. We can use the response data to handle errors in the Fetch API, or we can use the try/catch statement when using async/await. Let's look at how we can do this normally in Fetch API:

const fetchPost = () => {
fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
   .then((response) => {
      if (!response.ok) {
         throw Error(response.statusText);
      }
      return response.json();
   })
   .then((data) => {
      console.log(data);
      setPosts(data);
   })
   .catch((err) => {
      console.log(err.message);
   });
};

You can read more about Fetch API errors here.

And for async/await we can use the try and catch like this:

const fetchPost = async () => {
   try {
      const response = await fetch(
         'https://jsonplaceholder.typicode.com/posts?_limit=10'
      );
      const data = await response.json();
      setPosts(data);
   } catch (error) {
      console.log(error);
   }
};

Consuming APIs Using Axios

Axios is an HTTP client library based on promises that makes it simple to send asynchronous HTTP requests to REST endpoints. This end point in our case is the JSONPlaceholder Posts API, to which we will make GET, POST, and DELETE requests.

Installing and Configuring an Axios Instance

Axios, unlike the Fetch API, is not built-in, so we will need to incorporate it into our project in order to use it. We can add Axios to our project by running the following command:

npm install axios

Once this has been successfully installed, we can proceed to create an instance, which is optional but recommended as it saves us from unnecessary repetition. To create an instance, we use the .create() method, which can be used to specify information such as the URL and possibly headers:

import axios from "axios";

const client = axios.create({
   baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

Performing GET Request in React With Axios

We will use the instance we declared earlier for this, and all we will do is set the parameters, if any, and get the response as json by default. Unlike the Fetch API method, no option is required to declare the method; we simply attach the method to the instance and query it.

useEffect(() => {
   client.get('?_limit=10').then((response) => {
      setPosts(response.data);
   });
}, []);

Performing POST Request in React With Axios

As previously stated, the POST method can be used to send data to an endpoint; it functions similarly to the GET request, with the main difference being the requirement to include the method and an option to hold the data we are sending in:

const addPosts = (title, body) => {
   client
      .post('', {
         title: title,
         body: body,
      })
      .then((response) => {
         setPosts((posts) => [response.data, ...posts]);
      });
};

Performing DELETE Request in React With Axios

We can perform delete requests using the delete method, which would get the id and delete it from the API, and we would also use the filter method to remove it from the UI, as we did with the Fetch API method:

const deletePost = (id) => {
   client.delete(`${id}`);
   setPosts(
      posts.filter((post) => {
         return post.id !== id;
      })
   );
};

Using Async/Await in Axios

So far, we've seen how to make Axios requests using the promise syntax, but now let's see how we can use async/await to write less code and avoid the .then() chaining.

When we use async/await, all of our Axios requests will look like this:

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

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with Axios
   useEffect(() => {
      const fetchPost = async () => {
         let response = await client.get('?_limit=10');
         setPosts(response.data);
      };
      fetchPost();
   }, []);

   // Delete with Axios
   const deletePost = async (id) => {
      await client.delete(`${id}`);
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   };

   // Post with Axios
   const addPosts = async (title, body) => {
      let response = await client.post('', {
         title: title,
         body: body,
      });
      setPosts((posts) => [response.data, ...posts]);
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

Handling Errors

For promise based axios requests, we can use the.then() and.catch () methods, but for async/await, we can use the try...catch block. This is very similar to how the Fetch API was implemented, the try...catch block will look like this:

const fetchPost = async () => {
   try {
      let response = await client.get('?_limit=10');
      setPosts(response.data);
   } catch (error) {
      console.log(error);
   }
};

You can read more about handling errors with Axios here.

Fetch API vs Axios

You may have noticed some differences, but it would also be nice for us to notice some differences. These distinctions will assist you in deciding which method to use for a specific project. Among these distinctions are:

Axios	Fetch
Axios is a standalone third-party package that is simple to install.	Fetch is built into most modern browsers; no installation is required as such.
Axios uses the data property.	Fetch uses the body property.
Axios data contains the object.	Fetch’s body has to be stringified.
When the status is 200 and the statusText is 'OK,' the Axios request is accepted.	Fetch request is ok when response object contains the ok property.
Axios performs automatic transforms of JSON data.	Fetch is a two-step process when handling JSON data- first, to make the actual request; second, to call the .json() method on the response.
Axios allows cancelling request and request timeout.	Fetch does not.
Axios has built-in support for download progress.	Fetch does not support upload progress.
Axios has wide browser support.	When the status is 200 and the statusText is 'OK,' the Axios request is accepted. Fetch is only compatible with Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+. (This is known as Backward Compatibility).

Conclusion

In this guide, we learned how to consume REST APIs in react using either the Fetch API or Axios. This will assist you in getting started with API consumption in React, and from there you will be able to perform more unique data consumptions and API manipulation.

How to Connect a React DApp to MetaMask

Joel Olawanle — Wed, 25 May 2022 10:13:35 +0000

Introduction

I recently got into the Web3 space, and one of the first things I discovered were common blockchain technologies/terms like decentralized applications (DApps), MetaMask, and many others.

After becoming acquainted with these terms, I wanted to write blockchain-related code for the first time, and one of the first ideas that came to mind was how to connect a React application (now DApp) to MetaMask. At first, I thought this would be extremely difficult to implement, but after much research, it turned out to be a simple/fun thing to try out.

In this article, I will explain all of these terms/technologies so that a newbie can easily understand it, and then we will learn how to connect a React DApp to MetaMask and retrieve some information such as the wallet address and wallet amount.

You can check out the app live here ✨.

Definition of Technologies/Terms

This article is going to cover a lot, but let's start by understanding the fundamental terms and technologies that will be used in this guide.

What is Decentralized Application (DApp)?

A decentralized application (DApp) is a program that is run by many users on a decentralized network to eliminate any single point of failure. Smart contracts are typically visualized on a front-end and executed on a peer-to-peer network; in other words, there is usually a front-end, which could be a website containing HTML, CSS, and JS code, in our case a React application; this is what users interact with. And a backend to handle the core logic, such as smart contracts written in Solidity.

According to the definition above, the title should not be "how to connect a decentralized application..." because we are only learning how to connect metamask and not interacting with a smart contract, but this is a good first step toward creating our first decentralized application, so the title is appropriate.

What is MetaMask?

As one of the world's leading cryptocurrency wallets that can be used to interact with decentralized applications, MetaMask is a browser plugin that serves as an Ethereum wallet, allowing users to store Ether and other ERC-20 tokens.

Though it may appear complicated at first, MetaMask is one of the easiest Ethereum wallets and DApp browsers to use, and it can be set up in a matter of minutes. We can find a list of supported browsers and instructions for installing MetaMask on our preferred browser here.

In summary, all we have to do is download and install the official MetaMask browser extension/add-on; once installed, we should see a splash screen. To begin creating our Ethereum wallet with MetaMask, click the 'Get Started' button.

What is Ethers.JS?

Ethers.js is a free and open source JavaScript library that lets developers interact with the Ethereum blockchain. It is very similar to web3.js, but we will use ethers.js in this article. The library includes utility functions written in JavaScript and TypeScript, as well as all the features of an Ethereum wallet.

It is made up of several major modules, but for the purposes of this guide, we will only interact with Ethers. Provides abstract read-only access to the Ethereum blockchain and its status, which can be used to issue queries and send signed transactions.

So far, we've learned about the core technologies that will be used in this article; now, let's build our React application so that we can connect MetaMask to it using ethers.js.

Getting Started

First, we'll set up our React application using Create React App (CRA), which is a quick way to start building a new single-page application in React. But before we do that, it’s important to know some prerequisites to help us understand this article better.

These are the prerequisites:

A basic understanding of HTML, CSS, and JavaScript.
Some experience with or knowledge of React.
Node and npm or yarn installed on our machine
Fundamental understanding of how the terminal works

Let’s now proceed to create our React application. We will do this by running the following command in our terminal:

npx create-react-app react-metamask-ethers

Note: We can use any name of our choice when creating our application

Once that is successful, the next step would be to change the directory to the project and then start our server:

cd react-metamask-ethers

npm start

Install Ethers.js

After we've successfully created our React application, we'll install Ethers.js. We can do this in our project's folder using the following command:

npm install --save ethers

When we check our **package.json** file at this point, we will see that the ethers.js dependency have been successfully installed as seen in the object:

"dependencies": {
  "ethers": "^5.6.6",
  "react": "^18.1.0",
  "react-dom": "^18.1.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},

Note: I removed some other dependencies from the Object while pasting it here and our version of ethers might be different from mine, which doesn’t matter.

Connecting React App to MetaMask

Connecting a React Application to MetaMask is simple with ethers.js, and we will use the useEffect() and useState() hooks to make the process easier. The procedure would be divided into three major sections:

How to Check If MetaMask is Installed

The first step is to see if MetaMask already exists in our browser, as this is a requirement for us to continue reading this article. If MetaMask is installed on our browser, we will be able to access the Ethereum object; otherwise, this indicates that MetaMask does not exist:

const { ethereum } = window;

We destructured, so we only have direct access to the Ethereum object. The best thing to do is to create a state and set it to true by default; if we don't have MetaMask installed on our browser, this state will change to false:

const [haveMetamask, sethaveMetamask] = useState(true);

const checkMetamaskAvailability = () => {
  if (!ethereum) {
    sethaveMetamask(false);
  }
  sethaveMetamask(true);
};

In the above function, we simply checked to see if MetaMask was installed, and if it was, we set the state to true; otherwise, we set it to false.

Note: We want this function to be triggered as soon as our app is staged, so we'll use the useEffect() hook:

import { useState, useEffect } from 'react';

function App() {
  const [haveMetamask, sethaveMetamask] = useState(true);

  useEffect(() => {
    const { ethereum } = window;
    const checkMetamaskAvailability = async () => {
      if (!ethereum) {
        sethaveMetamask(false);
      }
      sethaveMetamask(true);
    };
    checkMetamaskAvailability();
  }, []);

  return (
  // ...
  );
}

export default App;

Note: Within our application, we can now use the state to display a message instructing the user to install MetaMask or conditionals to avoid displaying the connect button.

How to Connect to MetaMask and Retrieve Wallet Address

The first step would be to create states that would store the account address and also inform us whether MetaMask has been connected:

const [isConnected, setIsConnected] = useState(false);
const [accountAddress, setAccountAddress] = useState('');

After that, we can write a function to handle this specific logic. The created function can be added to a button in our application and triggered when the button is clicked:

<button className="btn" onClick={connectWallet}>
  Connect
</button>

And then we can now create a function to handle the core logic:

const connectWallet = async () => {
  // ... Handle Logic
};

Within this function, we will first confirm that MetaMask has been installed, then request an available account, and finally connect react to MetaMask using the Ethereum provider API. This will also allow us to save the address of the connected account.

const connectWallet = async () => {
const { ethereum } = window;
  if (!ethereum) {
    sethaveMetamask(false);
  }

  const accounts = await ethereum.request({
    method: 'eth_requestAccounts',
  });
};

We can now refactor the above code to store the account address and handle errors with the try and catch block:

import { useState, useEffect } from 'react';

function App() {
  const [accountAddress, setAccountAddress] = useState('');
  const [isConnected, setIsConnected] = useState(false);

  const { ethereum } = window;

  const connectWallet = async () => {
    try {
      if (!ethereum) {
        sethaveMetamask(false);
      }
      const accounts = await ethereum.request({
        method: 'eth_requestAccounts',
      });
      setAccountAddress(accounts[0]);
      setIsConnected(true);
    } catch (error) {
      setIsConnected(false);
    }
  };
  return (
  // ...
  );
}

export default App;

Within our React application, we can now output the account address and use the isConnected value to display a success message.

How to Retrieve Wallet Balance Using Ethers.js

We will use the Ethers.js dependency for this so that we can use the getBalance() function on the Web3Provider with the wallet address as an argument. The function will return a BigNumber; we will use the utility function formatEther() to display it in ETH units in the user interface.

import { ethers } from 'ethers';
const provider = new ethers.providers.Web3Provider(window.ethereum);

const connectWallet = async () => {
  try {
    //...

    let balance = await provider.getBalance(accounts[0]);
    let bal = ethers.utils.formatEther(balance);

    setAccountBalance(bal);

  } catch (error) {
    setIsConnected(false);
  }
};

So far, we've been able to use ethers.js to check if MetaMask is installed, connect, get the wallet address, and get the wallet balance. We may have difficulty implementing this within our React application. Here is the source code for the demo I created, which properly depicts the entire process, as well as the code demonstrating the full implementation:

import { useState, useEffect } from 'react';
import { ethers } from 'ethers';

function App() {
  const [haveMetamask, sethaveMetamask] = useState(true);
  const [accountAddress, setAccountAddress] = useState('');
  const [accountBalance, setAccountBalance] = useState('');
  const [isConnected, setIsConnected] = useState(false);

  const { ethereum } = window;
  const provider = new ethers.providers.Web3Provider(window.ethereum);

  useEffect(() => {
    const { ethereum } = window;
    const checkMetamaskAvailability = async () => {
      if (!ethereum) {
        sethaveMetamask(false);
      }
      sethaveMetamask(true);
    };
    checkMetamaskAvailability();
  }, []);

  const connectWallet = async () => {
    try {
      if (!ethereum) {
        sethaveMetamask(false);
      }
      const accounts = await ethereum.request({
        method: 'eth_requestAccounts',
      });
      let balance = await provider.getBalance(accounts[0]);
      let bal = ethers.utils.formatEther(balance);
      setAccountAddress(accounts[0]);
      setAccountBalance(bal);
      setIsConnected(true);
    } catch (error) {
      setIsConnected(false);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        {haveMetamask ? (
          <div className="App-header">
            {isConnected ? (
              <div className="card">
                <div className="card-row">
                  <h3>Wallet Address:</h3>
                  <p>
                    {accountAddress.slice(0, 4)}...
                    {accountAddress.slice(38, 42)}
                  </p>
                </div>
                <div className="card-row">
                  <h3>Wallet Balance:</h3>
                  <p>{accountBalance}</p>
                </div>
              </div>
            ) : (
              <img src={logo} className="App-logo" alt="logo" />
            )}
            {isConnected ? (
              <p className="info">🎉 Connected Successfully</p>
            ) : (
              <button className="btn" onClick={connectWallet}>
                Connect
              </button>
            )}
          </div>
        ) : (
          <p>Please Install MataMask</p>
        )}
      </header>
    </div>
  );
}

export default App;

We can get the styles from the index.css file.

Conclusion

We learned how to connect a React application to MetaMask in this article, which is a good first step toward working with decentralized applications. The next step would be to learn how to create smart contracts and consume them within our decentralized applications.

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!

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!

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!

Headless CMS for beginners

Joel Olawanle — Sat, 15 May 2021 14:59:00 +0000

For many, this might be your first time coming across the term “Headless CMS” and you will be forced to ask yourself - what makes a CMS headless? and what is CMS?

I once asked myself these questions, so it’s totally normal to ask but in this article, you will understand

What headless CMS is all about
What it does
What differentiates it from the traditional content management systems
Finally, list some Headless CMSes you can get started with in your next project.

For us to perfectly understand what the term “Headless CMS” means, we have to start by first explaining what CMS or Traditional CMS is all about.

CMS

CMS stands for Content Management System. We can refer to it as “Traditional CMS”. Traditional CMSes have been around since the early days of web development. It is a tool that helps you build a website without needing to write all the code(s) from scratch or even know how to code at all. CMS gives everyone the privilege to build beautiful websites easily as long as you can read and operate a computer.

This has helped many people create awesome websites such as blogs, e-commerce, personal, and even organization websites without struggling to build their own system for creating web pages, storing images, and other functions. In other words, CMS helps you handle both the frontend and backend aspects of your websites.

As a developer, you will sometimes find yourself at the mercy of these platforms in terms of what you can build because with a traditional CMS, your frontend, backend, and database all live together as one tangled-up unit on your server (it puts everything in one big bucket such as your content, images, HTML, CSS). Some popular examples are WordPress, Wix, Drupal, Joomla, and lots more.

Headless CMS

Headless CMS gives you the privilege of taking charge of your website. It handles the backend while you handle the frontend meaning your frontend and your CMS are no longer permanently bound up together and would now make use of an API (Application Programming Interface) to talk to each other.

In simpler terms, a headless CMS is a back-end only content management system (CMS) that gives you as a developer the advantage of building the frontend website using whatever technology you like to customize it to your taste. This simply means you will need to manage both the frontend and the backend.

This gives developers the privilege of making use of their favorite frameworks (vue.js, react, angular) and JamStacks static sites generators (Nuxt.js, gatsby, Next.js, Gridsome) to build and then allows them to deploy such websites/ web apps to platforms like netlify, vercel, and lots more.

Headless CMS also allows developers to build native mobile apps (iOS, Android, Windows Phone) meaning it is not limited to websites alone since headless CMS delivers your content through an API to where you need it. This makes it a powerful option for mobile and web developers.

Understanding the term “headless CMS” alone will give you a proper understanding of what it is all about. According to storyblock, the term “headless” comes from the concept of chopping the “head” (the front end, i.e. the website) off the “body” (the back end, i.e. the content repository).

A headless CMS remains with an interface to add content and a RESTful API (JSON, XML) to deliver content wherever you need it. Due to this approach, a headless CMS does not care about how and where your content gets displayed. A headless CMS has only one focus: storing and delivering structured content.

Headless CMS is something everyone needs to know about now as the world of headless CMS development has gained quite a bit of momentum in the last few years.

At this point, You might start asking yourself - Do I need a headless CMS? The truth is that no one is in the right position to help you answer this question except yourself. The very simple answer is - making use of a headless CMS depends completely on your requirements.

Some Popular Headless CMSes

After going through what Headless CMS is all about, you might want to try it out or even want to know some of these platforms.

And lots more you can find here.

Summary

There are two major benefits of making use of a Headless CMS.

It allows Flexibility by serving content through an API to websites, mobile apps, or even billboards.
It encourages Creativity by Providing frontend developers the creative freedom to decide what frontend web framework to use for displaying content thereby taking out the limitation of dealing with ugly templates or bulky plugins offering limited features.

In my next article, I will do a little comparison on the top 5, explaining their services and also drop links on how to get started with them.

How to make use of Vue.js Plugins in Nuxt - [Vue-awesome-swiper]

Joel Olawanle — Tue, 13 Apr 2021 08:08:49 +0000

Introduction

In computing, a plugin is a software component that makes it easier for users to add a specific feature/functionality to a computer program or website. For example, if you want to sell products, take donations or maybe add carousels to your website/web application, you are going to need a plugin to handle that faster without needing to write lots of complicated codes.

Nuxt.js is a frontend framework built upon Vue.js that offers great development features such as server-side rendering (SSR), automatically generated routes, improved meta tags managing, and SEO improvement.

In this article, I will be showing you how to make use of Vue.js Plugins in Nuxt.js understanding fully well that Nuxt is a frontend framework built upon Vue.js.

Vue Plugins

Vue.js plugins are a powerful but simple way to add global-level functionality to your app. They have a variety of uses, from distributing app-wide components to adding additional capabilities such as routing and immutable data stores to your app.

Making use of Vue Plugins in vue is much easier due to how the documentation properly explains it, but in the case of nuxt, this can be a little bit tricky for beginners but in this article, I will explain the various ways of installing vue plugins in Nuxt by installing the vue-awsome-swiper plugin.

Creating Nuxt App

This first thing would be for us to create our nuxt app, and suppose you have a nuxt app and just want to learn how to install plugins, you can click here.

We can create our Nuxt app by either using the scaffolding tool — create-nuxt-app — or building from scratch.

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>

Be sure to replace <project-name> with the name of your project/app.

Once installation is complete, we will be presented with a series of questions to help configure our application for development, including name, Nuxt options, UI framework, TypeScript, linter, testing framework, and the like.

The answers to these questions are mostly personal preference. Here’s what my configuration looks like for this article:
Once that’s done, we’ll run the following command in our terminal:



    $ cd <project-name>
    $ npm run dev

With the above steps complete, our app should be running on http://localhost:3000.

Installing Vue-awesome-swiper

This plugin can be installed either using yarn or npm in your preferred package manager.



    npm install swiper vue-awesome-swiper --save
    //or
    yarn add swiper vue-awesome-swiper

Once that is done we can now register our plugin. You can either register your plugin globally or locally:

Global Registration

This is done by creating a file in the plugins directory of your Nuxt project then import the vue-awesome-swiper and finally tell Vue to use it.

Don’t get confused, I will explain all these in this article.

For example I created a file called “vue-awesome-swiper.js” in the plugins folder, You can give your file any name but so you don’t get confused in a scenario where you will be making use of so many plugins this convention might be the best. Once you have created the file plugins/vue-awesome-swiper.js, then paste the code below in the file.



    //plugins/vue-awesome-swiper.js

    import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'

    import 'swiper/swiper-bundle.css'

    Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

Note: The first three lines of the code above are simply importing the vue-awesome-swiper and the swiper-bundle CSS file. The last line of code tells Vue to use the plugin we just imported. Without the vue.use() command nothing will work.

Once you have your plugin file set up, the next thing will be to add the file path inside the plugins key of our nuxt.config.js. The plugins property lets you add Vue.js plugins easily to your main application. All the paths defined in the plugins property will be imported before initializing the main application.



    //nuxt.config.js

    export default {
      plugins: ['~/plugins/vue-awesome-swiper.js']
    }

You can now make use of this plugin in your application. To properly explain how this plugin works I will be making use of the vue-awesome-swiper to convert the image below which is cool on the desktop to slide on mobile devices.

Creating a slider
Below is a code to a very simple template you can either use in your components or pages to create a slider.



    <template>
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </template>

    <script>
      export default {
        name: 'carrousel',
        data() {
          return {
            swiperOptions: {
              pagination: {
                el: '.swiper-pagination'
              },
              // Some Swiper option/callback...
            }
          }
        },
        computed: {
          swiper() {
            return this.$refs.mySwiper.$swiper
          }
        },
        mounted() {
          console.log('Current Swiper instance object', this.swiper)
          this.swiper.slideTo(1, 1000, false)
        }
      }
    </script>

Explaining the code above, in the template section we have a swiper tag consisting of 6 swiper-slide tags. The content of your slide will be in the swiper-slide tag. For example, take a look at the code below:



    <swiper-slide>
      <div class="mt-14 mx-10 flex flex-col items-center space-y-6">
        <img
          src="~/assets/images/1.jpg"
          class="rounded-xl h-80 w-80 object-cover object-center"
          alt=""
        />

        <h2 class="font-bold text-4xl">$5</h2>
        <p class="text-center text-gray-300">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          Dolor tempore at labore sed molestias soluta asperiores
          aliquam ipsa consequuntur.
        </p>
        <a
          href=""
          class="bg-gray-900 px-10 py-4 rounded-xl text-xl uppercase"
          >Buy Now</a
        >
      </div>
    </swiper-slide>

In case you want to see how I was able to make use of the Vue-awesome swiper to convert that image to a slider as seen below, you can find my source code here and the live site here.

Local Registration

As I said earlier, you can either register your plugin globally or locally. To install your plugin locally, all you have to do is create a component or page and import the plugin within the script tag just as it’s done when you import components or anything in vue.js.



    <script>
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

    import 'swiper/swiper-bundle.css'

      export default {
        name: 'carrousel',
        data() {
          return {
            swiperOptions: {
              pagination: {
                el: '.swiper-pagination'
              },
              // Some Swiper option/callback...
            }
          }
        },
        components: {
            Swiper,
            SwiperSlide
          },
          directives: {
            swiper: directive
          },
        computed: {
          swiper() {
            return this.$refs.mySwiper.$swiper
          }
        },
        mounted() {
          console.log('Current Swiper instance object', this.swiper)
          this.swiper.slideTo(1, 1000, false)
        }
      }
    </script>

Note: You must make sure you already have your plugin installed either via npm or yarn before this would work.

You might begin to ask yourself of the importance or essence of making use of a local registration when you can easily make use of it globally. The truth is that it’s totally up to you, both ways work fine but suppose you would be making use of the swiper plugin more than once then registering it globally would be better for cleaner codes, and in a situation you are working in a team.

I decided to extract what was added to the script tag for the local registration below, so you would understand perfectly.



    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

    import 'swiper/swiper-bundle.css'

    export default {
      components: {
        Swiper,
        SwiperSlide
      },
      directives: {
        swiper: directive
      }
    }

Explaining the code above, we imported the plugin’s components and directives and then declared them.

Note: The example used for the global registration would also work for the local registration.

Conclusion

We’ve taken a look at the basics of making use of vue-plugins in nuxt.js. Though there are few other things I did not explain, I believe this would help you.🤗

Don't forget to check Nuxt Documentation for more information.

As always, any questions or suggestions, please feel free to leave a response or tweet me 🤭! Be sure to connect with me on socials! 😎

Thanks!

Forem: Joel Olawanle

Building a full stack app with Remix, Prisma, and Neon

Prerequisite

Setting up the environment

Understanding the Remix file structure

Loaders and Actions in Remix

Loaders: Fetching data with useLoaderData

Action: Handling form data submission

Setting up Prisma in Remix

Setting up a Postgres database with Neon

Seeding your Neon database with Prisma

Interacting with Prisma and Neon from Remix

Loading posts with Remix loader

Load a single post from the database

Deleting posts with Remix action

Adding a new post with Remix action

Conclusion

How To Choose the Best Static Site Generator and Deploy it to Kinsta for Free

The Dynamic Web Era and Resurgence of Static Sites

What are Static Site Generators?

Components of an SSG

Types of Static Site Generators

Factors to Consider When Choosing an SSG

1. Project Requirements and Objectives

2. Technical Familiarity, Languages, and Frameworks

3. Community and Ecosystem

4. Distinct Features

5. Content Management Options

Choosing the Right Static Site Generator

Easily Deploy Your Static Site for Free With Kinsta

Summary

Cloud Computing In EdTech: Benefits, Use Cases, & Challenges

What is Cloud Computing?

Benefits of Cloud Computing in EdTech

Real-World Use Cases in the Application of Cloud Computing in EdTech

Challenges of Cloud Computing in EdTech

How Appwrite Solves the Challenges of Cloud Computing in EdTech

Conclusion

How to Plan for Software Scalability and Building for Growth

What is Software Scalability?

How to Scale your Software for Growth

Conclusion

Don't Re-Invent The Wheel, Use Appwrite

What is Appwrite?

Why use Appwrite?

How to get started with Appwrite

Conclusion

Beginners Guide to Consuming REST APIs in React

Introduction

What Is a REST API?

Consuming REST API’s in React

Consuming APIs Using The Fetch API

Performing GET Request in React With Fetch API

Performing POST Request in React With Fetch API

Performing DELETE Request in React With Fetch API

Using Async/Await in Fetch API

Handling Errors

Consuming APIs Using Axios

Installing and Configuring an Axios Instance

Performing GET Request in React With Axios

Performing POST Request in React With Axios

Performing DELETE Request in React With Axios

Using Async/Await in Axios

Handling Errors

Fetch API vs Axios

Conclusion

How to Connect a React DApp to MetaMask

Introduction

Definition of Technologies/Terms

What is Decentralized Application (DApp)?

What is MetaMask?

What is Ethers.JS?

Getting Started

Install Ethers.js

Connecting React App to MetaMask

How to Check If MetaMask is Installed

How to Connect to MetaMask and Retrieve Wallet Address

How to Retrieve Wallet Balance Using Ethers.js

Conclusion

How to Create a Single Page Application with React and Sanity

Loaders: Fetching data with `useLoaderData`