easy-starter 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "easy-starter",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "A lightweight CLI tool to bootstrap modern fullstack React web projects.",
     "bin": {
         "easy-starter": "./bin/index.js"

package/template/.cursorrules

@@ -90,3 +90,19 @@ export type Database = {
   // CORRECT (custom ID):
   await update("item", "explicit-custom-id", { name: "Custom ID Item", value: 99 });
   ```
+
+---
+
+## 4. Styling & Image Manipulation Guidelines
+
+### CSS / SCSS Implementation
+* **Centralized & Generic**: Implement as many styles as possible in `src/styles.scss` using generic, reusable selectors.
+* **Minimize Inline Styles**: Avoid inline styles (e.g., `style={{ ... }}`) in React components. Keep style declarations in the central SCSS file to maintain design consistency and code quality.
+
+### Image Asset Handling
+* **STRONG PREFERENCE**: It is highly preferred to insert images as `background-image` declarations inside `src/styles.scss` rather than using `<img>` tags in React components wherever possible.
+* **CRITICAL FOR SCSS**: When referencing images inside `src/styles.scss` (e.g., as background-image), always append the `?as=webp` query parameter to convert them to modern WebP format during build, unless the source file is already an `.svg`. Do specify width or height query parameters.
+  * **CORRECT**: `background-image: url("./images/icon.png?as=webp&height=128");`
+* **CRITICAL FOR CODE (React / HTML / JavaScript)**: If you must reference an image path directly within the code (e.g., in `<img src="..." />` or JS variables), you **MUST** only refer to images located inside the `public` directory (and nowhere else).
+  * **CORRECT**: `<img src="/logo.png" />` (when referencing `/public/logo.png`)
+  * **INCORRECT**: `<img src="../src/images/logo.png" />` or importing images directly into React files.

package/template/.github/workflows/deploy.yml

@@ -26,4 +26,7 @@ jobs:
           SSH_HOST: ${{ secrets.SSH_HOST }}
           SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
           SSH_PASSWORD: ${{ secrets.SSH_PASSWORD }}
+          SSH_PATH: ${{ secrets.SSH_PATH }}
+          PM2_APP_NAME: ${{ secrets.PM2_APP_NAME }}
+          SERVER_URL: ${{ secrets.SERVER_URL }}
         run: npm run deploy

package/template/env

@@ -2,9 +2,11 @@ NODE_ENV=development # development/production
 SERVER_PORT=1111
 ADMIN_PASSWORD=admin
 
+SERVER_URL=https://your-production-url.com/
+
 # deploy
 SSH_HOST=[IP_ADDRESS]
 SSH_USERNAME=root
 SSH_PASSWORD=[PASSWORD]
-SERVER_URL=https://your-production-url.com/
+SSH_PATH=/root/easy-starter-app
 PM2_APP_NAME=easy-starter-app

package/template/scripts/deploy.ts

@@ -11,7 +11,7 @@ const password = process.env.SSH_PASSWORD;
 // Configuration for your target server
 const server = process.env.SERVER_URL;
 const pm2AppName = process.env.PM2_APP_NAME;
-const sshPath = resolve("/", "root", pm2AppName || ""); // Path on the remote VPS
+const sshPath = process.env.SSH_PATH; // Path on the remote VPS
 
 const path = resolve(process.cwd()); // Local project path
 const ignoreFiles = [
@@ -26,10 +26,11 @@ const ignoreFiles = [
     ".DS_Store",
 ];
 
-// Ensure credentials are provided
+// Ensure credentials and paths are provided
 if (host === undefined) throw new Error("SSH_HOST environment variable is not defined.");
 if (username === undefined) throw new Error("SSH_USERNAME environment variable is not defined.");
 if (password === undefined) throw new Error("SSH_PASSWORD environment variable is not defined.");
+if (sshPath === undefined) throw new Error("SSH_PATH environment variable is not defined.");
 
 deploy();
 

package/template/server/index.tsx

@@ -4,19 +4,10 @@ import { readFile } from "fs/promises";
 import cors from "cors";
 import express from "express";
 
-// easy-db-node provides a simple local database storing data in JSON files.
-// It's ideal for small to medium projects where setting up a full SQL/NoSQL DB is overkill.
 import easyDBNode from "easy-db-node";
-
-// ssr-hook allows for simple Server-Side Rendering of React components, 
-// ensuring SEO friendliness and faster initial page loads.
 import { renderToHTML } from "ssr-hook/server";
-
-// typed-client-server-api establishes a type-safe RPC-like API between your React frontend
-// and this Express backend, preventing mismatch errors and providing autocomplete.
 import { setAPIBackend } from "typed-client-server-api";
 
-// easy-analytics handles privacy-friendly local analytics collection.
 import { postEasyAnalytics, getEasyAnalytics } from "easy-analytics/server";
 
 import App from "../src/App";
@@ -29,7 +20,7 @@ const LOCALHOST = `http://localhost:${PORT}`;
 // The ORIGIN is used for SEO and by ssr-hook to know where the requests are coming from.
 const ORIGIN = process.env.NODE_ENV === "development"
     ? LOCALHOST
-    : "https://your-production-url.com"; // TODO: Update to your domain
+    : process.env.SERVER_URL;
 
 const INDEX_HTML_PATH = resolve(__dirname, "..", "dist", "index.html");