@dropinblog/react-catalyst

Embed your DropInBlog blog in a BigCommerce Catalyst storefront. This adapter builds on @dropinblog/react-nextjs and @dropinblog/react-core to deliver a fully server-rendered blog that lives inside your Catalyst app.

Catalyst is built on Next.js, but its App Router lives at core/app/[locale]/(default)/ and every request is routed through Catalyst's locale-aware routing layer. This package ships templates that are placed in the correct location and work in a Catalyst storefront right after install, with no manual file moving required.

Features

• Full server-side rendering (SSR) support
• Templates installed directly into core/app/[locale]/(default)/blog/, working out of the box with Catalyst's locale routing
• Blog pages render inside your storefront's existing header/footer layout
• SEO-optimized with the Next.js metadata API
• Missing posts render your storefront's 404 page
• Replaces Catalyst's built-in blog if one exists (the original is safely backed up)
• Easy CLI installation with a configurable mount path

Installation

From your Catalyst project's core/ directory:

pnpm add @dropinblog/react-catalyst @dropinblog/react-nextjs @dropinblog/react-core

Quick Start

1. Configure Environment Variables

Add your DropInBlog credentials to core/.env.local:

DROPINBLOG_BLOG_ID=your_dropinblog_blog_id
DROPINBLOG_API_TOKEN=your_dropinblog_api_token

2. Install Templates

Run the CLI from your Catalyst project root (or core/; both work):

npx dropinblog-catalyst install

This installs the blog routes into core/app/[locale]/(default)/blog/:

• /blog - Main blog list
• /blog/page/[page] - Paginated blog list
• /blog/category/[slug] - Category pages
• /blog/category/[slug]/page/[page] - Paginated category pages
• /blog/author/[slug] - Author pages
• /blog/author/[slug]/page/[page] - Paginated author pages
• /blog/[slug] - Single post pages
• /blog/sitemap.xml - Sitemap
• /blog/feed - RSS feed
• /blog/feed/category/[slug] - Category RSS feeds
• /blog/feed/author/[slug] - Author RSS feeds

Note: If a blog/ directory already exists (some Catalyst versions ship a built-in BigCommerce blog), the installer moves it to _blog-backup/ (the underscore prefix makes it a private folder, so it is excluded from routing). Delete it once you're happy with DropInBlog, or move it back to blog/ to restore the original.

Build Hook URL

DropInBlog can notify your site whenever your blog changes. In your DropInBlog dashboard, go to Settings and set the Build Hook URL to any endpoint you choose. DropInBlog sends an HTTP POST request to that URL every time blog content or design changes, including when:

• A post is published, updated, or deleted
• A category or author is added, updated, or deleted
• Layout or design settings are saved

Post events include a JSON body with the postId and slug of the affected post; other events send an empty payload.

This is most useful for statically built sites: paste the deploy hook URL from your hosting provider (Vercel, Netlify, Cloudflare Pages, etc.) and every blog change triggers a fresh build, so your published site is never stale.

With Catalyst you typically don't need it: blog pages are rendered server-side on each request, and this package caches API responses for 5 minutes by default (configurable via cacheTtlMs), so content changes appear on your storefront within a few minutes automatically. Set a Build Hook URL if you deploy your storefront statically, or if you want a webhook for your own automation whenever blog content changes.

License

MIT