Hello, world

This quick example shows how to create content in BCMS and display it on your website using API directly. You’ll create a blog post and fetch it in your frontend.

Step 1: Create a template

In the dashboard, go to Templates
Click Create new template
Name it Blog
You'll, by default, get two mandatory fields: Title and Slug.
Add these fields too:
- Description → Rich Text (required)
- Cpver image → Media (required)

Step 2: Add content

Go to Entries → Blog
Click Create new entry
Fill in:
- Title: Hello, world
- Slug: hello-world
- Pick an image
- Content: This is my first post using BCMS.
Click Create

Step 3: Create an API key

To access content from your frontend, you need an API key.

Go to Settings → API Keys
Click Add new key
Name it Public Website
Set permissions:
- Read access to the Blog template
Click Save

Copy the API key ID, Token, your orgId, instanceId, and the templateId of your Blog template. Blog's template ID is accessible from the URL on the Administration → Templates → Blog.

Step 4: Fetch the entry with curl

Once your entry is created, you can fetch it using curl.

curl -X GET \
  "https://app.thebcms.com/api/v3/org/<ORG_ID>/instance/<INSTANCE_ID>/template/<TEMPLATE_ID>/entry/<ENTRY_ID>/parse?apiKey=<KEY_ID>.<KEY_SECRET>"

Example in JavaScript:

const orgId = "<ORG_ID>";
const instanceId = "<INSTANCE_ID>";
const templateId = "<TEMPLATE_ID>";
const entryId = "<ENTRY_ID>";
const keyId = "<KEY_ID>";
const keySecret = "<KEY_SECRET>";

const url = `https://app.thebcms.com/api/v3/org/${orgId}/instance/${instanceId}/template/${templateId}/entry/${entryId}/parse?apiKey=${keyId}.${keySecret}`;

fetch(url)
  .then((res) => {
    if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
    return res.json();
  })
  .then((data) => {
    console.log("Response data:", data);
  })
  .catch((err) => {
    console.error("Request failed:", err);
  });

Replace:

<ORG_ID> with your organization ID
<INSTANCE_ID> with your project instance ID
<TEMPLATE_ID> with your template ID
<ENTRY_ID> with your entry ID or slug
<KEY_ID> and <KEY_SECRET> with your API key values

Step 5: Fetch and render in Next.js

Example using getStaticProps:

export async function getStaticProps() {
  const res = await fetch(
    'https://app.thebcms.com/api/v3/org/<ORG_ID>/instance/<INSTANCE_ID>/template/<TEMPLATE_ID>/entry/<ENTRY_ID>/parse?apiKey=<KEY_ID>.<KEY_SECRET>'
  );
  const post = await res.json();
  return { props: { post } };
}
export default function Blog({ post }) {
  return (
    <main>
      <h1>{post.meta.en.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.en }} />
    </main>
  );
}

Next steps

PreviousDashboard overview

NextWhat to explore next