npx create-remix@latest cosmic-remix

npm i @cosmicjs/sdk

// app/routes/_index.tsx
import type { MetaFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

import { createBucketClient } from "@cosmicjs/sdk";
const cosmic = createBucketClient({
  bucketSlug: process.env.BUCKET_SLUG || "",
  readKey: process.env.BUCKET_READ_KEY || "",
});

export const meta: MetaFunction = () => {
  return [
    { title: "Cosmic Remix Blog" },
    { name: "description", content: "Welcome to Cosmic Remix!" },
  ];
};

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

export default function Index() {
  const posts = useLoaderData<typeof loader>();
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      {posts?.map(
        (post: {
          title: string;
          metadata: { image: { imgix_url: string }; content: string };
        }) => {
          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>
          );
        }
      )}
    </div>
  );
}

npx remix vite:build

# .env
BUCKET_SLUG=add_your_bucket_slug_here
BUCKET_READ_KEY=add_your_bucket_read_key_here

npm run dev