easy-starter 2.0.0 → 2.1.0

package/README.md

@@ -35,6 +35,7 @@ The generated boilerplate can be configured to contain:
 * **Database:** [`easy-db-node`](https://www.npmjs.com/package/easy-db-node) - A simple, local JSON-based database perfect for small to medium projects where setting up Postgres/MongoDB is overkill.
 * **Routing:** [`easy-page-router`](https://www.npmjs.com/package/easy-page-router) - A lightweight, programmatic routing solution.
 * **Analytics:** [`easy-analytics`](https://www.npmjs.com/package/easy-analytics) - Privacy-friendly, local analytics tracking.
+* **Image Resizing:** [`easy-image-resizer`](https://www.npmjs.com/package/easy-image-resizer) - Express middleware for dynamic image resizing and WebP/JPEG conversion with automatic mtime disk caching.
 * **AI-Friendly (.cursorrules):** Pre-configured, LLM-optimized guidelines in the project root so AI coding assistants (Cursor, Windsurf, Copilot, etc.) immediately understand the codebase conventions, API restrictions, routing patterns, and database operations.
 * **Deployment:** Integrated Github Actions workflow and PM2 deployment script for seamless, automated deployment straight to your own VPS.
 
@@ -46,11 +47,11 @@ When you run `npx easy-starter`, the CLI will prompt you with the following conf
 
 1. **Project name:** Choose the name of the folder and the app.
 2. **User Authentication:** Do you want to add user login/registration widgets? (Installs `easy-user-auth` and nodemailer, generates JWT secrets in `.env`).
-3. **Viewport Width Fix:** Do you want to fix iOS mobile viewport issues by ensuring a minimum width of 600px? (Adds JS viewport resizing listener and sets CSS `min-width`).
+3. **Analytics:** Do you want local visitor analytics? (Installs `easy-analytics`, adds dashboard visualization).
 4. **Admin Dashboard:** Do you want to include `/admin` page? (If Auth is enabled, protects it using user roles. If Auth is disabled, protects it using a static password).
-5. **Analytics:** Do you want local visitor analytics? (Installs `easy-analytics`, adds dashboard visualization).
-6. **SSR Rendering:** Do you want Server-Side Rendering? (Installs `ssr-hook`, configures hydration).
-7. **og:image Generation:** Do you want dynamic `og:image` generation? (Installs `puppeteer` to automatically screenshot URLs for social cards, cached via easy-db).
+5. **SSR Rendering:** Do you want Server-Side Rendering? (Installs `ssr-hook`, configures hydration).
+6. **og:image Generation:** Do you want dynamic `og:image` generation? (Installs `puppeteer` to automatically screenshot URLs for social cards, cached via easy-db).
+7. **Image Resizing:** Do you want dynamic image resizing? (Installs `easy-image-resizer` Express middleware for on-the-fly image resizing and WebP conversion with automatic caching).
 8. **Deployment Script:** Do you want to deploy to your VPS using GitHub Actions? (Installs `node-ssh`, adds SSH deploy script).
 
 ---

package/bin/index.js

@@ -14,11 +14,17 @@ const rl = readline.createInterface({
 const askQuestion = (query) => new Promise(resolve => rl.question(query, resolve));
 
 async function main() {
-  console.log('🚀 Welcome to easy-starter v2.0.0!');
+  console.log('🚀 Welcome to easy-starter v2.1.0!');
 
-  let projectName = process.argv[2];
+  const isYes = process.argv.includes('-y') || process.argv.includes('--yes') || process.argv.includes('--default');
+  const hasFlag = (flag) => process.argv.includes(`--${flag}`);
+  const hasNoFlag = (flag) => process.argv.includes(`--no-${flag}`);
+
+  let args = process.argv.slice(2).filter(arg => !arg.startsWith('-'));
+
+  let projectName = args[0];
   if (!projectName) {
-    projectName = await askQuestion('Enter the project name (e.g., my-awesome-app): ');
+    projectName = isYes ? 'my-app' : await askQuestion('Enter the project name (e.g., my-awesome-app): ');
   }
   projectName = projectName.trim();
 
@@ -28,24 +34,28 @@ async function main() {
     process.exit(1);
   }
 
+  const getAnswer = async (question, flagName) => {
+    if (hasNoFlag(flagName)) return false;
+    if (hasFlag(flagName) || isYes) return true;
+    const ans = await askQuestion(question);
+    return ans.trim().toLowerCase() !== 'n';
+  };
+
   console.log('\n🔒 1. User Authentication & Login (easy-user-auth)');
   console.log('   Provides out-of-the-box user registration, login dialogs, secure cookie-based');
   console.log('   sessions, and forgotten password recovery emails.');
-  const ansAuth = await askQuestion('   Do you want to include user authentication? (y/n) [y]: ');
-  const useAuth = ansAuth.trim().toLowerCase() !== 'n';
+  const useAuth = await getAnswer('   Do you want to include user authentication? (y/n) [y]: ', 'auth');
 
   console.log('\n📊 2. Analytics Tracking (easy-analytics)');
   console.log('   Tracks page visits, referrers, resolutions, and browsers locally without cookies.');
   console.log('   Also captures and records client-side/frontend errors encountered by users.');
   console.log('   If the Admin Dashboard is enabled, it generates interactive visual graphs inside /admin.');
-  const ansAnalytics = await askQuestion('   Do you want to include privacy-friendly analytics? (y/n) [y]: ');
-  const useAnalytics = ansAnalytics.trim().toLowerCase() !== 'n';
+  const useAnalytics = await getAnswer('   Do you want to include privacy-friendly analytics? (y/n) [y]: ', 'analytics');
 
   console.log('\n🛠️  3. Admin Dashboard (/admin)');
   console.log('   A secure section to manage your app. Protected by user authentication roles');
   console.log('   (admin/user) if auth is enabled, or a static environment password if disabled.');
-  const ansAdmin = await askQuestion('   Do you want to include the admin dashboard? (y/n) [y]: ');
-  const useAdmin = ansAdmin.trim().toLowerCase() !== 'n';
+  const useAdmin = await getAnswer('   Do you want to include the admin dashboard? (y/n) [y]: ', 'admin');
 
   let useAdminUsers = false;
   let useAdminErrors = false;
@@ -55,8 +65,7 @@ async function main() {
       console.log('\n👥 3a. Admin User Management');
       console.log('    Allows administrators to list registered users and change their roles');
       console.log('    directly from the admin dashboard.');
-      const ansAdminUsers = await askQuestion('    Do you want to include User Management in the admin panel? (y/n) [y]: ');
-      useAdminUsers = ansAdminUsers.trim().toLowerCase() !== 'n';
+      useAdminUsers = await getAnswer('    Do you want to include User Management in the admin panel? (y/n) [y]: ', 'admin-users');
     } else {
       console.log('\nℹ️  Note: User Management is disabled in the admin panel because it requires User Authentication.');
     }
@@ -65,8 +74,7 @@ async function main() {
       console.log('\n🚨 3b. Admin Error Logging');
       console.log('    Captures frontend/client-side errors (requires easy-analytics) and lists them');
       console.log('    inside the admin panel, including descriptions and collapsible stack traces.');
-      const ansAdminErrors = await askQuestion('    Do you want to include Error Logging in the admin panel? (y/n) [y]: ');
-      useAdminErrors = ansAdminErrors.trim().toLowerCase() !== 'n';
+      useAdminErrors = await getAnswer('    Do you want to include Error Logging in the admin panel? (y/n) [y]: ', 'admin-errors');
     } else {
       console.log('\nℹ️  Note: Error Logging is disabled in the admin panel because it requires');
       console.log('   Analytics Tracking to be enabled.');
@@ -76,26 +84,27 @@ async function main() {
   console.log('\n⚡ 4. Server-Side Rendering (ssr-hook)');
   console.log('   Enables server-side pre-rendering for React. Enhances initial load speeds,');
   console.log('   prevents content flashes, and optimizes your site for search engine crawlers (SEO).');
-  const ansSSR = await askQuestion('   Do you want to enable Server-Side Rendering (SSR)? (y/n) [y]: ');
-  const useSSR = ansSSR.trim().toLowerCase() !== 'n';
+  const useSSR = await getAnswer('   Do you want to enable Server-Side Rendering (SSR)? (y/n) [y]: ', 'ssr');
 
   console.log('\n🖼️  5. Social Preview og:image');
   console.log('   Automatically screenshots and generates social preview card og:images for your pages');
   console.log('   using a headless browser rendering engine (puppeteer) and caches them in the database.');
-  const ansOgImage = await askQuestion('   Do you want to include dynamic og:image generation? (y/n) [y]: ');
-  const useOgImage = ansOgImage.trim().toLowerCase() !== 'n';
+  const useOgImage = await getAnswer('   Do you want to include dynamic og:image generation? (y/n) [y]: ', 'ogimage');
 
   console.log('\n📱 6. Viewport Tuning');
   console.log('   Injects a viewport event listener that forces a minimum width layout (600px)');
   console.log('   for mobile devices, resolving scaling/rendering issues on iOS Safari.');
-  const ansViewport = await askQuestion('   Do you want to fix iOS Safari viewport width issues? (y/n) [y]: ');
-  const useViewport = ansViewport.trim().toLowerCase() !== 'n';
+  const useViewport = await getAnswer('   Do you want to fix iOS Safari viewport width issues? (y/n) [y]: ', 'viewport');
 
-  console.log('\n🚢 7. Deployment Integration (node-ssh)');
+  console.log('\n🖼️  7. Express Middleware Image Resizing (easy-image-resizer)');
+  console.log('   Enables dynamic image resizing and format conversion on the fly');
+  console.log('   via URL query parameters (e.g. /images/icon.png?w=192&format=webp) with automatic mtime caching.');
+  const useResizer = await getAnswer('   Do you want to include dynamic image resizing? (y/n) [y]: ', 'resizer');
+
+  console.log('\n🚢 8. Deployment Integration (node-ssh)');
   console.log('   Configures deploy scripts and GitHub Actions workflows to build and transfer your code');
   console.log('   via SSH straight to your own VPS (Virtual Private Server), where it runs managed by PM2.');
-  const ansDeploy = await askQuestion('   Do you want to include VPS deploy scripts? (y/n) [y]: ');
-  const useDeploy = ansDeploy.trim().toLowerCase() !== 'n';
+  const useDeploy = await getAnswer('   Do you want to include VPS deploy scripts? (y/n) [y]: ', 'deploy');
 
   rl.close();
 
@@ -112,7 +121,18 @@ async function main() {
   const templatePath = path.join(__dirname, '..', 'template');
 
   // Ignored files based on configuration
-  const ignoreList = ['env'];
+  const ignoreList = [
+    'env',
+    'node_modules',
+    'dist',
+    'cache',
+    'easy-db',
+    'easy-db-files',
+    'easy-db-backup',
+    '.vite',
+    'package-lock.json',
+    '.DS_Store'
+  ];
   if (!useDeploy) {
     ignoreList.push('scripts');
     ignoreList.push('.github');
@@ -124,6 +144,9 @@ async function main() {
   if (!useAdmin) {
     ignoreList.push('admin');
   }
+  if (!useResizer) {
+    ignoreList.push('Img.tsx');
+  }
 
   function copyFolderSync(from, to, ignoreFiles = []) {
     fs.mkdirSync(to, { recursive: true });
@@ -210,6 +233,10 @@ async function main() {
     content = handleBlock(content, 'NO_SSR', !useSSR);
 
     content = handleBlock(content, 'OGIMAGE', useOgImage);
+    content = handleBlock(content, 'NO_OGIMAGE', !useOgImage);
+
+    content = handleBlock(content, 'RESIZER', useResizer);
+    content = handleBlock(content, 'NO_RESIZER', !useResizer);
 
     return content;
   }
@@ -241,25 +268,25 @@ async function main() {
     const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
     pkg.name = projectName;
 
-    if (useAnalytics) {
-      pkg.dependencies['easy-analytics'] = '^1.0.1';
+    if (!useAnalytics) {
+      delete pkg.dependencies['easy-analytics'];
     }
-    if (useAuth) {
-      pkg.dependencies['easy-user-auth'] = '^1.0.6';
-      pkg.dependencies['nodemailer'] = '^7.0.9';
-      pkg.devDependencies['@types/nodemailer'] = '^6.4.15';
+    if (!useAuth) {
+      delete pkg.dependencies['easy-user-auth'];
+      delete pkg.dependencies['nodemailer'];
+      if (pkg.devDependencies) delete pkg.devDependencies['@types/nodemailer'];
     }
-    if (useSSR) {
-      pkg.dependencies['ssr-hook'] = '^0.2.0';
+    if (!useSSR) {
+      delete pkg.dependencies['ssr-hook'];
     }
-    if (useOgImage) {
-      pkg.dependencies['puppeteer'] = '^25.3.0';
+    if (!useOgImage) {
+      delete pkg.dependencies['puppeteer'];
     }
-    if (useDeploy) {
-      pkg.devDependencies['node-ssh'] = '^13.2.1';
-      pkg.scripts = pkg.scripts || {};
-      pkg.scripts['deploy'] = 'tsx scripts/deploy.ts';
-    } else {
+    if (!useResizer) {
+      delete pkg.dependencies['easy-image-resizer'];
+    }
+    if (!useDeploy) {
+      if (pkg.devDependencies) delete pkg.devDependencies['node-ssh'];
       if (pkg.scripts && pkg.scripts.deploy) {
         delete pkg.scripts.deploy;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "easy-starter",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "A lightweight, production-ready fullstack React boilerplate generator with Vite v8, TypeScript 7, server-side rendering (SSR), local analytics, SSH deploy script, PM2, and secure user authentication.",
     "bin": {
         "easy-starter": "./bin/index.js"

package/template/.cursorrules

@@ -99,17 +99,42 @@ export type Database = {
 * **Centralized & Generic**: Implement as many styles as possible in `src/styles.css` using generic, reusable selectors.
 * **Minimize Inline Styles**: Avoid inline styles (e.g., `style={{ ... }}`) in React components. Keep style declarations in the central CSS file to maintain design consistency and code quality.
 
-### Image Asset Handling
-* **Use `vite-imagetools` Exclusively in CSS:**
-  - When loading local images for styling and background layouts, reference them exclusively inside CSS `url()` declarations, appending `vite-imagetools` query parameters (such as `format=webp` and dimensions `w=`) to automatically optimize them.
+/* --- RESIZER START --- */
+### Image Asset Handling (`easy-image-resizer` & `<Img />` Component)
+* **Dynamic Image Resizing via Express Middleware (`easy-image-resizer`):**
+  - All image assets (logos, icons, banners) must be placed inside `/public` (e.g. `/public/images/icon.png`).
+  - Request dynamically resized, cropped, or format-converted images on the fly via URL query parameters in CSS `url()` or via `<Img />` component props.
   - **CORRECT (CSS):**
     ```css
     .hero-banner {
-        background-image: url("./assets/hero.jpg?format=webp&w=1200");
+        background-image: url("/images/hero.png?w=1200&format=webp&q=85");
     }
     ```
 * **JavaScript Imports for Images are Forbidden:**
   - Do **NOT** import image assets inside `.js`, `.ts`, or `.tsx` files (e.g. do NOT write `import hero from "./hero.jpg"`).
-* **Referencing Images in TSX/React (Only via `/public`):**
-  - If you need to reference or display an image directly inside React TSX components (e.g., standard `<img>` tags or SEO metadata), **you must place the pre-optimized WebP image inside the `/public` directory** and reference it using a standard absolute URL path.
-  - **CORRECT (TSX):** `<img src="/images/logo.webp" alt="Logo" />` (with the file stored inside `/public/images/logo.webp`).
+* **Use `<Img />` Component for Images in React TSX (Do NOT use standard `<img>` tags):**
+  - When displaying images inside React TSX components, **always use the `<Img />` component** imported from `../components/Img` (or `./components/Img`) instead of native HTML `<img>` tags.
+  - The `<Img />` component automatically sets default format to `"webp"` and constructs resizer query parameters.
+  - Supported props on `<Img />`:
+    - `src`: Original path to image inside `/public` (e.g. `"/images/icon.png"`)
+    - `w` or `width`: Target width (px)
+    - `h` or `height`: Target height (px)
+    - `mw` or `maxWidth`: Maximum width (px)
+    - `mh` or `maxHeight`: Maximum height (px)
+    - `format` or `type`: `"webp"` (default), `"jpeg"`, or `"png"`
+    - `q` or `quality`: 1 to 100
+  - **CORRECT (TSX):**
+    ```tsx
+    import { Img } from "../components/Img";
+
+    <Img src="/images/logo.png" w={300} h={100} alt="Application Logo" />
+    ```
+/* --- RESIZER END --- */
+/* --- NO_RESIZER START --- */
+### Image Asset Handling
+* **JavaScript Imports for Images are Forbidden:**
+  - Do **NOT** import image assets inside `.js`, `.ts`, or `.tsx` files (e.g. do NOT write `import hero from "./hero.jpg"`).
+* **Referencing Images in TSX/React (via `/public`):**
+  - Place original images in `/public` and reference them using standard absolute URL paths.
+  - **CORRECT (TSX):** `<img src="/images/logo.png" alt="Logo" />`
+/* --- NO_RESIZER END --- */

package/template/README.md

@@ -22,6 +22,9 @@ This project was bootstrapped with `easy-starter`, giving you maximum freedom wi
 <!-- --- OGIMAGE START --- -->
 * **og:image Generation**: Dynamic page screenshotting for social previews using headless `puppeteer`.
 <!-- --- OGIMAGE END --- -->
+<!-- --- RESIZER START --- -->
+* **Image Resizing**: Dynamic image resizing and WebP/JPEG conversion on the fly via [`easy-image-resizer`](https://www.npmjs.com/package/easy-image-resizer) with automatic disk caching.
+<!-- --- RESIZER END --- -->
 
 ---
 
@@ -135,7 +138,51 @@ export default function Index() {
 ```
 <!-- --- NO_SSR END --- -->
 
-### 3. AI Integration (`.cursorrules`)
+<!-- --- RESIZER START --- -->
+### 3. Dynamic Image Resizing (`easy-image-resizer`)
+
+All images stored in `/public` (e.g., `/public/images/logo.png`) can be dynamically resized, cropped, and converted on the fly using `easy-image-resizer` Express middleware.
+
+#### Using `<Img />` Component in React (TSX)
+
+Use the `<Img />` component imported from `../components/Img` instead of standard `<img>` tags. It automatically appends query parameters and defaults to `"webp"` format for optimal performance:
+
+```tsx
+import { Img } from "../components/Img";
+
+export default function MyComponent() {
+    return (
+        <Img
+            src="/images/logo.png"
+            w={300}
+            h={150}
+            format="webp"
+            quality={85}
+            alt="App Logo"
+        />
+    );
+}
+```
+
+Available props on `<Img />`:
+* `w` or `width`: Target width in pixels
+* `h` or `height`: Target height in pixels
+* `mw` or `maxWidth`, `mh` or `maxHeight`: Max dimension constraints
+* `format` or `type`: `"webp"` (default), `"jpeg"`, or `"png"`
+* `q` or `quality`: Image quality (1-100)
+
+#### Using Image Resizing in CSS
+
+You can also use URL query parameters directly inside CSS `url()` declarations:
+
+```css
+.hero-banner {
+    background-image: url("/images/hero.png?w=1200&format=webp&q=85");
+}
+```
+<!-- --- RESIZER END --- -->
+
+### 4. AI Integration (`.cursorrules`)
 
 This template includes a pre-configured `.cursorrules` file in the root. If you develop using AI assistants such as Cursor, Windsurf, or GitHub Copilot, they will automatically read this file to understand the specific conventions of `easy-starter`.
 

package/template/gitignore

@@ -1,6 +1,7 @@
 .vite/
 node_modules/
 dist/
+cache/
 easy-db/
 easy-db-files/
 easy-db-backup/

package/template/index.html

@@ -3,9 +3,9 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="apple-touch-icon" sizes="180x180" href="/images/icon-180.png" />
-  <link rel="icon" type="image/png" sizes="32x32" href="/images/icon-32.png" />
-  <link rel="icon" type="image/png" sizes="16x16" href="/images/icon-16.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/icon.png?w=180&h=180&format=webp" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/icon.png?w=32&h=32" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/icon.png?w=16&h=16" />
   <link rel="manifest" href="/site.webmanifest" />
 </head>
 <body>

package/template/package.json

@@ -11,24 +11,31 @@
   },
   "dependencies": {
     "cors": "^2.8.6",
+    "easy-analytics": "^1.0.1",
     "easy-db-node": "^3.0.1",
+    "easy-image-resizer": "^2.0.1",
     "easy-page-router": "^0.2.1",
+    "easy-user-auth": "^1.1.0",
     "express": "^5.2.1",
+    "nodemailer": "^7.0.9",
+    "puppeteer": "^25.3.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "ssr-hook": "^0.2.0",
     "typed-client-server-api": "^1.1.0"
   },
   "devDependencies": {
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
     "@types/node": "^24.0.0",
+    "@types/nodemailer": "^6.4.15",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.3",
     "concurrently": "^9.2.1",
+    "node-ssh": "^13.2.1",
     "tsx": "^4.21.0",
     "typescript": "^7.0.0",
-    "vite": "^8.1.5",
-    "@vitejs/plugin-react": "^6.0.3",
-    "vite-imagetools": "^10.0.1"
+    "vite": "^8.1.5"
   }
-}
+}

package/template/public/site.webmanifest

@@ -8,33 +8,33 @@
     "background_color": "#09090b",
     "icons": [
         {
-            "src": "/images/icon-16.png",
+            "src": "/images/icon.png?w=16&h=16",
             "sizes": "16x16",
             "type": "image/png",
             "purpose": "maskable"
         },
         {
-            "src": "/images/icon-32.png",
+            "src": "/images/icon.png?w=32&h=32",
             "sizes": "32x32",
             "type": "image/png",
             "purpose": "maskable"
         },
         {
-            "src": "/images/icon-180.png",
+            "src": "/images/icon.png?w=180&h=180&format=webp",
             "sizes": "180x180",
-            "type": "image/png",
+            "type": "image/webp",
             "purpose": "maskable"
         },
         {
-            "src": "/images/icon-192.png",
+            "src": "/images/icon.png?w=192&h=192&format=webp",
             "sizes": "192x192",
-            "type": "image/png",
+            "type": "image/webp",
             "purpose": "maskable"
         },
         {
-            "src": "/images/icon-512.png",
+            "src": "/images/icon.png?w=512&h=512&format=webp",
             "sizes": "512x512",
-            "type": "image/png",
+            "type": "image/webp",
             "purpose": "maskable"
         }
     ]

package/template/scripts/deploy.ts

@@ -17,7 +17,8 @@ const path = resolve(process.cwd()); // Local project path
 const ignoreFiles = [
     ".git",
     ".github",
-    ".parcel-cache",
+    ".vite",
+    "dist",
     "node_modules",
     "scripts",
     "easy-db",
@@ -70,7 +71,7 @@ async function deploy() {
     const timeServerOff = new Date().getTime();
 
     console.log(`Removing old build...`);
-    await sshExec(ssh, "rm -rf .parcel-cache", "Failed to remove .parcel-cache folder.");
+    await sshExec(ssh, "rm -rf .vite", "Failed to remove .vite folder.");
     await sshExec(ssh, "rm -rf dist", "Failed to remove dist folder.");
     console.log(`✔ Old build removed.\n`);