Cosmic Logo

Follow the steps below to get started with Cosmic to power content for your Hono application.

Install a new Hono app

npm create hono@latest

Answer the prompts with the following answers:

  1. Target directory. cosmic-hono
  2. Which template do you want to use? bun
  3. Do you want to install project dependencies? yes
  4. Which package manager do you want to use? npm

Now run:

cd cosmic-hono

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:

  1. Image: Image type with key image
  2. Content: Rich text with key content

Blog model

Add content

Add a few blog posts to get some content ready to be delivered.

Change the default src/index.ts to a JSX file src/index.tsx and add the following code

// src/index.tsx
import { Hono } from 'hono';
import { raw } from 'hono/html';
import { createBucketClient } from '@cosmicjs/sdk';
const cosmic = createBucketClient({
  bucketSlug: process.env.BUCKET_SLUG || '',
  readKey: process.env.BUCKET_READ_KEY || '',
});

const app = new Hono();
type PostType = {
  title: string,
  metadata: { image: { imgix_url: string }, content: string },
};

app.get('/', async (c) => {
  const { objects: posts } = await cosmic.objects
    .find({
      type: 'blog-posts',
    })
    .props('title,metadata.image,metadata.content');
  const html = posts?.map((post: PostType) => {
    return (
      <div>
        <div>{post.title}</div>
        <div>
          <img
            src={`${post.metadata.image.imgix_url}?w=500&auto=format,compression`}
            alt={`${post.title}`}
          />
        </div>
        <div>{raw(post.metadata.content)}</div>
      </div>
    );
  });
  return c.html(html);
});

export default app;

Change the default start script in package.json to accept the new file name

// package.json
"scripts": {
  "dev": "bun run --hot src/index.tsx"
}

Add your Cosmic API keys

In a new file titled .env.local add the following environment variables and make sure to switch out the values with your Cosmic API keys found in Project / API keys.

# .env.local
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:3000, and see your blog posts.

npm run dev