Displaying content in an Astro front end
You’ve configured your Studio with a post document type and learned how to query from your hosted dataset. Before deploying the Studio, let’s query and display this content on the front-end framework of your choice.
1Install a new Astro application
If you have an existing application, skip this first step and adapt the rest of the lesson to install Sanity dependencies to fetch and render content.
Run the following in a new tab or window in your Terminal (keep the Studio running) to create a new Astro application with Tailwind CSS and TypeScript.
You should now have your Studio and Astro application in two separate, adjacent folders:
# outside your studio directory
npm create astro@latest astro-hello-world -- --template with-tailwindcss --typescript strict --skip-houston --install --git
cd astro-hello-world├─ /astro-hello-world
└─ /studio-hello-world2Install Sanity dependencies
Run the following inside the astro-hello-world directory to:
- Install and configure the official Sanity integration @sanity/astro
- Install astro-portabletext to render Portable Text
# your-project-folder/astro-hello-world
npx astro add @sanity/astro -y
npm install astro-portabletext3Add Types for Sanity Client
Update src/env.d.ts with the following additional code for TypeScript support of Sanity Client.
/// <reference types="astro/client" />
/// <reference types="@sanity/astro/module" />4Configure the Sanity client
Update the integration configuration to configure a Sanity Client to fetch content.
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import sanity from "@sanity/astro";
export default defineConfig({
integrations: [
tailwind(),
// 👇 Update these lines
sanity({
projectId: "your-project-id",
dataset: "production",
useCdn: false, // for static builds
}),
],
});5Start the development server
Run the following command and open http://localhost:4321 in your browser.
npm run dev6Display content on a posts index page
Astro performs data fetching inside front-matter blocks (---) at the top of .astro files
Create a route for a page with a list of posts fetched from your Sanity dataset, and visit http://localhost:4321/posts
---
import type { SanityDocument } from "@sanity/client";
import { sanityClient } from "sanity:client";
const POSTS_QUERY = `*[
_type == "post"
&& defined(slug.current)
]|order(publishedAt desc)[0...12]{_id, title, slug, publishedAt}`;
const posts = await sanityClient.fetch<SanityDocument[]>(POSTS_QUERY);
---
<main class="container mx-auto min-h-screen max-w-3xl p-8">
<h1 class="text-4xl font-bold mb-8">Posts</h1>
<ul class="flex flex-col gap-y-4">
{posts.map((post) => (
<li class="hover:underline">
<a href={`/posts/${post.slug.current}`}>
<h2 class="text-xl font-semibold">{post.title}</h2>
<p>{new Date(post.publishedAt).toLocaleDateString()}</p>
</a>
</li>
))}
</ul>
</main>7Display individual posts
Create a new route for individual post pages.
The dynamic value of a slug when visiting /posts/[slug] in the URL is used as a parameter in the GROQ query used by Sanity Client.
Notice that we’re using Tailwind CSS Typography’s prose class name to style the post’s body block content. Install it in your project following their documentation.
---
import type { SanityDocument } from "@sanity/client";
import { sanityClient } from "sanity:client";
import imageUrlBuilder from "@sanity/image-url";
import type { SanityImageSource } from "@sanity/image-url/lib/types/types";
import { PortableText } from "astro-portabletext";
const POST_QUERY = `*[_type == "post" && slug.current == $slug][0]`;
const post = await sanityClient.fetch<SanityDocument>(POST_QUERY, Astro.params);
export async function getStaticPaths(): Promise<{ params: { slug: string } }> {
const SLUGS_QUERY = `*[_type == "post" && defined(slug.current)]{
"params": {"slug": slug.current}
}`;
return await sanityClient.fetch(SLUGS_QUERY, Astro.params);
}
const { projectId, dataset } = sanityClient.config();
const urlFor = (source: SanityImageSource) =>
projectId && dataset
? imageUrlBuilder({ projectId, dataset }).image(source)
: null;
const postImageUrl = post.image
? urlFor(post.image)?.width(550).height(310).url()
: null;
---
<main class="container mx-auto min-h-screen max-w-3xl p-8 flex flex-col gap-4">
<a href="/posts" class="hover:underline">← Back to posts</a>
{
postImageUrl && (
<img
src={postImageUrl}
alt={post.title}
class="aspect-video rounded-xl"
width="550"
height="310"
/>
)
}
<h1 class="text-4xl font-bold mb-8">{post.title}</h1>
<div class="prose">
<p>Published: {new Date(post.publishedAt).toLocaleDateString()}</p>
{Array.isArray(post.body) && <PortableText value={post.body} />}
</div>
</main>Was this page helpful?