> A complete, ready-to-use **Blog Management System** for React and Next.js applications.
npm install react-bmsbash
npm install react-bms
or
yarn add react-bms
or
pnpm add react-bms
`
---
⚙️ Setup for Next.js
> 📦 Published Package Users: If you're using the published react-bms package from npm, make sure to:
> 1. Add transpilePackages: ['react-bms'] to next.config.js (REQUIRED)
> 2. Clear .next cache after installation: rm -rf .next
> 3. Restart dev server after configuration changes
$3
Create or update next.config.js:
`javascript
/* @type {import('next').NextConfig} /
const nextConfig = {
transpilePackages: ['react-bms'],
}
module.exports = nextConfig
`
⚠️ Important: transpilePackages: ['react-bms'] is required for the published package to work correctly in Next.js. Without this, Next.js won't be able to resolve the package modules.
$3
`bash
npx i-bms
`
This will automatically create required files in your project.
$3
The CLI tool detects your project structure automatically:
- If app directory exists → Creates files in app/
- If src/app directory exists → Creates files in src/app/
- If neither exists → Creates app/ directory
If you need to create manually:
#### For app directory structure:
Create app/bms/page.jsx:
`jsx
'use client'
import { BmsAdminPanel } from 'react-bms'
export default function BmsPage() {
return
}
`
Create app/blogs/page.jsx:
`jsx
'use client'
import { BlogList } from 'react-bms'
export default function BlogsPage() {
return
}
`
Create app/blogs/[slug]/page.jsx:
`jsx
'use client'
import { BlogPage } from 'react-bms'
export default function BlogPostPage() {
return
}
`
#### For src/app directory structure:
Create src/app/bms/page.jsx:
`jsx
'use client'
import { BmsAdminPanel } from 'react-bms'
export default function BmsPage() {
return
}
`
Create src/app/blogs/page.jsx:
`jsx
'use client'
import { BlogList } from 'react-bms'
export default function BlogsPage() {
return
}
`
Create src/app/blogs/[slug]/page.jsx:
`jsx
'use client'
import { BlogPage } from 'react-bms'
export default function BlogPostPage() {
return
}
`
$3
`bash
npm install react react-dom next lucide-react quill react-quill-new
`
$3
Create .env.local file in project root:
`env
Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
Cloudinary Configuration (Optional)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
NEXT_PUBLIC_CLOUDINARY_API_KEY=your_api_key
NEXT_PUBLIC_CLOUDINARY_API_SECRET=your_api_secret
`
$3
Important: After installing the package and configuring next.config.js, clear the Next.js cache:
`bash
Clear Next.js cache
rm -rf .next
Or on Windows PowerShell:
Remove-Item -Recurse -Force .next
Start development server
npm run dev
`
Access:
- Admin Panel: http://localhost:3000/bms
- Blog List: http://localhost:3000/blogs
---
⚙️ Setup for React.js (Vite/CRA)
$3
`bash
npx i-bms
`
$3
Wrap your app with BrowserRouter:
`jsx
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
);
}
`
$3
`jsx
import { Routes, Route } from 'react-router-dom';
import { BmsAdminPanel, BlogList, BlogPage } from 'react-bms';
function App() {
return (
);
}
`
$3
`bash
npm install react react-dom react-router-dom lucide-react quill react-quill-new
`
$3
For Vite projects, create .env file:
`env
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name
VITE_CLOUDINARY_API_KEY=your_api_key
VITE_CLOUDINARY_API_SECRET=your_api_secret
`
For CRA projects, create .env file:
`env
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id
REACT_APP_CLOUDINARY_CLOUD_NAME=your_cloud_name
REACT_APP_CLOUDINARY_API_KEY=your_api_key
REACT_APP_CLOUDINARY_API_SECRET=your_api_secret
`
$3
`bash
npm run dev # For Vite
or
npm start # For CRA
`
---
🔥 Firebase Setup & Credentials (Step-by-Step)
$3
1. Open Browser and go to: https://console.firebase.google.com/
2. Click on "Get Started" button (top right corner, if you're new)
- OR
- Click on "Add project" button (if you already have projects)
3. Enter Project Name:
- Type your project name (e.g., "my-blog-cms")
- Click "Continue" button
4. Google Analytics Setup (Optional):
- You'll see "Enable Google Analytics for this project"
- Toggle it OFF (or keep it ON if you want)
- Click "Continue" button
5. Wait for Project Creation:
- Firebase will create your project (takes 10-30 seconds)
- You'll see "Your new project is ready"
- Click "Continue" button
6. You'll be redirected to Firebase Console Dashboard
---
$3
1. In Firebase Console, look at the left sidebar menu
2. Click on "Authentication" (it has a key icon 🔑)
3. Click on "Get started" button (if you see it)
4. Click on "Sign-in method" tab (top of the page)
5. Find "Email/Password" in the list
6. Click on "Email/Password" row
7. Toggle the "Enable" switch to ON (top of the popup)
8. Click "Save" button (bottom right of popup)
9. You'll see a green checkmark ✅ - Authentication is now enabled
---
$3
1. In Firebase Console, look at the left sidebar menu
2. Click on "Firestore Database" (it has a database icon 🗄️)
3. Click on "Create database" button (center of the page)
4. Select Mode:
- You'll see two options: "Production mode" and "Test mode"
- Click on "Production mode" radio button
- Click "Next" button
5. Select Location:
- Choose a location closest to you (e.g., "us-central", "asia-south1")
- Click on your preferred location
- Click "Enable" button
6. Wait for Database Creation (takes 30-60 seconds)
7. You'll see "Cloud Firestore is setting up" message
8. Once ready, you'll see the Firestore Database interface
---
$3
1. In Firebase Console, look at the left sidebar menu
2. Click on "Storage" (it has a storage icon 📦)
3. Click on "Get started" button (center of the page)
4. Security Rules Setup:
- You'll see "Cloud Storage for Firebase will use security rules"
- Click "Next" button
5. Select Location:
- Choose the same location as Firestore (or closest to you)
- Click on your preferred location
- Click "Done" button
6. Wait for Storage Setup (takes 10-20 seconds)
7. Storage is now enabled ✅
---
$3
1. In Firebase Console, look at the top left corner
2. Click on the Gear icon ⚙️ (next to "Project Overview")
3. Click on "Project settings" from the dropdown menu
4. Scroll down to find "Your apps" section
5. If you don't have a web app yet:
- Click on the Web icon () under "Your apps"
- Enter App nickname (e.g., "My Blog App")
- Click "Register app" button
6. Copy Firebase Configuration:
- You'll see a code block with firebaseConfig
- Find these values and copy them one by one:
`
apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
authDomain: "your-project.firebaseapp.com"
projectId: "your-project-id"
storageBucket: "your-project.appspot.com"
messagingSenderId: "123456789012"
appId: "1:123456789012:web:abcdefghijklmnop"
measurementId: "G-XXXXXXXXXX"
`
7. Add to Environment File:
- Open your project's .env.local (Next.js) or .env (React) file
- Add these values with proper prefix:
For Next.js (.env.local):
`env
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789012
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789012:web:abcdefghijklmnop
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
`
For Vite (.env):
`env
VITE_FIREBASE_API_KEY=AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789012
VITE_FIREBASE_APP_ID=1:123456789012:web:abcdefghijklmnop
VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
`
For CRA (.env):
`env
REACT_APP_FIREBASE_API_KEY=AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
REACT_APP_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your-project-id
REACT_APP_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=123456789012
REACT_APP_FIREBASE_APP_ID=1:123456789012:web:abcdefghijklmnop
REACT_APP_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
`
---
$3
1. In Firebase Console, look at the left sidebar menu
2. Click on "Firestore Database"
3. Click on "Rules" tab (top of the page, next to "Data" tab)
4. You'll see the rules editor with default rules
5. Delete all existing code in the editor
6. Copy and paste this code:
`javascript
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
`
7. Click on "Publish" button (top right corner of the rules editor)
8. Wait for confirmation - You'll see "Rules published successfully" message ✅
9. Rules are now active
---
$3
1. In Firebase Console, look at the left sidebar menu
2. Click on "Storage"
3. Click on "Rules" tab (top of the page, next to "Files" tab)
4. You'll see the rules editor with default rules
5. Delete all existing code in the editor
6. Copy and paste this code:
`javascript
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
`
7. Click on "Publish" button (top right corner of the rules editor)
8. Wait for confirmation - You'll see "Rules published successfully" message ✅
9. Rules are now active
---
$3
1. In Firebase Console, look at the left sidebar menu
2. Click on "Authentication"
3. Click on "Users" tab (top of the page, it's selected by default)
4. Click on "Add user" button (top of the page, blue button)
5. Enter Email:
- Type your email address (e.g., "admin@example.com")
6. Enter Password:
- Type a strong password (at least 6 characters)
- Click on "Show password" eye icon 👁️ to verify
7. Click "Add user" button (bottom right of popup)
8. User Created Successfully ✅
- You'll see the user in the users list
- Save these credentials - you'll use them to login at /bms route
Important:
- Email: admin@example.com (use the email you entered)
- Password: your-password (use the password you entered)
- These are your admin credentials for the blog management system
---
✅ Firebase Setup Complete Checklist
After completing all steps, verify:
- [ ] Firebase project created
- [ ] Authentication enabled (Email/Password)
- [ ] Firestore Database created (Production mode)
- [ ] Storage enabled
- [ ] Firebase credentials copied to .env file
- [ ] Firestore security rules published
- [ ] Storage security rules published
- [ ] Admin user created
- [ ] Admin credentials saved
---
🎯 Next Steps After Firebase Setup
1. Restart your development server (if it's running):
`bash
# Stop the server (Ctrl + C)
# Then start again
npm run dev
`
2. Test the setup:
- Go to http://localhost:3000/bms
- Login with the admin credentials you created
- You should see the admin dashboard
3. If login fails:
- Check .env file has all Firebase variables
- Verify all variables start with correct prefix (NEXT_PUBLIC_, VITE_, or REACT_APP_)
- Restart dev server after adding env variables
---
☁️ Cloudinary Setup & Credentials (Step-by-Step)
$3
1. Open Browser and go to: https://cloudinary.com/
2. Click on "Sign Up for Free" button (top right corner)
3. Fill Registration Form:
- Enter your Email address
- Enter your Full Name
- Enter a Password (at least 8 characters)
- Check the "I agree to the Terms of Service" checkbox
- Click "Create Account" button
4. Verify Email:
- Check your email inbox
- Click on the verification link from Cloudinary
- You'll be redirected to Cloudinary Dashboard
---
$3
1. After Login, you'll see the Dashboard page
2. Find "Account Details" section (usually on the right side or center)
3. Copy Cloud Name:
- Look for "Cloud name" field
- You'll see something like: dxxxxxxxxx
- Click on the copy icon 📋 next to it (or manually copy)
- Save this value - you'll need it
4. Get API Key and Secret:
- Click on "Settings" in the top menu bar
- Click on "Security" tab (left sidebar)
- Scroll down to "API Keys" section
- You'll see:
- API Key: A long string (e.g., 123456789012345)
- API Secret: A long string (hidden by default)
- Click on "Reveal" button next to API Secret
- Copy API Key: Click the copy icon 📋 next to API Key
- Copy API Secret: Click the copy icon 📋 next to API Secret
- Save both values - you'll need them
---
$3
1. Open your project in code editor
2. Open .env.local file (Next.js) or .env file (React)
3. Add these lines at the bottom of the file:
For Next.js (.env.local):
`env
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=dxxxxxxxxx
NEXT_PUBLIC_CLOUDINARY_API_KEY=123456789012345
NEXT_PUBLIC_CLOUDINARY_API_SECRET=your_api_secret_here
`
For Vite (.env):
`env
VITE_CLOUDINARY_CLOUD_NAME=dxxxxxxxxx
VITE_CLOUDINARY_API_KEY=123456789012345
VITE_CLOUDINARY_API_SECRET=your_api_secret_here
`
For CRA (.env):
`env
REACT_APP_CLOUDINARY_CLOUD_NAME=dxxxxxxxxx
REACT_APP_CLOUDINARY_API_KEY=123456789012345
REACT_APP_CLOUDINARY_API_SECRET=your_api_secret_here
`
4. Replace the values:
- Replace dxxxxxxxxx with your actual Cloud Name
- Replace 123456789012345 with your actual API Key
- Replace your_api_secret_here with your actual API Secret
5. Save the file (Ctrl+S or Cmd+S)
---
✅ Cloudinary Setup Complete
- [ ] Cloudinary account created
- [ ] Email verified
- [ ] Cloud Name copied
- [ ] API Key copied
- [ ] API Secret copied
- [ ] Credentials added to .env file
- [ ] File saved
---
> Note: Cloudinary is optional but highly recommended for image uploads. If you don't set it up, image uploads may not work properly.
---
📝 Complete Command Guide (Start to End)
$3
Open Terminal in your Next.js project directory and run these commands in order:
`bash
Step 1: Install the package
npm install react-bms
Step 2: Install all required peer dependencies
npm install react react-dom next lucide-react quill react-quill-new
Step 3: Create or update next.config.js with transpilePackages
See "Step 1: Configure Next.js" section above
Step 4: Run the setup tool (this will create files automatically)
npx i-bms
Step 5: Clear Next.js cache (IMPORTANT!)
rm -rf .next
Step 6: Create .env.local file and add Firebase & Cloudinary credentials
Follow the "Firebase Setup" and "Cloudinary Setup" sections above
Step 7: Start the development server
npm run dev
Step 7: Open browser and go to:
http://localhost:3000/bms (Admin Panel)
http://localhost:3000/blogs (Blog List)
`
$3
Open Terminal in your Vite project directory and run these commands in order:
`bash
Step 1: Install the package
npm install react-bms
Step 2: Install all required peer dependencies
npm install react react-dom react-router-dom lucide-react quill react-quill-new
Step 3: Run the setup tool (this will create files automatically)
npx i-bms
Step 4: Set up Router in your main App.jsx or main.jsx
Follow the "Setup for React.js" section above
Step 5: Create .env file and add Firebase & Cloudinary credentials
Follow the "Firebase Setup" and "Cloudinary Setup" sections above
Step 6: Start the development server
npm run dev
Step 7: Open browser and go to:
http://localhost:5173/bms (Admin Panel)
http://localhost:5173/blogs (Blog List)
`
$3
Open Terminal in your CRA project directory and run these commands in order:
`bash
Step 1: Install the package
npm install react-bms
Step 2: Install all required peer dependencies
npm install react react-dom react-router-dom lucide-react quill react-quill-new
Step 3: Run the setup tool (this will create files automatically)
npx i-bms
Step 4: Set up Router in your main App.js
Follow the "Setup for React.js" section above
Step 5: Create .env file and add Firebase & Cloudinary credentials
Follow the "Firebase Setup" and "Cloudinary Setup" sections above
Step 6: Start the development server
npm start
Step 7: Open browser and go to:
http://localhost:3000/bms (Admin Panel)
http://localhost:3000/blogs (Blog List)
`
---
✅ Setup Checklist
- [ ] Package installed
- [ ] Peer dependencies installed
- [ ] next.config.js configured (Next.js only)
- [ ] Routes/pages created
- [ ] Firebase project created
- [ ] Firebase services enabled (Auth, Firestore, Storage)
- [ ] Firebase credentials added to .env
- [ ] Firebase security rules configured
- [ ] Cloudinary account created
- [ ] Cloudinary credentials added to .env
- [ ] Admin user created in Firebase
- [ ] Dev server running
- [ ] Can access /bms route
---
🎯 Quick Reference
$3
You can import these from react-bms:
`jsx
import {
BmsAdminPanel, // Admin panel component
BlogList, // Blog listing page component
BlogPage, // Individual blog post page component
getBlogs, // Function to fetch all blogs
addBlog, // Function to add a new blog
updateBlog, // Function to update a blog
deleteBlog // Function to delete a blog
} from 'react-bms';
`
$3
- Admin Panel: /bms
- Blog List: /blogs
- Single Blog: /blogs/[slug]
$3
Firebase (Required):
- API Key
- Auth Domain
- Project ID
- Storage Bucket
- Messaging Sender ID
- App ID
- Measurement ID
Cloudinary (Optional but Recommended):
- Cloud Name
- API Key
- API Secret
---
🆘 Troubleshooting
$3
This error occurs when Next.js can't find the published package. Follow these steps:
Step 1: Verify package is installed
`bash
npm list react-bms
`
Step 2: Ensure next.config.js has transpilePackages
`javascript
const nextConfig = {
transpilePackages: ['react-bms'], // This is REQUIRED
}
`
Step 3: Clear cache and reinstall
`bash
Clear Next.js cache
rm -rf .next
Optional: Clear node_modules and reinstall
rm -rf node_modules
npm install
Restart dev server
npm run dev
`
Step 4: If still not working, check package version
`bash
npm install react-bms@latest
`
$3
This error occurs in copied page files. The components now automatically handle this, but if you see this error:
Solution: Update your page files to import directly from react-bms:
`jsx
// Instead of using copied files, import directly:
'use client'
import { BlogList } from 'react-bms'
export default function BlogsPage() {
return
}
`
Or re-run the CLI tool to get updated files:
`bash
npx i-bms
`
$3
- Check .env file exists
- Verify all variables have correct prefix (NEXT_PUBLIC_, VITE_, or REACT_APP_)
- Restart dev server after adding env variables
$3
- Check Firebase security rules are published
- Verify rules allow read/write operations
$3
If you encounter build errors after installing the package:
1. Clear all caches:
`bash
rm -rf .next node_modules package-lock.json
npm install
`
2. Verify next.config.js:
- Make sure transpilePackages: ['react-bms']` is present