nsbp-cli 0.2.9 → 0.2.13

package/README.md

@@ -2,6 +2,8 @@
 
 Command-line interface for creating NSBP (Node React SSR by Webpack) projects.
 
+🌐 **Online Demo**: [https://nsbp.erishen.cn/](https://nsbp.erishen.cn/)
+
 📦 **Published on npm**: [https://www.npmjs.com/package/nsbp-cli](https://www.npmjs.com/package/nsbp-cli)
 
 ## Installation
@@ -145,7 +147,7 @@ node ./bin/nsbp.js --help  # Test CLI locally
 
 - **Package Name**: `nsbp-cli`
 - **Bin Command**: `nsbp` (install globally and run `nsbp --help`)
-- **Version**: `0.2.9`
+- **Version**: `0.2.13`
 - **Dependencies**: chalk, commander, fs-extra, inquirer
 - **Package Manager**: Uses pnpm (also compatible with npm)
 - **Node Version**: >=16.0.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "nsbp-cli",
-  "version": "0.2.9",
+  "version": "0.2.13",
   "description": "CLI tool for creating NSBP (Node React SSR by Webpack) projects",
   "main": "index.js",
+  "homepage": "https://nsbp.erishen.cn/",
   "files": [
     "bin/**/*",
     "templates/**/*",
@@ -37,7 +38,6 @@
   "bugs": {
     "url": "https://github.com/erishen/nsbp/issues"
   },
-  "homepage": "https://github.com/erishen/nsbp#readme",
   "dependencies": {
     "chalk": "^4.1.2",
     "commander": "^11.0.0",

package/templates/basic/Dockerfile

@@ -21,8 +21,8 @@ RUN npm run build
 # Stage 2: Production
 FROM node:20-alpine AS production
 
-# Install dumb-init for proper signal handling
-RUN apk add --no-cache dumb-init
+# Update apk cache and install dumb-init for proper signal handling
+RUN apk update && apk add dumb-init
 
 # Create non-root user
 RUN addgroup -g 1001 -S nodejs && \

package/templates/basic/Dockerfile.dev

@@ -2,8 +2,8 @@
 
 FROM node:20-alpine
 
-# Install dumb-init for proper signal handling
-RUN apk add --no-cache dumb-init
+# Update apk cache and install dumb-init for proper signal handling
+RUN apk update && apk add dumb-init
 
 # Create non-root user
 RUN addgroup -g 1001 -S nodejs && \
@@ -40,7 +40,7 @@ exec su-exec nodejs:nodejs "$@"\n' > /entrypoint.sh && \
     chmod +x /entrypoint.sh
 
 # Install su-exec for user switching
-RUN apk add --no-cache su-exec
+RUN apk add su-exec
 
 # Expose port
 EXPOSE 3001

package/templates/basic/Makefile

@@ -9,6 +9,9 @@ else
 	PM := pnpm
 endif
 
+# Docker compose detection
+COMPOSE := $(shell docker compose version >/dev/null 2>&1 && echo "docker compose" || echo "docker-compose")
+
 help: ## Show this help message
 	@echo 'Usage: make [target]'
 	@echo ''
@@ -16,48 +19,48 @@ help: ## Show this help message
 	@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)
 
 build: ## Build Docker images for production
-	docker-compose build
+	$(COMPOSE) build
 
 build-dev: ## Build Docker images for development
-	docker-compose -f docker-compose.dev.yml build
+	$(COMPOSE) -f docker-compose.dev.yml build
 
 dev: ## Start development environment (removes orphan containers)
-	docker-compose -f docker-compose.dev.yml up --build --remove-orphans
+	$(COMPOSE) -f docker-compose.dev.yml up --build --remove-orphans
 
 prod: ## Start production environment (removes orphan containers)
-	docker-compose up -d --remove-orphans
+	$(COMPOSE) up -d --remove-orphans
 
 down: ## Stop and remove containers (including orphan containers)
-	docker-compose down --remove-orphans
-	docker-compose -f docker-compose.dev.yml down --remove-orphans
+	$(COMPOSE) down --remove-orphans
+	$(COMPOSE) -f docker-compose.dev.yml down --remove-orphans
 
 clean: ## Stop containers, remove images and volumes (including orphan containers)
-	docker-compose down -v --rmi all --remove-orphans
-	docker-compose -f docker-compose.dev.yml down -v --rmi all --remove-orphans
+	$(COMPOSE) down -v --rmi all --remove-orphans
+	$(COMPOSE) -f docker-compose.dev.yml down -v --rmi all --remove-orphans
 
 logs: ## View logs
-	docker-compose logs -f
+	$(COMPOSE) logs -f
 
 logs-dev: ## View development logs
-	docker-compose -f docker-compose.dev.yml logs -f
+	$(COMPOSE) -f docker-compose.dev.yml logs -f
 
 restart: ## Restart production containers
-	docker-compose restart
+	$(COMPOSE) restart
 
 restart-dev: ## Restart development containers
-	docker-compose -f docker-compose.dev.yml restart
+	$(COMPOSE) -f docker-compose.dev.yml restart
 
 rebuild: ## Rebuild and restart production containers (removes orphan containers)
-	docker-compose up -d --build --remove-orphans
+	$(COMPOSE) up -d --build --remove-orphans
 
 rebuild-dev: ## Rebuild and restart development containers (removes orphan containers)
-	docker-compose -f docker-compose.dev.yml up -d --build --remove-orphans
+	$(COMPOSE) -f docker-compose.dev.yml up -d --build --remove-orphans
 
 shell: ## Open shell in production container
-	docker-compose exec app sh
+	$(COMPOSE) exec app sh
 
 shell-dev: ## Open shell in development container
-	docker-compose -f docker-compose.dev.yml exec app sh
+	$(COMPOSE) -f docker-compose.dev.yml exec app sh
 
 test: ## Run tests (if configured)
-	docker-compose exec app npm test
+	$(COMPOSE) exec app npm test

package/templates/basic/README.md

@@ -1,8 +1,14 @@
-# 开发
+# NSBP
+
+🌐 **Online Demo**: [https://nsbp.erishen.cn/](https://nsbp.erishen.cn/)
+
+## 开发
 - npm run dev   (开发运行)
 - npm run build (生产编译)
 - npm start     (生产运行)
 
+### 本地访问
+
 客户端渲染
 http://localhost:3001/
 

package/templates/basic/docker-compose.yml

@@ -5,7 +5,7 @@ services:
       dockerfile: Dockerfile
     container_name: nsbp-app
     ports:
-      - "3001:3001"
+      - "8091:3001"
     environment:
       - NODE_ENV=production
       - PORT=3001

package/templates/basic/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "node react ssr by webpack",
   "main": "index.js",
+  "homepage": "https://nsbp.erishen.cn/",
   "scripts": {
     "dev": "npm-run-all -l -s dev:init -p dev:build:*",
     "dev:init": "cross-env INIT=1 webpack --config webpack.server.js --mode development",

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

@@ -52,6 +52,8 @@ import {
   QuickStartTitle,
   QuickStartCode,
   QuickStartDescription,
+  DemoButtonLink,
+  DemoButtonIcon,
   Footer
 } from '../styled/home'
 
@@ -124,10 +126,11 @@ const Home: React.FC = () => {
       }} />
       <Helmet>
         <title>Nsbp.js - 轻量级 React SSR 框架</title>
-        <meta name="description" content="Nsbp.js - 一个轻量级 React SSR 框架，专为低资源部署与高度可定制场景而生。与 Next.js 相比，更节省资源，更灵活配置。" />
+        <meta name="description" content="Nsbp.js - 一个轻量级 React SSR 框架，专为低资源部署与高度可定制场景而生。与 Next.js 相比，更节省资源，更灵活配置。查看线上演示：https://nsbp.erishen.cn/" />
         <meta name="keywords" content="Nsbp.js, React SSR, 轻量级, SSR, TypeScript, React 19" />
         <meta property="og:title" content="Nsbp.js - 轻量级 React SSR 框架" />
-        <meta property="og:description" content="与 Next.js 相比，Nsbp.js 更轻量、更灵活、更可控。" />
+        <meta property="og:description" content="与 Next.js 相比，Nsbp.js 更轻量、更灵活、更可控。查看线上演示：https://nsbp.erishen.cn/" />
+        <meta property="og:url" content="https://nsbp.erishen.cn/" />
       </Helmet>
 
       <Layout query={{}}>
@@ -148,6 +151,17 @@ const Home: React.FC = () => {
                 完全掌控 Webpack 配置，无黑盒限制
               </HeroSubtitle>
 
+              <DemoButtonLink
+                href="https://nsbp.erishen.cn/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="fade-in"
+                style={{animationDelay: '0.4s'}}
+              >
+                <DemoButtonIcon>🌐</DemoButtonIcon>
+                查看线上演示
+              </DemoButtonLink>
+
               <HeroStats>
                 <StatCard>
                   <StatValue>~60%</StatValue>

package/templates/basic/src/styled/home.ts

@@ -776,6 +776,67 @@ export const QuickStartDescription = styled.p`
   margin-top: 1rem;
 `
 
+// ============================================
+// Demo Button（线上演示按钮）
+// ============================================
+
+export const DemoButtonLink = styled.a`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  color: #ffffff;
+  font-size: 1.1rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    animation: shine 2s infinite;
+  }
+
+  @keyframes shine {
+    0% { left: -100%; }
+    100% { left: 100%; }
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+  }
+`
+
+export const DemoButtonIcon = styled.span`
+  font-size: 1.2rem;
+  display: inline-block;
+`
+
 // ============================================
 // Footer
 // ============================================