domma-js 0.13.1 → 0.13.2

package/README.md

@@ -33,8 +33,14 @@ Get a complete project structure with development server in seconds:
 ```bash
 npm init -y
 npm install domma-js
-npx domma init      # Creates project structure
-npx domma serve     # Starts development server with live reload
+npx domma init      # Creates project structure (prompts to start server)
+```
+
+**Or manually start the server:**
+```bash
+npm start           # Starts on port 3000
+npm run serve       # Same as npm start
+npm run serve:8080  # Custom port
 ```
 
 This creates:
@@ -43,6 +49,7 @@ This creates:
 - ✅ JSON configuration (`domma.config.json`)
 - ✅ Navbar and footer (configured via JSON)
 - ✅ Theme system with 16+ themes
+- ✅ npm scripts (`start`, `serve`) in package.json
 - ✅ Development server with live reload
 - ✅ All features ready to use
 
@@ -50,12 +57,36 @@ This creates:
 
 Start the built-in development server with live reload:
 
+**Using npm scripts (recommended):**
+```bash
+npm start              # Start on port 3096
+npm run serve          # Same as npm start
+npm run serve:3096     # Explicit port 3096
+```
+
+**Using CLI directly:**
 ```bash
 npx domma serve              # Start server (auto-detects MPA/SPA)
-npx domma serve --port 8080  # Custom port
+npx domma serve --port 3096  # Custom port
 ```
 
-The server auto-detects your project type and serves from the correct directory with live reload enabled.
+The server auto-detects your project type (MPA/SPA) and serves from the correct directory with live reload enabled.
+
+**Full Development Workflow:**
+```bash
+# 1. Create project
+npm install domma-js
+npx domma init
+
+# 2. Start developing (auto-starts server or run manually)
+npm start                    # Opens http://localhost:3096
+
+# 3. Make changes → browser auto-reloads
+
+# 4. Stop server: Ctrl+C
+
+# 5. Restart anytime: npm start
+```
 
 ### Via npm (Manual Setup)
 

package/bin/domma-cli.js

@@ -203,6 +203,46 @@ async function handleInit() {
     console.log(`  ✓ Copied themes/`);
   }
 
+  // Create or update package.json with scripts
+  const packageJsonPath = join(process.cwd(), 'package.json');
+  let packageJson;
+
+  if (existsSync(packageJsonPath)) {
+    // Update existing package.json
+    packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+    console.log(`\n  Updating package.json with serve scripts...`);
+  } else {
+    // Create new package.json
+    packageJson = {
+      name: projectName,
+      version: '1.0.0',
+      description: `${projectName} - Powered by Domma`,
+      main: 'index.js',
+      type: 'module'
+    };
+    console.log(`\n  Creating package.json...`);
+  }
+
+  // Add/update scripts
+  if (!packageJson.scripts) {
+    packageJson.scripts = {};
+  }
+
+  packageJson.scripts.start = 'domma serve';
+  packageJson.scripts.serve = 'domma serve';
+  packageJson.scripts['serve:3096'] = 'domma serve --port 3096';
+
+  // Ensure domma-js is in dependencies
+  if (!packageJson.dependencies) {
+    packageJson.dependencies = {};
+  }
+  if (!packageJson.dependencies['domma-js']) {
+    packageJson.dependencies['domma-js'] = `^${VERSION}`;
+  }
+
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8');
+  console.log(`  ✓ Added npm scripts: start, serve`);
+
   console.log(`\n  ✓ Done! Your ${projectMode.toUpperCase()} project "${projectName}" is ready.\n`);
 
   // Prompt to start development server
