npm create vite@latest

cd vite-project
npm install

npm i @cosmicjs/sdk

// src/App.tsx
import { useState, useEffect } from "react";
import { createBucketClient } from "@cosmicjs/sdk";
const cosmic = createBucketClient({
  bucketSlug: import.meta.env.VITE_BUCKET_SLUG || "",
  readKey: import.meta.env.VITE_BUCKET_READ_KEY || "",
});

async function getPosts() {
  const { objects: posts } = await cosmic.objects
    .find({
      type: "blog-posts",
    })
    .props("title,metadata.image,metadata.content");
  return posts;
}

type PostType = {
  title: string;
  metadata: { image: { imgix_url: string }; content: string };
};

function App() {
  const [posts, setPosts] = useState<PostType[]>([]);
  useEffect(() => {
    getPosts().then((data) => setPosts(data));
  }, []);
  return (
    <>
      {posts.length &&
        posts?.map((post: PostType) => {
          return (
            <div key={post.title}>
              <div>{post.title}</div>
              <div>
                <img
                  src={`${post.metadata.image.imgix_url}?w=500&auto=format,compression`}
                  alt={post.title}
                />
              </div>
              <div
                dangerouslySetInnerHTML={{ __html: post.metadata.content }}
              />
            </div>
          );
        })}
    </>
  );
}

export default App;

# .env.local
VITE_BUCKET_SLUG=add_your_bucket_slug_here
VITE_BUCKET_READ_KEY=add_your_bucket_read_key_here

npm run dev