Cosmic Logo

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

Install RedwoodJS

yarn create redwood-app

Answer the prompts with the following answers:

  1. Where would you like to create your Redwood app? cosmic-redwood
  2. Select your preferred language. TypeScript
cd cosmic-redwood

yarn install

Start the app.

yarn rw dev

Create the Blog home page.

yarn redwood generate page home /

Go into the web/src folder.

cd web/src

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.

In the file web/src/pages/HomePage/HomePage.tsx add the following:

// web/src/pages/HomePage/HomePage.tsx
import { createBucketClient } from '@cosmicjs/sdk';

import { Metadata } from '@redwoodjs/web';

// app/page.tsx
const cosmic = createBucketClient({
  bucketSlug: process.env.REDWOOD_ENV_BUCKET_SLUG || '',
  readKey: process.env.REDWOOD_ENV_BUCKET_READ_KEY || '',
});

const { objects: posts } = await cosmic.objects
  .find({
    type: 'blog-posts',
  })
  .props('title,metadata.image,metadata.content');

const HomePage = () => {
  return (
    <>
      <Metadata title="Blog" description="Blog home page" />
      <h1>Blog</h1>
      {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>
          );
        }
      )}
    </>
  );
};

export default HomePage;

Add your Cosmic API keys

In the existing 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
REDWOOD_ENV_BUCKET_SLUG=add_your_bucket_slug_here
REDWOOD_ENV_BUCKET_READ_KEY=add_your_bucket_read_key_here

Restart the app

Restart your app with the following command:

yarn rw dev