@@ -217,12 +257,12 @@ async function handleInit() {
     console.log(`\n  Next steps:`);
 
     if (projectMode === 'spa') {
-      console.log(`    1. Start server: npx domma serve`);
+      console.log(`    1. Start server: npm start  (or: npm run serve)`);
       console.log(`    2. Edit domma.config.json to customise routes and navbar`);
       console.log(`    3. Add new views: npx domma add view <name>`);
       console.log(`    4. Edit views in frontend/js/views/`);
     } else {
-      console.log(`    1. Start server: npx domma serve`);
+      console.log(`    1. Start server: npm start  (or: npm run serve)`);
       console.log(`    2. Edit domma.config.json to customise`);
       console.log(`    3. Add new pages: npx domma add page <name>`);
     }
@@ -572,7 +612,12 @@ function copyTemplatesRecursive(srcDir, destDir, vars) {
  * Handle serve command
  */
 async function handleServe() {
-  const configPath = join(process.cwd(), 'domma.config.json');
+  // Check for domma.config.json at root (MPA) or in frontend/ (SPA)
+  let configPath = join(process.cwd(), 'domma.config.json');
+
+  if (!existsSync(configPath)) {
+    configPath = join(process.cwd(), 'frontend', 'domma.config.json');
+  }
 
   if (!existsSync(configPath)) {
     console.error('\n  ✗ Not in a Domma project directory');
@@ -622,7 +667,7 @@ async function handleServe() {
   const config = JSON.parse(readFileSync(configPath, 'utf-8'));
   const isSpa = config.spa?.enabled === true;
   const portIndex = args.indexOf('--port');
-  const port = portIndex !== -1 ? parseInt(args[portIndex + 1]) : 3000;
+  const port = portIndex !== -1 ? parseInt(args[portIndex + 1]) : 3096;
   const servePath = isSpa ? 'frontend' : 'frontend/pages';
 
   console.log(`
@@ -758,7 +803,7 @@ Commands:
   npx domma-js add view <name>  Add a new view (SPA only)
   npx domma-js setup-ai         Add AI assistance files to existing project
   npx domma-js serve            Start development server with live reload
-    --port <number>             Custom port (default: 3000)
+    --port <number>             Custom port (default: 3096)
 
 Options:
   --help, -h               Show this help message
@@ -781,9 +826,13 @@ Examples:
   npx domma-js add view profile    # Creates profile view with route
 
   # Development server:
-  npx domma-js serve               # Start server (auto-detects MPA/SPA)
-  npx domma-js serve --port 8080   # Start on custom port
-
-Note: Paths are automatically calculated based on folder depth
+  npm start                        # Start server (uses scripts from package.json)
+  npm run serve                    # Same as npm start
+  npm run serve:3096               # Start on port 3096 (explicit)
+  npx domma-js serve               # Direct CLI usage
+  npx domma-js serve --port 3096   # Custom port
+
+Note: After 'npx domma init', use 'npm start' to run the server.
+      Paths are automatically calculated based on folder depth.
 `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-js",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
   "main": "public/dist/domma.min.js",
   "module": "public/dist/domma.esm.js",
@@ -31,6 +31,9 @@
   "type": "module",
   "scripts": {
     "postinstall": "node bin/postinstall.js",
+    "start": "node bin/domma-cli.js serve",
+    "serve": "node bin/domma-cli.js serve",
+    "serve:3096": "node bin/domma-cli.js serve --port 3096",
     "dev": "NODE_ENV=development npm run generate:bundles && rollup -c && node scripts/build-info.js && npm run build:metadata && npm run copy:themes && npm run build:css && npm run build:miniapps && live-server public --port=3001 --open=/index.html",
     "dev:watch": "NODE_ENV=development npm run generate:bundles && rollup -c && node scripts/build-info.js && npm run build:metadata && npm run copy:themes && npm run build:css && npm run build:miniapps && npm run watch:miniapps",
     "build": "npm run generate:bundles && rollup -c && node scripts/build-info.js && npm run build:metadata && npm run copy:themes && npm run build:css && npm run build:css-bundles && npm run build:archives && npm run build:kickstart && npm run build:miniapps",