Follow the steps below to get started with Cosmic to power content for your Astro application.
Install a new Astro app
npm create astro@latest
Answer the prompts
Answer the question: "How would you like to start your new project?" with Include sample files..
Install the Cosmic JavaScript SDK
Install the Cosmic JavaScript SDK in the location of the codebase.
npm i @cosmicjs/sdk
Add an Object type in the Cosmic dashboard
Log in to the Cosmic dashboard and create a new Blog Posts Object type in a new or existing Project with the following metafields:
- Image: Image type with key
image - Content: Rich text with key
content
Add content
Add a few blog posts to get some content ready to be delivered.
Add the following code to your src/pages/index.astro file
---
// src/pages/index.astro
import Layout from "../layouts/Layout.astro";
import { createBucketClient } from "@cosmicjs/sdk";
const cosmic = createBucketClient({
bucketSlug: import.meta.env.BUCKET_SLUG || "",
readKey: import.meta.env.BUCKET_READ_KEY || "",
});
const { objects: posts } = await cosmic.objects
.find({
type: "blog-posts",
})
.props("title,metadata.image,metadata.content");
---
<Layout title="Welcome to Astro.">
<main>
{
posts?.map(
(post: {
title: string;
metadata: { image: { imgix_url: string }; content: string };
}) => {
return (
<>
<div>{post.title}</div>
<div>
<img
src={`${post.metadata.image.imgix_url}?w=500&auto=format,compression`}
alt={post.title}
/>
</div>
<div set:html={post.metadata.content} />
</>
);
}
)
}
</main>
<style>
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
</style>
</Layout>
Add your Cosmic API keys
In a new file titled .env add the following environment variables and make sure to switch out the values with your Cosmic API keys found in Project / API keys.
# .env
BUCKET_SLUG=add_your_bucket_slug_here
BUCKET_READ_KEY=add_your_bucket_read_key_here
Start the app
Start your app with the following command, go to http://localhost:4321, and see your blog posts.
npm run dev