Follow the steps below to get started with Cosmic to power content for your Express application.
Create folder and install Express
mkdir cosmic-express
cd cosmic-express
npm init
npm i express
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.
Create a new file app.js and add the following:
// app.js
const express = require('express');
const app = express();
const port = 3000;
import { createBucketClient } from '@cosmicjs/sdk';
const cosmic = createBucketClient({
bucketSlug: process.env.BUCKET_SLUG || '',
readKey: process.env.BUCKET_READ_KEY || '',
});
app.get('/', async (req, res) => {
const { objects: posts } = await cosmic.objects
.find({
type: 'blog-posts',
})
.props('title,metadata.image,metadata.content');
let html = '';
posts?.map((post) => {
html += `<div>
<div>${post.title}</div>
<div>
<img
src="${post.metadata.image.imgix_url}?w=500&auto=format,compression"
alt="${post.title}"
/>
</div>
<div>${post.metadata.content}</div>
</div>`;
});
res.set('Content-Type', 'text/html');
res.send(html);
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
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. Note: we are using bun which enables environment variable reading without a separate package and the ability to use ES6 imports.
bun app.js