Package Exports

bms-package
bms-package/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bms-package) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

bms-package

A complete Blog Management System (BMS) package to manage blogs in your React or Next.js project using a single JSON file as a database and a ready-made admin UI.

Features

Supports Next.js, React.js, and Vite
Easily integrate blog management using <CompleteBlogManager /> component
Admin interface to add, update, and delete blogs
Auto-generates blog slugs for public view
All data managed through db.json using json-server
Auto-generates:
- Admin UI
- Blog route files (BlogList.jsx, BlogPage.jsx)
- CSS for styling
Adds a dev script to auto-run both app and blog API

Installation & Setup

Step 1: Scaffold your project with required files

npx i-bms

Prompts : Choose between React.js or Next.js

This command will : Install required dependencies

Auto-generate:
BlogList.jsx
BlogPage.jsx
Blog.css for UI styling

db.json for blog storage

npm install bms-package

-----------------------------------------------------------
In Next.js
Routing is auto-managed. Just create a page that returns the blog manager:

import { CompleteBlogManager } from 'bms-package';

export default function AdminPage() {
  return <CompleteBlogManager />;
}

------------------------------------------------------------
In React.js (Vite or CRA)
1. Wrap your app with BrowserRouter (usually in main.jsx):

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
  <App />
</BrowserRouter>

import { Routes, Route } from 'react-router-dom';
import { CompleteBlogManager } from 'bms-package';
import BlogList from './pages/BlogList';
import BlogPage from './pages/BlogPage';

function App() {
  return (
    <Routes>
      <Route path="/bms" element={<CompleteBlogManager />} />
      <Route path="/blog" element={<BlogList />} />
      <Route path="/blog/:slug" element={<BlogPage />} />
    </Routes>
  );
}

After this, you're done! The blog system is fully functional.

BlogList.jsx, BlogPage.jsx, and Blog.css are auto-generated via npx i-bms.

Use Case: How It Works
/bms: Admin panel using <CompleteBlogManager />

Add, update, and delete blogs

Auto-generates unique slugs on creation

/blog: Public blog list page (BlogList.jsx)

/blog/:slug: Public single blog page (BlogPage.jsx)


Summary
Admin-only access:
Route: /bms

Component: <CompleteBlogManager />

Public routes:
All blogs: /blog → <BlogList />

Single blog by slug: /blog/:slug → <BlogPage />

Slugs are auto-generated when the admin adds a blog.

Author
Gunjan Kumbhani

🪪 License
MIT License

Pro Tips
The CSS file (Blog.css) is customizable for branding.

/bms should be protected (e.g., admin-auth only).

All blog logic (create, update, delete) is handled internally.

🛠 Built With
React.js / Next.js
Vite
JSON Server
Concurrently