nsbp-cli 0.2.2 → 0.2.4

package/README.md

@@ -4,149 +4,156 @@ Command-line interface for creating NSBP (Node React SSR by Webpack) projects.
 
 📦 **Published on npm**: [https://www.npmjs.com/package/nsbp-cli](https://www.npmjs.com/package/nsbp-cli)
 
-## Installation from npm
+## Installation
 
-Install globally from npm registry:
-
-\`\`\`bash
-# Install globally
+### Global Installation (npm)
+```bash
 npm install -g nsbp-cli
+```
 
-# Or use npx (no installation required)
+### Using npx (No Installation)
+```bash
 npx nsbp-cli create my-app
+```
 
-# Verify installation
-nsbp-cli --version
-\`\`\`
-
-## Local Usage
-
-The CLI is also located in \`cli/\` directory of the NSBP project. Run it locally for development:
-
-\`\`\`bash
-# Navigate to CLI directory
-cd cli
-
-# Show help
-node ./bin/nsbp-cli.js --help
+### Verify Installation
+```bash
+nsbp --version
+```
 
-# Show NSBP information
-node ./bin/nsbp-cli.js info
+## Quick Start
 
-# Create a new project
-node ./bin/nsbp-cli.js create my-app
+Create a new NSBP project with a single command:
 
-# Skip npm install
-node ./bin/nsbp-cli.js create my-app --skip-install
-\`\`\`
+```bash
+nsbp create my-app
+cd my-app
+npm install
+npm run dev
+```
 
-## Usage
+For development with Docker (recommended):
+```bash
+cd my-app
+make dev  # Starts development environment with hot reload
+```
 
-### Create a new project
+## Command Reference
 
-\`\`\`bash
-# From npm (after global install)
-nsbp-cli create my-app
+### Create a New Project
+```bash
+nsbp create <app-name> [options]
 
-# From npx
-npx nsbp-cli create my-app
+# Examples
+nsbp create my-app
+nsbp create my-app --skip-install  # Skip npm install
+nsbp create my-app --template basic  # Specify template (basic is default)
+```
 
-# From local CLI directory
-node ./bin/nsbp-cli.js create my-app
+### Display Framework Information
+```bash
+nsbp info
+```
 
-# Skip npm install
-nsbp-cli create my-app --skip-install
+### Help
+```bash
+nsbp --help          # Show all commands
+nsbp create --help   # Show create command options
+```
 
-# Specify template (currently only basic is available)
-nsbp-cli create my-app --template basic
-\`\`\`
+## Templates
 
-### Display information
+The CLI provides project templates to get started quickly:
 
-\`\`\`bash
-# Show NSBP framework information
-nsbp-cli info
-\`\`\`
+- **basic** (default) - Complete NSBP stack with React SSR, TypeScript, and Webpack
+  - Includes full Docker support for development and production
+  - Pre-configured with Makefile for easy Docker operations
+  - Ready-to-use project structure
 
-### Help
+- **blog** - Blog-focused template with article layouts (coming soon)
+- **ecommerce** - E-commerce template with product pages (coming soon)
 
-\`\`\`bash
-# Show all commands
-nsbp-cli --help
+## Docker Support
 
-# Show create command help
-nsbp-cli create --help
-\`\`\`
+The **basic** template includes comprehensive Docker configuration:
 
-## Templates
+### Docker Files Included
+- `.dockerignore` - Docker build ignore rules
+- `docker-compose.yml` - Production environment configuration
+- `docker-compose.dev.yml` - Development environment with hot reload
+- `Dockerfile` - Multi-stage production build
+- `Dockerfile.dev` - Development build
+- `Makefile` - Convenient Docker commands
 
-- **basic**: Default template with core NSBP features (currently available)
-- **blog**: Blog-focused template with article layouts (coming soon)
-- **ecommerce**: E-commerce template with product pages (coming soon)
+### Available Make Commands
+```bash
+make dev      # Start development environment (hot reload)
+make prod     # Start production environment
+make rebuild  # Rebuild and restart production containers
+make logs     # View container logs
+make down     # Stop and remove containers
+make shell    # Open shell in production container
+make shell-dev # Open shell in development container
+```
 
-## How it works
+## How It Works
 
-The CLI copies NSBP project structure from \`templates/basic/\` to your target directory and creates a new \`package.json\` with appropriate dependencies. You get a fully functional NSBP project ready for development.
+The CLI copies the NSBP project structure from `templates/basic/` to your target directory and creates a new `package.json` with appropriate dependencies. You get a fully functional NSBP project ready for development, including complete Docker support.
 
 ## Template Synchronization
 
 The CLI includes a synchronization script that keeps built-in templates up-to-date with the main NSBP project code.
 
 ### Sync Script
-Location: \`cli/scripts/sync-template.js\`
+Location: `cli/scripts/sync-template.js`
 
 ### Usage
-\`\`\`bash
-# From CLI directory
-cd /path/to/nsbp-cli/cli
-
-# Run sync script
-pnpm run sync-template
-# or
-npm run sync-template
-
-# Or use to update shortcut
-pnpm run update
-# or
-npm run update
-\`\`\`
+```bash
+cd cli
+npm run update  # Runs sync-template script
+```
 
 ### Features
-- **Smart copying**: Copies only source code and configuration files
-- **Build artifact filtering**: Automatically excludes .js.map, .css.map, .txt, .json, and .LICENSE.txt files from the public directory
-- **Template transformation**: Converts main project's package.json to template format (name: "nsbp-cli-template")
-- **Integrity verification**: Checks for required files like src/Routers.tsx, scripts/start.js, and package.json
-
-### What gets synchronized
-- \`src/\` - React components and routing
-- \`public/\` - Static assets (images, favicon.ico)
-- \`scripts/\` - Startup and utility scripts
-- \`webpack.*.js\` - Webpack configuration files
-- \`tsconfig.json\` - TypeScript configuration
-- \`postcss.config.js\` - PostCSS configuration
-- \`package.json\` - Project configuration (automatically templatized)
-- \`.gitignore\`, \`.prettierrc\`, \`.prettierignore\`, \`README.md\`
+- **Smart copying** - Copies only source code and configuration files
+- **Build artifact filtering** - Automatically excludes build artifacts from the public directory
+- **Template transformation** - Converts main project's package.json to template format
+- **Integrity verification** - Checks for required files before synchronization
+
+### Synchronized Files
+- `src/` - React components and routing
+- `public/` - Static assets
+- `scripts/` - Startup and utility scripts
+- `webpack.*.js` - Webpack configuration
+- `tsconfig.json` - TypeScript configuration
+- `postcss.config.js` - PostCSS configuration
+- `package.json` - Project configuration (templatized)
+- `.gitignore`, `.prettierrc`, `.prettierignore`, `README.md`
+- **Docker files**: `.dockerignore`, `docker-compose.yml`, `docker-compose.dev.yml`, `Dockerfile`, `Dockerfile.dev`, `Makefile`
 
 ## Development
 
 To work on the CLI locally:
 
-\`\`\`bash
+```bash
 cd cli
-pnpm install
-# or
 npm install
-node ./bin/nsbp-cli.js create test-app
-\`\`\`
+node ./bin/nsbp.js --help  # Test CLI locally
+```
+
+### Publishing Updates
+From the NSBP project root:
+```bash
+make publish-cli  # Syncs templates, updates version, publishes to npm
+```
 
 ## Package Information
 
-- **Package Name**: \`nsbp-cli\`
-- **Bin Command**: \`nsbp-cli\`
-- **Version**: \`0.1.0\`
+- **Package Name**: `nsbp-cli`
+- **Bin Command**: `nsbp` (install globally and run `nsbp --help`)
+- **Version**: `0.2.3`
 - **Dependencies**: chalk, commander, fs-extra, inquirer
-- **Package Manager**: Supports both npm and pnpm
+- **Node Version**: >=16.0.0
 
 ## License
 
-ISC
+ISC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsbp-cli",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "CLI tool for creating NSBP (Node React SSR by Webpack) projects",
   "main": "index.js",
   "files": [

package/templates/basic/.dockerignore

@@ -53,4 +53,4 @@ logs
 cli
 
 # Serena
-.serena
+.serena

package/templates/basic/Dockerfile

@@ -62,4 +62,4 @@ HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
 ENTRYPOINT ["dumb-init", "--"]
 
 # Start application
-CMD ["node", "./scripts/start.js"]
+CMD ["node", "./scripts/start.js"]

package/templates/basic/Dockerfile.dev

@@ -6,7 +6,7 @@ FROM node:20-alpine
 RUN apk add --no-cache dumb-init
 
 # Create non-root user
-RUN addgroup -u 1001 -S nodejs && \
+RUN addgroup -g 1001 -S nodejs && \
     adduser -S nodejs -u 1001
 
 # Set working directory
@@ -49,4 +49,4 @@ EXPOSE 3001
 ENTRYPOINT ["/entrypoint.sh"]
 
 # Start development server
-CMD ["dumb-init", "--", "npm", "run", "dev"]
+CMD ["dumb-init", "--", "npm", "run", "dev"]

package/templates/basic/Makefile

@@ -1,4 +1,4 @@
-.PHONY: help build dev prod down clean logs restart
+.PHONY: help build dev prod down clean logs restart publish-cli
 
 help: ## Show this help message
 	@echo 'Usage: make [target]'
@@ -51,4 +51,23 @@ shell-dev: ## Open shell in development container
 	docker-compose -f docker-compose.dev.yml exec app sh
 
 test: ## Run tests (if configured)
-	docker-compose exec app npm test
+	docker-compose exec app npm test
+
+publish-cli: ## Publish CLI to npm registry
+	@echo "🚀 Starting CLI publish process..."
+	cd cli && npm run update
+	@echo "📦 Template updated, committing changes..."
+	git add .
+	git diff --quiet && git diff --cached --quiet || git commit -m "chore: update cli template"
+	@echo "🔖 Updating version..."
+	cd cli && npm version patch --no-git-tag-version
+	@echo "📝 Committing version bump..."
+	git add cli/package.json
+	git commit -m "chore: bump version to v$$(cd cli && node -p "require('./package.json').version")"
+	@echo "🏷️  Creating git tag..."
+	git tag -a "v$$(cd cli && node -p "require('./package.json').version")" -m "Version $$(cd cli && node -p "require('./package.json').version")"
+	@echo "📤 Publishing to npm..."
+	cd cli && npm publish
+	@echo "📤 Pushing to git repository..."
+	git push --follow-tags
+	@echo "✅ CLI published successfully!"

package/templates/basic/README.md

@@ -1,6 +1,6 @@
 # 开发
 - npm run dev   (开发运行)
-- npm run build (生产编译) 
+- npm run build (生产编译)
 - npm start     (生产运行)
 
 客户端渲染
@@ -10,4 +10,128 @@ http://localhost:3001/
 http://localhost:3001/?seo=1
 
 服务端渲染不成功，改为客户端渲染
-http://localhost:3001/?seo=1&from=link
+http://localhost:3001/?seo=1&from=link
+
+## Docker 部署
+
+**权限问题已修复！** 详细说明见下面的开发环境说明。
+
+### 生产环境
+
+使用 Makefile (推荐):
+
+```bash
+# 构建并启动
+make prod
+
+# 或分步执行
+make build
+make prod
+
+# 查看日志
+make logs
+
+# 重启
+make restart
+
+# 进入容器
+make shell
+
+# 停止
+make down
+
+# 完全清理（删除镜像和卷）
+make clean
+```
+
+或直接使用 Docker Compose:
+
+```bash
+# 构建镜像
+docker-compose build
+
+# 启动服务（后台运行）
+docker-compose up -d
+
+# 查看日志
+docker-compose logs -f
+
+# 停止服务
+docker-compose down
+```
+
+访问: http://localhost:3001
+
+### 开发环境
+
+⚠️ **重要提示**:
+1. 首次启动开发环境需要等待构建完成，期间可能看到 `Cannot find module` 错误，这是正常的
+2. 开发环境使用 volume 挂载，遇到权限问题时会自动修复
+3. 如果遇到权限错误（EACCES），容器会自动修复权限（通过 entrypoint.sh）
+
+```bash
+# 启动开发环境（带热重载）
+make dev
+
+# 查看日志
+make logs-dev
+
+# 进入容器
+make shell-dev
+
+# 重启开发环境
+make restart-dev
+
+# 重新构建并启动
+make rebuild-dev
+```
+
+或直接使用 Docker Compose:
+
+```bash
+# 构建并启动开发环境
+docker-compose -f docker-compose.dev.yml up --build
+
+# 后台运行
+docker-compose -f docker-compose.dev.yml up -d --build
+
+# 查看日志
+docker-compose -f docker-compose.dev.yml logs -f
+
+# 停止
+docker-compose -f docker-compose.dev.yml down
+```
+
+### Docker 命令速查
+
+```bash
+# 查看所有可用命令
+make help
+
+# 生产环境
+make build         # 构建镜像
+make prod          # 启动生产环境
+make logs          # 查看日志
+make restart       # 重启容器
+make shell         # 进入容器
+make down          # 停止容器
+
+# 开发环境
+make build-dev     # 构建开发镜像
+make dev           # 启动开发环境
+make logs-dev      # 查看开发日志
+make restart-dev   # 重启开发容器
+make shell-dev     # 进入开发容器
+
+# 通用命令
+make clean         # 清理所有资源（镜像、卷等）
+make rebuild       # 重新构建并启动生产环境
+make rebuild-dev   # 重新构建并启动开发环境
+```
+
+### 环境变量
+
+可在 `docker-compose.yml` 或 `docker-compose.dev.yml` 中配置环境变量：
+
+- `NODE_ENV`: 运行环境 (production/development)
+- `PORT`: 服务端口 (默认 3001)

package/templates/basic/docker-compose.dev.yml

@@ -34,4 +34,4 @@ volumes:
 
 networks:
   nsbp-network:
-    driver: bridge
+    driver: bridge

package/templates/basic/docker-compose.yml

@@ -21,4 +21,4 @@ services:
 
 networks:
   nsbp-network:
-    driver: bridge
+    driver: bridge

package/templates/basic/scripts/verify-dev.sh

@@ -0,0 +1,77 @@
+#!/bin/bash
+
+# 开发环境验证脚本
+
+echo "========================================="
+echo "Docker 开发环境验证"
+echo "========================================="
+echo ""
+
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+NC='\033[0m'
+
+# 检查容器状态
+echo "1. 检查容器状态..."
+if docker ps | grep -q "nsbp-app-dev"; then
+    echo -e "${GREEN}✅ 容器正在运行${NC}"
+else
+    echo -e "${RED}❌ 容器未运行${NC}"
+    echo ""
+    echo "启动命令："
+    echo "  make dev"
+    echo "  docker-compose -f docker-compose.dev.yml up -d --build"
+    exit 1
+fi
+
+echo ""
+echo "2. 检查服务是否可访问..."
+HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:3001)
+if [ "$HTTP_CODE" = "200" ]; then
+    echo -e "${GREEN}✅ 服务可访问 (HTTP $HTTP_CODE)${NC}"
+else
+    echo -e "${RED}❌ 服务不可访问 (HTTP $HTTP_CODE)${NC}"
+fi
+
+echo ""
+echo "3. 检查权限错误..."
+if docker-compose -f docker-compose.dev.yml logs 2>&1 | grep -q "EACCES"; then
+    echo -e "${RED}❌ 发现权限错误${NC}"
+    echo ""
+    echo "最近的权限错误："
+    docker-compose -f docker-compose.dev.yml logs | grep "EACCES" | tail -3
+else
+    echo -e "${GREEN}✅ 未发现权限错误${NC}"
+fi
+
+echo ""
+echo "4. 检查构建状态..."
+if docker-compose -f docker-compose.dev.yml logs 2>&1 | grep -q "compiled successfully"; then
+    echo -e "${GREEN}✅ 构建完成${NC}"
+else
+    echo -e "${YELLOW}⚠️  构建中或未开始${NC}"
+fi
+
+echo ""
+echo "5. 检查服务器监听..."
+if docker-compose -f docker-compose.dev.yml logs 2>&1 | grep -q "listening"; then
+    echo -e "${GREEN}✅ 服务器正在监听${NC}"
+else
+    echo -e "${YELLOW}⚠️  服务器尚未启动监听${NC}"
+fi
+
+echo ""
+echo "========================================="
+echo -e "${GREEN}验证完成！${NC}"
+echo "========================================="
+echo ""
+echo "访问应用："
+echo "  http://localhost:3001"
+echo ""
+echo "查看日志："
+echo "  docker-compose -f docker-compose.dev.yml logs -f"
+echo ""
+echo "停止服务："
+echo "  make down"
+echo "  docker-compose -f docker-compose.dev.yml down"
+echo ""

package/templates/basic/src/containers/Home.tsx

@@ -347,7 +347,7 @@ export const getPhotoMenu = (req: any, res: any) => {
             <QuickStartGrid>
               <QuickStartCard>
                 <QuickStartTitle>1️⃣ 创建项目</QuickStartTitle>
-                <QuickStartCode>$ npx nsbp create my-app</QuickStartCode>
+                <QuickStartCode>$ npx nsbp-cli create my-app</QuickStartCode>
                 <QuickStartDescription>
                   使用 CLI 工具创建新项目
                 </QuickStartDescription>