@dropinblog/react-express
v1.0.2
Published
Express SSR middleware for @dropinblog/react-core
Readme
@dropinblog/react-express
Express SSR middleware for integrating DropInBlog with your Express application.
Features
- Server-side rendering – Render DropInBlog content on the server for SEO and performance
- Express middleware – Easy integration with Express apps
- Customizable HTML – Full control over rendered HTML templates
- Automatic routing – Handles blog routes automatically
- Built on react-core – Uses
@dropinblog/react-coreunder the hood
Installation
npm install @dropinblog/react-express
# or
yarn add @dropinblog/react-expressConfiguration
Set your credentials in the environment (recommended):
DROPINBLOG_BLOG_ID=your_dropinblog_blog_id
DROPINBLOG_API_TOKEN=your_dropinblog_api_tokenBasic Usage
import express from 'express';
import { createDropInBlogExpressMiddleware } from '@dropinblog/react-express';
const app = express();
// Add DropInBlog middleware for all /blog routes
app.use('/blog', createDropInBlogExpressMiddleware({
basePath: '/blog',
}));Advanced Usage
Custom HTML Template
Provide your own HTML rendering function:
import { createDropInBlogExpressMiddleware, renderHeadTags } from '@dropinblog/react-express';
app.use('/blog', createDropInBlogExpressMiddleware({
basePath: '/blog',
renderHtml: ({ content, headDescriptors, pathname }) => {
const headTags = renderHeadTags(headDescriptors);
return `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
${headTags}
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
</nav>
</header>
<main>
<div id="dropinblog-content">${content}</div>
</main>
<footer>
<p>© 2024 My Company</p>
</footer>
<script src="/app.js"></script>
</body>
</html>`;
}
}));Error Handling
Handle errors with a custom error handler:
app.use('/blog', createDropInBlogExpressMiddleware({
basePath: '/blog',
onError: (error, req, res) => {
console.error('DropInBlog error:', error);
res.status(500).render('error', {
message: 'Failed to load blog content',
error
});
}
}));Custom 404 Handler
Provide a custom handler for non-matching routes:
app.use('/blog', createDropInBlogExpressMiddleware({
basePath: '/blog',
notFoundHandler: (req, res, next) => {
res.status(404).render('404', {
path: req.path
});
}
}));API Reference
createDropInBlogExpressMiddleware(options)
Creates an Express middleware function for rendering DropInBlog content.
Options
basePath(string, optional): Base path for blog routes. Default:/blogblogId(string, optional): Your DropInBlog blog ID. Defaults toDROPINBLOG_BLOG_IDenv varapiToken(string, optional): Your DropInBlog API token. Defaults toDROPINBLOG_API_TOKENenv varcacheTtlMs(number, optional): Cache TTL in milliseconds. Default:300000(5 minutes)renderHtml(function, optional): Custom HTML rendering functiononError(function, optional): Custom error handlernotFoundHandler(RequestHandler, optional): Custom 404 handler
Utility Functions
renderHeadTags(descriptors: HeadDescriptor[]): string
Converts head descriptors to HTML string.
renderHtmlTemplate(options: HtmlTemplateOptions): string
Renders a complete HTML document with the provided options.
escapeHtml(str: string): string
Escapes HTML special characters.
Supported Routes
The middleware automatically handles these route patterns (with /blog as the base path):
/blog- Main blog listing/blog/page/{page}- Paginated blog listing/blog/category/{slug}- Category listing/blog/category/{slug}/page/{page}- Paginated category listing/blog/author/{slug}- Author listing/blog/author/{slug}/page/{page}- Paginated author listing/blog/{post-slug}- Individual blog post/blog/sitemap.xml- XML sitemap generated by DropInBlog/blog/feed- Main RSS feed/blog/feed/category/{slug}- Category RSS feed/blog/feed/author/{slug}Author RSS feed
Requirements
- Node.js >= 18
- React >= 18.2
- Express >= 4.18
License
MIT © DropInBlog