@fecommunity/reactpress-server 1.0.0-beta.11 → 1.0.0-beta.13

package/bin/reactpress-server.js

@@ -1,444 +1,626 @@
 #!/usr/bin/env node
 
-const { program } = require('commander');
-const { execSync } = require('child_process');
-const path = require('path');
-const fs = require('fs');
-const chalk = require('chalk');
-const inquirer = require('inquirer');
+const express = require('express');
 const mysql = require('mysql2/promise');
+const chalk = require('chalk');
+const open = require('open');
+const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
 
-program
-  .name('@fecommunity/reactpress-server')
-  .description('ReactPress Server CLI')
-  .version('1.0.0');
+const PORT = 3003;
+const SERVER_PORT = 3002;
 
-// Database connection testing function
-async function testDatabaseConnection(config) {
-  try {
-    console.log(chalk.cyan('🔍 Testing database connection...'));
-    
-    const connection = await mysql.createConnection({
-      host: config.dbHost,
-      port: parseInt(config.dbPort),
-      user: config.dbUser,
-      password: config.dbPassword
-    });
-    
-    // Test basic connection
-    await connection.ping();
-    console.log(chalk.green('✅ Database connection successful!'));
-    
-    // Check if database exists
-    const [databases] = await connection.execute(`SHOW DATABASES LIKE '${config.dbDatabase}'`);
+// Main entry point with auto-detection
+async function main() {
+  const args = process.argv.slice(2);
+  
+  // Check if .env exists in current directory
+  const envPath = path.join(process.cwd(), '.env');
+  const hasEnv = fs.existsSync(envPath);
+  
+  console.log(chalk.blue('🚀 ReactPress Server'));
+  
+  if (!hasEnv) {
+    console.log(chalk.yellow('⚠️  No configuration found. Starting installation wizard...'));
+    await runInstallationWizard();
+  } else {
+    console.log(chalk.green('✅ Configuration found. Starting server...'));
+    startServer();
+  }
+}
+
+// Installation wizard
+async function runInstallationWizard() {
+  console.log(chalk.cyan('🌍 Starting installation wizard...'));
+  
+  const app = express();
+  app.use(express.json());
+  app.use(express.urlencoded({ extended: true }));
+  app.get('/', (req, res) => res.send(getWordPressHTML()));
+  
+  // Test database connection
+  app.post('/test-db', async (req, res) => {
+    const { host, port, user, password, database } = req.body;
+    
+    if (!host || !port || !user || !database) {
+      return res.json({ 
+        success: false, 
+        message: 'All database fields are required.' 
+      });
+    }
     
-    if (databases.length === 0) {
-      console.log(chalk.yellow(`⚠️  Database '${config.dbDatabase}' does not exist.`));
+    try {
+      console.log(chalk.cyan(`Testing connection to ${user}@${host}:${port}/${database}...`));
       
-      const { createDb } = await inquirer.prompt([
-        {
-          type: 'confirm',
-          name: 'createDb',
-          message: `Create database '${config.dbDatabase}' now?`,
-          default: true
-        }
-      ]);
+      const conn = await mysql.createConnection({
+        host: host.trim(),
+        port: parseInt(port),
+        user: user.trim(),
+        password: password,
+        connectTimeout: 5000,
+        acquireTimeout: 5000,
+        timeout: 5000
+      });
       
-      if (createDb) {
-        try {
-          await connection.execute(`CREATE DATABASE IF NOT EXISTS \`${config.dbDatabase}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`);
-          console.log(chalk.green(`✅ Database '${config.dbDatabase}' created successfully!`));
-        } catch (createError) {
-          console.log(chalk.red(`❌ Failed to create database: ${createError.message}`));
-          return false;
+      try {
+        await conn.query(`USE \`${database.trim()}\``);
+        console.log(chalk.green(`Database '${database}' exists and accessible`));
+      } catch (dbError) {
+        if (dbError.code === 'ER_BAD_DB_ERROR') {
+          await conn.query(`CREATE DATABASE \`${database.trim()}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`);
+          console.log(chalk.green(`Database '${database}' created successfully`));
+        } else {
+          throw dbError;
         }
       }
-    } else {
-      console.log(chalk.green(`✅ Database '${config.dbDatabase}' exists and is accessible.`));
+      
+      await conn.end();
+      console.log(chalk.green('✅ Database connection test passed'));
+      
+      res.json({ 
+        success: true, 
+        message: `Successfully connected to database '${database}' on ${host}:${port}` 
+      });
+      
+    } catch (error) {
+      console.log(chalk.red('❌ Database connection failed:'), error.message);
+      
+      let errorMessage = 'Database connection failed: ';
+      
+      switch (error.code) {
+        case 'ECONNREFUSED':
+          errorMessage += `Cannot connect to MySQL server at ${host}:${port}. Please ensure MySQL is running.`;
+          break;
+        case 'ER_ACCESS_DENIED_ERROR':
+          errorMessage += `Access denied for user '${user}'. Please check your username and password.`;
+          break;
+        case 'ENOTFOUND':
+          errorMessage += `Host '${host}' not found. Please check the hostname.`;
+          break;
+        case 'ETIMEDOUT':
+          errorMessage += `Connection timeout to ${host}:${port}. Please check your network and firewall settings.`;
+          break;
+        case 'ER_BAD_DB_ERROR':
+          errorMessage += `Database '${database}' does not exist and cannot be created. Please check your permissions.`;
+          break;
+        default:
+          errorMessage += error.message;
+      }
+      
+      res.json({ success: false, message: errorMessage });
     }
+  });
+  
+  // Install and start server
+  app.post('/install', async (req, res) => {
+    const { db, site } = req.body;
     
-    await connection.end();
-    return true;
+    // Final validation
+    try {
+      const testConn = await mysql.createConnection({
+        host: db.host.trim(),
+        port: parseInt(db.port),
+        user: db.user.trim(),
+        password: db.password,
+        database: db.database.trim()
+      });
+      await testConn.end();
+    } catch (error) {
+      return res.json({ 
+        success: false, 
+        message: 'Final database validation failed. Please test your connection again.' 
+      });
+    }
     
-  } catch (error) {
-    console.log(chalk.red('❌ Database connection failed:'));
+    const env = `# ReactPress Configuration
+# Generated on ${new Date().toISOString()}
+
+DB_HOST=${db.host}
+DB_PORT=${db.port}
+DB_USER=${db.user}
+DB_PASSWD=${db.password}
+DB_DATABASE=${db.database}
+CLIENT_SITE_URL=${site.clientUrl}
+SERVER_SITE_URL=${site.serverUrl}
+`;
     
-    if (error.code === 'ECONNREFUSED') {
-      console.log(chalk.yellow('   - Make sure MySQL server is running'));
-      console.log(chalk.yellow(`   - Check if MySQL is listening on ${config.dbHost}:${config.dbPort}`));
-    } else if (error.code === 'ER_ACCESS_DENIED_ERROR') {
-      console.log(chalk.yellow('   - Check username and password'));
-      console.log(chalk.yellow('   - Make sure user has proper permissions'));
-    } else {
-      console.log(chalk.yellow(`   - Error: ${error.message}`));
-    }
+    const envPath = path.join(process.cwd(), '.env');
+    fs.writeFileSync(envPath, env);
+    console.log(chalk.green('✅ Configuration saved to .env file'));
     
-    const { retry } = await inquirer.prompt([
-      {
-        type: 'confirm',
-        name: 'retry',
-        message: 'Would you like to re-enter database configuration?',
-        default: true
-      }
-    ]);
+    res.json({ 
+      success: true, 
+      message: 'ReactPress installed successfully! Starting server...',
+      serverUrl: site.serverUrl
+    });
     
-    return retry ? 'retry' : false;
+    // Close installation server and start ReactPress server
+    setTimeout(() => {
+      console.log(chalk.green('\n🎉 Installation completed!'));
+      console.log(chalk.cyan('🚀 Starting ReactPress Server...'));
+      server.close();
+      startServer();
+    }, 2000);
+  });
+  
+  const server = app.listen(PORT, () => {
+    const url = `http://localhost:${PORT}`;
+    console.log(chalk.green(`✅ Installation wizard: ${url}`));
+    open(url);
+    console.log(chalk.gray('Press Ctrl+C to cancel\n'));
+  });
+  
+  process.on('SIGINT', () => {
+    console.log(chalk.yellow('\n⚠️ Installation cancelled'));
+    server.close();
+    process.exit(0);
+  });
+}
+
+// Start ReactPress server
+function startServer() {
+  const envPath = path.join(process.cwd(), '.env');
+  
+  if (!fs.existsSync(envPath)) {
+    console.log(chalk.red('❌ No configuration found!'));
+    console.log(chalk.yellow('Please run the installation first.'));
+    return;
   }
+  
+  console.log(chalk.blue('🚀 Starting ReactPress Server...'));
+  console.log(chalk.cyan(`🌍 Server will be available at: http://localhost:${SERVER_PORT}/api`));
+  
+  // Start the NestJS server
+  const serverDir = path.dirname(__dirname); // server directory
+  const server = spawn('npm', ['run', 'dev'], { 
+    cwd: serverDir, 
+    stdio: 'inherit',
+    env: { ...process.env, NODE_ENV: 'development' }
+  });
+  
+  server.on('error', (error) => {
+    console.log(chalk.red('❌ Failed to start server:'), error.message);
+  });
+  
+  // Open browser after server starts
+  setTimeout(() => {
+    open(`http://localhost:${SERVER_PORT}/api`);
+  }, 5000);
 }
 
-// Init command - 初始化服务器配置
-program
-  .command('init')
-  .description('Initialize ReactPress server configuration')
-  .option('-d, --database <type>', 'Database type (mysql|postgres)', 'mysql')
-  .option('-p, --port <port>', 'Server port', '3002')
-  .option('--skip-db-setup', 'Skip database setup')
-  .option('-y, --yes', 'Use default values without prompts')
-  .option('--auto', 'Alias for --yes (use default values without prompts)')
-  .action(async (options) => {
-    console.log(chalk.blue('🚀 Initializing ReactPress Server...\n'));
-    
-    const cwd = process.cwd();
-    const envPath = path.join(cwd, '.env');
-    
-    // 检查.env文件是否已存在
-    if (fs.existsSync(envPath)) {
-      const { overwrite } = await inquirer.prompt([
-        {
-          type: 'confirm',
-          name: 'overwrite',
-          message: 'Configuration file (.env) already exists. Overwrite?',
-          default: false
+// WordPress-style HTML
+function getWordPressHTML() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ReactPress › Installation</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background: #f1f1f1;
+            color: #444;
+            line-height: 1.4;
         }
-      ]);
-      
-      if (!overwrite) {
-        console.log(chalk.yellow('⚠️  Initialization cancelled.'));
-        process.exit(0);
-      }
-    }
-    
-    let answers;
-    let dbTestResult = false;
-    
-    // Configuration and database testing loop
-    while (!dbTestResult) {
-      if (options.yes || options.auto) {
-        // 使用默认值，不进行交互
-        console.log(chalk.cyan('📋 Using default configuration values...\n'));
-        answers = {
-          dbHost: '127.0.0.1',
-          dbPort: '3306',
-          dbUser: 'reactpress',
-          dbPassword: 'reactpress',
-          dbDatabase: 'reactpress',
-          clientUrl: 'http://localhost:3001',
-          serverPort: options.port || '3002',
-          skipDbSetup: options.skipDbSetup || false
-        };
+        .wp-container {
+            max-width: 600px;
+            margin: 40px auto;
+            background: #fff;
+            border: 1px solid #ccd0d4;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+        }
+        .wp-header {
+            background: #0073aa;
+            color: #fff;
+            padding: 24px;
+            text-align: center;
+            border-bottom: 1px solid #005a87;
+        }
+        .wp-header h1 { font-size: 24px; font-weight: 400; margin-bottom: 8px; }
+        .wp-header p { font-size: 16px; opacity: 0.9; }
+        .wp-content { padding: 24px; }
+        .wp-step { display: none; }
+        .wp-step.active { display: block; }
+        .wp-step h2 { font-size: 22px; font-weight: 600; margin-bottom: 20px; color: #1d2327; }
+        .wp-description {
+            background: #f0f6fc;
+            border: 1px solid #c3e4f0;
+            border-left: 4px solid #0073aa;
+            padding: 12px 16px;
+            margin-bottom: 20px;
+            font-size: 14px;
+            color: #0c4a6e;
+        }
+        .wp-form-table { width: 100%; margin-bottom: 20px; }
+        .wp-form-table th {
+            text-align: left;
+            padding: 10px 0;
+            width: 140px;
+            vertical-align: top;
+            font-weight: 600;
+            color: #1d2327;
+        }
+        .wp-form-table td { padding: 10px 0; }
+        .wp-form-table input[type="text"],
+        .wp-form-table input[type="password"],
+        .wp-form-table input[type="number"],
+        .wp-form-table input[type="url"] {
+            width: 100%;
+            max-width: 320px;
+            padding: 8px 12px;
+            border: 1px solid #8c8f94;
+            border-radius: 4px;
+            font-size: 14px;
+            line-height: 1.4;
+            transition: border-color 0.15s ease-in-out;
+        }
+        .wp-form-table input:focus {
+            border-color: #0073aa;
+            outline: 0;
+            box-shadow: 0 0 0 1px #0073aa;
+        }
+        .wp-form-table .description {
+            font-size: 13px;
+            color: #646970;
+            margin-top: 4px;
+        }
+        .wp-button {
+            background: #0073aa;
+            color: #fff;
+            border: 1px solid #0073aa;
+            padding: 8px 16px;
+            font-size: 14px;
+            font-weight: 600;
+            border-radius: 3px;
+            cursor: pointer;
+            transition: all 0.15s ease-in-out;
+            text-decoration: none;
+            display: inline-block;
+        }
+        .wp-button:hover { background: #005a87; border-color: #005a87; }
+        .wp-button:disabled {
+            background: #f0f0f1;
+            border-color: #dcdcde;
+            color: #a7aaad;
+            cursor: not-allowed;
+        }
+        .wp-button.button-large { padding: 12px 24px; font-size: 16px; }
+        .wp-notice {
+            border: 1px solid #c3c4c7;
+            border-left-width: 4px;
+            padding: 12px;
+            margin: 16px 0;
+            background: #fff;
+        }
+        .wp-notice.notice-success { border-left-color: #00a32a; background: #f7fcf7; }
+        .wp-notice.notice-error { border-left-color: #d63638; background: #fcf2f2; }
+        .wp-notice p { margin: 0; font-size: 14px; }
+        .wp-progress { background: #f0f0f1; height: 4px; margin-bottom: 20px; }
+        .wp-progress-bar { background: #0073aa; height: 100%; transition: width 0.3s ease; }
+        .wp-loader {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #0073aa;
+            border-radius: 50%;
+            animation: wp-spin 1s linear infinite;
+            margin-right: 8px;
+        }
+        @keyframes wp-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .wp-footer {
+            background: #f6f7f7;
+            border-top: 1px solid #c3c4c7;
+            padding: 16px 24px;
+            text-align: center;
+            font-size: 13px;
+            color: #646970;
+        }
+        .text-center { text-align: center; }
+    </style>
+</head>
+<body>
+    <div class="wp-container">
+        <div class="wp-header">
+            <h1>ReactPress</h1>
+            <p>5-Minute Installation</p>
+        </div>
         
-        // In auto mode, skip database testing if --skip-db-setup is provided
-        if (options.skipDbSetup) {
-          console.log(chalk.yellow('⚠️  Skipping database connection test (--skip-db-setup enabled)'));
-          dbTestResult = true;
-        } else {
-          dbTestResult = await testDatabaseConnection(answers);
-          if (dbTestResult === 'retry') {
-            console.log(chalk.yellow('\n⚠️  Switching to interactive mode for database configuration...\n'));
-            options.yes = false;
-            options.auto = false;
-            continue;
-          }
+        <div class="wp-progress">
+            <div class="wp-progress-bar" id="progressBar" style="width: 33%;"></div>
+        </div>
+        
+        <div class="wp-content">
+            <!-- Step 1: Database Configuration -->
+            <div class="wp-step active" id="step1">
+                <h2>Database Connection Information</h2>
+                
+                <div class="wp-description">
+                    You should have this information available from your web hosting provider. If you don't have it, contact them before continuing.
+                </div>
+                
+                <table class="wp-form-table">
+                    <tr>
+                        <th><label for="dbHost">Database Host</label></th>
+                        <td>
+                            <input type="text" id="dbHost" value="127.0.0.1" />
+                            <p class="description">Usually "localhost" or "127.0.0.1"</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th><label for="dbPort">Database Port</label></th>
+                        <td>
+                            <input type="number" id="dbPort" value="3306" />
+                            <p class="description">Default MySQL port is 3306</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th><label for="dbUser">Username</label></th>
+                        <td>
+                            <input type="text" id="dbUser" value="" placeholder="Database username" />
+                            <p class="description">Your MySQL username</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th><label for="dbPassword">Password</label></th>
+                        <td>
+                            <input type="password" id="dbPassword" value="" placeholder="Database password" />
+                            <p class="description">Your MySQL password</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th><label for="dbName">Database Name</label></th>
+                        <td>
+                            <input type="text" id="dbName" value="reactpress" />
+                            <p class="description">The name of the database you want to use with ReactPress</p>
+                        </td>
+                    </tr>
+                </table>
+                
+                <div id="dbResult"></div>
+                
+                <p class="text-center">
+                    <button class="wp-button button-large" onclick="testDatabase()" id="testBtn">
+                        Test Database Connection
+                    </button>
+                </p>
+            </div>
+            
+            <!-- Step 2: Site Configuration -->
+            <div class="wp-step" id="step2">
+                <h2>Site Information</h2>
+                
+                <div class="wp-description">
+                    Please provide the following information. Don't worry, you can always change these settings later.
+                </div>
+                
+                <table class="wp-form-table">
+                    <tr>
+                        <th><label for="clientUrl">Client Site URL</label></th>
+                        <td>
+                            <input type="url" id="clientUrl" value="http://localhost:3001" />
+                            <p class="description">The URL where your ReactPress frontend will be accessible</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th><label for="serverUrl">API Server URL</label></th>
+                        <td>
+                            <input type="url" id="serverUrl" value="http://localhost:3002" />
+                            <p class="description">The URL where your ReactPress API server will run</p>
+                        </td>
+                    </tr>
+                </table>
+                
+                <div id="installResult"></div>
+                
+                <p class="text-center">
+                    <button class="wp-button button-large" onclick="installReactPress()" id="installBtn">
+                        Install & Start ReactPress
+                    </button>
+                </p>
+            </div>
+            
+            <!-- Step 3: Success -->
+            <div class="wp-step" id="step3">
+                <h2>🎉 Installation Complete!</h2>
+                
+                <div class="wp-notice notice-success">
+                    <p><strong>ReactPress has been installed and is starting...</strong></p>
+                </div>
+                
+                <p>Your ReactPress server is now starting up. You can:</p>
+                
+                <ul style="margin: 16px 0 16px 20px;">
+                    <li>Close this browser window</li>
+                    <li>The server API will open automatically at <strong>http://localhost:3002/api</strong></li>
+                    <li>Access your admin panel at <strong>http://localhost:3001/admin</strong> (when client is running)</li>
+                </ul>
+                
+                <div class="wp-description">
+                    <strong>Note:</strong> To restart the server in the future, simply run <code>npx @fecommunity/reactpress-server</code> again.
+                </div>
+            </div>
+        </div>
+        
+        <div class="wp-footer">
+            <p>Need help? <a href="https://github.com/fecommunity/reactpress/issues" target="_blank">ReactPress Documentation</a></p>
+        </div>
+    </div>
+    
+    <script>
+        let currentStep = 1;
+        const totalSteps = 3;
+        let isTestingConnection = false;
+        
+        function updateProgress() {
+            const progress = (currentStep / totalSteps) * 100;
+            document.getElementById('progressBar').style.width = progress + '%';
         }
-      } else {
-        // 交互式配置收集
-        console.log(chalk.cyan('📋 Please configure your ReactPress server settings:\n'));
         
-        answers = await inquirer.prompt([
-          {
-            type: 'input',
-            name: 'dbHost',
-            message: 'Database Host:',
-            default: answers ? answers.dbHost : '127.0.0.1'
-          },
-          {
-            type: 'input',
-            name: 'dbPort',
-            message: 'Database Port:',
-            default: answers ? answers.dbPort : '3306',
-            validate: (input) => {
-              const port = parseInt(input);
-              return port > 0 && port <= 65535 ? true : 'Please enter a valid port number (1-65535)';
-            }
-          },
-          {
-            type: 'input',
-            name: 'dbUser',
-            message: 'Database Username:',
-            default: answers ? answers.dbUser : 'reactpress'
-          },
-          {
-            type: 'password',
-            name: 'dbPassword',
-            message: 'Database Password:',
-            default: answers ? answers.dbPassword : 'reactpress',
-            mask: '*'
-          },
-          {
-            type: 'input',
-            name: 'dbDatabase',
-            message: 'Database Name:',
-            default: answers ? answers.dbDatabase : 'reactpress'
-          },
-          {
-            type: 'input',
-            name: 'clientUrl',
-            message: 'Client Site URL:',
-            default: answers ? answers.clientUrl : 'http://localhost:3001',
-            validate: (input) => {
-              try {
-                new URL(input);
-                return true;
-              } catch {
-                return 'Please enter a valid URL (e.g., http://localhost:3001)';
-              }
+        function showStep(step) {
+            document.querySelectorAll('.wp-step').forEach(s => s.classList.remove('active'));
+            document.getElementById('step' + step).classList.add('active');
+            currentStep = step;
+            updateProgress();
+        }
+        
+        function showNotice(message, type = 'error', containerId = 'dbResult') {
+            const container = document.getElementById(containerId);
+            container.innerHTML = \`
+                <div class="wp-notice notice-\${type}">
+                    <p>\${message}</p>
+                </div>
+            \`;
+        }
+        
+        function validateDatabaseInputs() {
+            const host = document.getElementById('dbHost').value.trim();
+            const port = document.getElementById('dbPort').value.trim();
+            const user = document.getElementById('dbUser').value.trim();
+            const password = document.getElementById('dbPassword').value;
+            const database = document.getElementById('dbName').value.trim();
+            
+            if (!host || !port || !user || !database) {
+                showNotice('Please fill in all required fields.', 'error');
+                return false;
             }
-          },
-          {
-            type: 'input',
-            name: 'serverPort',
-            message: 'Server Port:',
-            default: answers ? answers.serverPort : (options.port || '3002'),
-            validate: (input) => {
-              const port = parseInt(input);
-              return port > 0 && port <= 65535 ? true : 'Please enter a valid port number (1-65535)';
+            
+            if (isNaN(port) || port < 1 || port > 65535) {
+                showNotice('Please enter a valid port number (1-65535).', 'error');
+                return false;
             }
-          },
-          {
-            type: 'confirm',
-            name: 'skipDbSetup',
-            message: 'Skip database setup instructions?',
-            default: false
-          }
-        ]);
+            
+            return { host, port, user, password, database };
+        }
         
-        // Test database connection
-        if (!answers.skipDbSetup) {
-          dbTestResult = await testDatabaseConnection(answers);
-          if (dbTestResult === 'retry') {
-            console.log(chalk.yellow('\n🔄 Let\'s try the database configuration again...\n'));
-            continue;
-          } else if (!dbTestResult) {
-            const { continueAnyway } = await inquirer.prompt([
-              {
-                type: 'confirm',
-                name: 'continueAnyway',
-                message: 'Continue with configuration file creation anyway?',
-                default: false
-              }
-            ]);
+        async function testDatabase() {
+            if (isTestingConnection) return;
+            
+            const dbData = validateDatabaseInputs();
+            if (!dbData) return;
+            
+            isTestingConnection = true;
+            const testBtn = document.getElementById('testBtn');
+            const originalText = testBtn.innerHTML;
             
-            if (!continueAnyway) {
-              console.log(chalk.yellow('⚠️  Initialization cancelled.'));
-              process.exit(0);
+            testBtn.disabled = true;
+            testBtn.innerHTML = '<span class="wp-loader"></span>Testing connection...';
+            
+            try {
+                const response = await fetch('/test-db', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(dbData)
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    showNotice(result.message, 'success');
+                    setTimeout(() => {
+                        showStep(2);
+                    }, 1500);
+                } else {
+                    showNotice(result.message, 'error');
+                }
+            } catch (error) {
+                showNotice('Failed to connect to server. Please try again.', 'error');
+            } finally {
+                isTestingConnection = false;
+                testBtn.disabled = false;
+                testBtn.innerHTML = originalText;
             }
-            dbTestResult = true; // Continue despite failed connection
-          }
-        } else {
-          console.log(chalk.yellow('⚠️  Skipping database connection test.'));
-          dbTestResult = true;
-        }
-      }
-    }
-    
-    const serverUrl = `http://localhost:${answers.serverPort}`;
-    
-    // 创建.env文件 - 使用用户输入的配置
-    const envContent = `# Database Config
-DB_HOST=${answers.dbHost}
-DB_PORT=${answers.dbPort}
-DB_USER=${answers.dbUser}
-DB_PASSWD=${answers.dbPassword}
-DB_DATABASE=${answers.dbDatabase}
-
-
-# Client Config
-CLIENT_SITE_URL=${answers.clientUrl}
-
-# Server Config
-SERVER_SITE_URL=${serverUrl}
-`;
-    
-    fs.writeFileSync(envPath, envContent);
-    console.log(chalk.green('\n✅ Configuration saved to .env file'));
-    
-    // 更新 options 以使用用户输入的值
-    options.skipDbSetup = answers.skipDbSetup;
-    options.database = options.database || 'mysql';
-    options.port = answers.serverPort;
-    
-    if (!options.skipDbSetup) {
-      console.log(chalk.yellow('\n🗄️  Database setup:'));
-      console.log(chalk.gray(`Please ensure your ${options.database} server is running and create the database:`));
-      console.log(chalk.cyan(`CREATE DATABASE reactpress;`));
-      console.log(chalk.gray(`CREATE USER 'reactpress'@'localhost' IDENTIFIED BY 'reactpress';`));
-      console.log(chalk.gray(`GRANT ALL PRIVILEGES ON reactpress.* TO 'reactpress'@'localhost';`));
-      console.log(chalk.gray(`FLUSH PRIVILEGES;`));
-    }
-    
-    console.log(chalk.green('\n🎉 ReactPress Server initialized successfully!'));
-    console.log(chalk.cyan('\nNext steps:'));
-    console.log(chalk.gray('1. Start the server: npx @fecommunity/reactpress-server start'));
-    console.log(chalk.gray('2. Visit API: http://localhost:' + options.port + '/api'));
-    console.log(chalk.gray('3. API docs: http://localhost:' + options.port + '/api (Swagger UI)'));
-  });
-
-// Start command - 启动服务器
-program
-  .command('start')
-  .description('Start ReactPress server')
-  .option('-p, --port <port>', 'Server port')
-  .option('-d, --dev', 'Start in development mode')
-  .option('--watch', 'Watch for file changes (dev mode)')
-  .action(async (options) => {
-    console.log(chalk.blue('🚀 Starting ReactPress Server...\n'));
-    
-    const cwd = process.cwd();
-    const envPath = path.join(cwd, '.env');
-    
-    // 检查.env文件是否存在
-    if (!fs.existsSync(envPath)) {
-      console.log(chalk.red('❌ Configuration file (.env) not found!'));
-      console.log(chalk.yellow('Please run: npx @fecommunity/reactpress-server init'));
-      process.exit(1);
-    }
-    
-    // 检查是否在项目根目录（有server目录）
-    const serverPath = path.join(cwd, 'server');
-    const hasServerDir = fs.existsSync(serverPath);
-    
-    let serverMainPath;
-    if (hasServerDir) {
-      // 在项目根目录，使用相对路径
-      serverMainPath = path.join(serverPath, 'dist', 'main.js');
-      const packageDir = serverPath;
-      
-      // 检查构建文件是否存在
-      if (!fs.existsSync(serverMainPath)) {
-        console.log(chalk.yellow('⚠️  Built server not found, building...'));
-        try {
-          execSync('pnpm run build:server', { cwd: cwd, stdio: 'inherit' });
-        } catch (error) {
-          console.log(chalk.red('❌ Build failed'));
-          process.exit(1);
         }
-      }
-    } else {
-      // 可能在独立安装的@reactpress/server包中
-      try {
-        const serverPackagePath = require.resolve('@fecommunity/reactpress-server/package.json');
-        const serverPackageDir = path.dirname(serverPackagePath);
-        serverMainPath = path.join(serverPackageDir, 'dist', 'main.js');
-      } catch (error) {
-        console.log(chalk.red('❌ ReactPress server package not found!'));
-        console.log(chalk.yellow('Please install: npm install @fecommunity/reactpress-server'));
-        process.exit(1);
-      }
-    }
-    
-    // 设置环境变量
-    const env = {
-      ...process.env,
-      NODE_ENV: options.dev ? 'development' : 'production'
-    };
-    
-    if (options.port) {
-      env.SERVER_PORT = options.port;
-    }
-    
-    try {
-      if (options.dev || options.watch) {
-        console.log(chalk.yellow('🔄 Starting in development mode...'));
-        if (hasServerDir) {
-          execSync('pnpm run dev:server', { 
-            cwd: cwd, 
-            stdio: 'inherit',
-            env
-          });
-        } else {
-          console.log(chalk.yellow('⚠️  Development mode using built server (source code not available)'));
-          console.log(chalk.cyan('Starting server with NODE_ENV=development...'));
-          execSync(`node ${serverMainPath}`, { 
-            cwd: process.cwd(),
-            stdio: 'inherit',
-            env
-          });
+        
+        async function installReactPress() {
+            const dbData = validateDatabaseInputs();
+            if (!dbData) {
+                showStep(1);
+                return;
+            }
+            
+            const clientUrl = document.getElementById('clientUrl').value.trim();
+            const serverUrl = document.getElementById('serverUrl').value.trim();
+            
+            if (!clientUrl || !serverUrl) {
+                showNotice('Please fill in all site URLs.', 'error', 'installResult');
+                return;
+            }
+            
+            const installBtn = document.getElementById('installBtn');
+            const originalText = installBtn.innerHTML;
+            
+            installBtn.disabled = true;
+            installBtn.innerHTML = '<span class="wp-loader"></span>Installing & Starting...';
+            
+            try {
+                const response = await fetch('/install', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        db: dbData,
+                        site: { clientUrl, serverUrl }
+                    })
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    showStep(3);
+                    // Auto-close and redirect to server after a delay
+                    setTimeout(() => {
+                        if (result.serverUrl) {
+                            window.open(result.serverUrl + '/api', '_blank');
+                        }
+                    }, 3000);
+                } else {
+                    showNotice(result.message, 'error', 'installResult');
+                }
+            } catch (error) {
+                showNotice('Installation failed. Please try again.', 'error', 'installResult');
+            } finally {
+                installBtn.disabled = false;
+                installBtn.innerHTML = originalText;
+            }
         }
-      } else {
-        console.log(chalk.green('🌟 Starting in production mode...'));
-        execSync(`node ${serverMainPath}`, { 
-          cwd: process.cwd(),
-          stdio: 'inherit',
-          env
-        });
-      }
-    } catch (error) {
-      console.log(chalk.red('❌ Failed to start server'));
-      process.exit(1);
-    }
-  });
-
-// Build command - 构建服务器
-program
-  .command('build')
-  .description('Build ReactPress server')
-  .action(() => {
-    console.log(chalk.blue('🔨 Building ReactPress Server...\n'));
-    
-    const cwd = process.cwd();
-    const serverPath = path.join(cwd, 'server');
-    
-    if (!fs.existsSync(serverPath)) {
-      console.log(chalk.red('❌ Server directory not found!'));
-      console.log(chalk.yellow('This command should be run from the project root directory.'));
-      process.exit(1);
-    }
-    
-    try {
-      execSync('pnpm run build:server', { 
-        cwd: cwd, 
-        stdio: 'inherit' 
-      });
-      console.log(chalk.green('✅ Build completed successfully!'));
-    } catch (error) {
-      console.log(chalk.red('❌ Build failed'));
-      process.exit(1);
-    }
-  });
+        
+        // Initialize
+        updateProgress();
+        document.getElementById('dbHost').focus();
+    </script>
+</body>
+</html>`;
+}
 
-// Dev command - 开发模式启动
-program
-  .command('dev')
-  .description('Start server in development mode')
-  .option('-p, --port <port>', 'Server port')
-  .action((options) => {
-    console.log(chalk.blue('🔄 Starting ReactPress Server in development mode...\n'));
-    
-    // 调用start命令的dev模式
-    const args = ['start', '--dev'];
-    if (options.port) {
-      args.push('--port', options.port);
-    }
-    
-    // 重新调用当前脚本
-    const child = require('child_process').spawn('node', [__filename, ...args], {
-      stdio: 'inherit',
-      env: process.env
-    });
-    
-    child.on('exit', (code) => {
-      process.exit(code);
-    });
-  });
+// Run the main function
+if (require.main === module) {
+  main().catch(console.error);
+}
 
-program.parse();
+module.exports = { main, startServer };