aaex-cli 1.1.0 → 1.2.0

package/create-aaex-app.js

@@ -60,8 +60,9 @@ async function createPackageJson() {
         "npm run build:client && npm run build:server && npm run build:api",
       "build:client": "vite build --outDir dist/client",
       "build:server":
-        "vite build --ssr .aaex/framework/server-entry.tsx --outDir dist/server",
+        "vite build --ssr .aaex/framework/entry-server.tsx --outDir dist/server",
       "build:api": "tsc --project tsconfig.api.json",
+      "build:utils": "tsc --project tsconfig.utils.json",
       preview: "cross-env NODE_ENV=production node .aaex/server/server.js",
     },
     dependencies: {
@@ -73,6 +74,10 @@ async function createPackageJson() {
       compression: "^1.8.1",
       sirv: "^3.0.2",
       "aaex-file-router": "^1.4.4",
+      jsonwebtoken: "^9.0.3",
+      mongodb: "^7.0.0",
+      bcrypt: "^6.0.0",
+      dotenv: "^17.2.3",
     },
     devDependencies: {
       typescript: "~5.9.2",
@@ -82,6 +87,8 @@ async function createPackageJson() {
       "@vitejs/plugin-react": "^5.0.2",
       vite: "^7.1.5",
       "cross-env": "^10.0.0",
+      "@types/bcrypt": "^6.0.0",
+      "@types/jsonwebtoken": "^9.0.10",
     },
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aaex-cli",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Command line interface for creating aaexjs app",
   "license": "ISC",
   "author": "",
@@ -12,8 +12,16 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
+    "@types/bcrypt": "^6.0.0",
+    "@types/express": "^5.0.6",
+    "@types/jsonwebtoken": "^9.0.10",
+    "@types/node": "^24.10.1",
     "@vitejs/plugin-react": "^5.1.1",
     "aaex-file-router": "^1.4.5",
+    "bcrypt": "^6.0.0",
+    "express": "^5.2.1",
+    "jsonwebtoken": "^9.0.3",
+    "mongodb": "^7.0.0",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-router": "^7.10.1",

package/template/.aaex/BuildApiRoutes.js

@@ -1,53 +1,67 @@
 import { FileScanner } from "aaex-file-router/core";
 import { match } from "path-to-regexp";
 
-// --- Scan API folder ---
-const apiScanner = new FileScanner("./src/api");
+// --- scan folders ---
+//wrapper for the FilesScanner and output data
+async function scanApiFolder(folder) {
+  const scanner = new FileScanner(folder);
+  return await scanner.get_file_data();
+}
+
+const userApiFolder = "src/api";
 
-const files = await apiScanner.get_file_data();
+const internalApiFolder = ".aaex/api";
 
-const routes = BuildApiRoutes(files);
+//collect file data as easily parsed arrays
+const [userFiles, internalFiles] = await Promise.all([
+  scanApiFolder(userApiFolder),
+  scanApiFolder(internalApiFolder),
+]);
 
-export default routes;
+// --- combine files ---
+const fileMap = new Map();
+internalFiles.forEach((f) => fileMap.set(f.relative_path, f));
+userFiles.forEach((f) => fileMap.set(f.relative_path, f)); //overrides internal api with user defined routes
+const combinedFiles = Array.from(fileMap.values());
 
-// --- Build routes from file tree ---
-function BuildApiRoutes(files) {
+// --- build route list ---
+/**Builds route object from the scanned files */
+function buildApiRoutes(files) {
   const routes = [];
 
   function walk(node, currentPath) {
+    //recursivly iterate over child routes
     if (node.isDirectory) {
-      node.children?.forEach((child) => {
-        walk(child, currentPath + "/" + node.name);
-      });
+      node.children?.forEach((c) => walk(c, currentPath + "/" + node.name));
       return;
     }
-
     const filePath = currentPath + "/" + node.name;
-
+    //build route path from filePath
     let route = filePath
-      .replace(/^.*src\/api/, "/api") // replace root
-      .replace(/\.ts$/, "")           // remove extension
-      .replace(/\[(.+?)\]/g, ":$1")   // dynamic params
-      .replace("/index", "");         // remove index from end
-
-    routes.push({
-      route,
-      filePath: node.relative_path,
-    });
+      .replace(/^.*(src\/api|api)/, "/api") //removed parent folder like src
+      .replace(/\.ts|js$/, "") //removes file extension
+      .replace(/\[(.+?)\]/g, ":$1") //converts [slug] to :slug
+      .replace("/index", "");
+
+    routes.push({ route, filePath: node.relative_path });
   }
 
-  files.forEach((f) => walk(f, ""));
+  files.forEach((file) => walk(file, ""));
   return routes;
 }
 
-// --- Match path to route ---
-export function PathToRoute(path, routes) {
+const routes = buildApiRoutes(combinedFiles);
+
+// --- match path to route ---
+/** Matches the given path to API routes generated from the api folder + the aaex/api folder*/
+function pathToRoute(pathname) {
   for (const r of routes) {
     const matcher = match(r.route, { decode: decodeURIComponent });
-    const matched = matcher(path); // pass full path including /api
-    if (matched) {
-      return { route: r, params: matched.params }; // return params for dynamic segments
-    }
+    const matched = matcher(pathname);
+    if (matched) return { route: r, params: matched.params };
   }
   return null;
 }
+
+// --- export ---
+export { routes, pathToRoute };

package/template/.aaex/api/auth/login.ts

@@ -0,0 +1,57 @@
+import { connectToDatabase } from "../../framework/database/mongodb";
+import type { Request, Response } from "express";
+import bcrypt from "bcrypt";
+import jwt from "jsonwebtoken";
+import { LoginUser } from "../../../src/models/User";
+
+export const POST = async (req: Request, res: Response) => {
+  const { email, password }: LoginUser = req.body;
+
+  if (!email || !password) {
+    return res.status(400).json({ error: "Missing fields!" });
+  }
+
+  const { db } = await connectToDatabase();
+
+  if (!process.env.JWT_SECRET) {
+    console.error("Missing: JWT_SECRET from environment variables");
+    return res
+      .status(500)
+      .json({ error: "Internal server error! Try again later" });
+  }
+
+  const normalizedEmail = email.trim().toLowerCase();
+  const user = await db.collection("users").findOne({ email: normalizedEmail });
+
+  if (!user) {
+    return res.status(400).json({ error: "Invalid email or password" });
+  }
+
+  const compared = await bcrypt.compare(password, user.password);
+
+  if (!compared) {
+    return res.status(400).json({ error: "Invalid email or password" });
+  }
+
+  const expiration = process.env.JWT_EXP ?? "24h";
+
+  const token = jwt.sign(
+    {
+      id: user._id.toString(),
+      email: user.email,
+      username: user.username,
+    },
+    process.env.JWT_SECRET as string,
+    { expiresIn: expiration as any } //fixes stupid thing where it wont accept the sring variable because its not number | ms.stringvlue | undefined
+  );
+
+  return res.status(200).json({
+    ok: true,
+    user: {
+      id: user._id.toString(),
+      name: user.username,
+      email: user.email,
+    },
+    token,
+  });
+};

package/template/.aaex/api/auth/register.ts

@@ -0,0 +1,34 @@
+import { Request, Response } from "express";
+import bcrypt from "bcrypt";
+import { connectToDatabase } from "../../framework/database/mongodb";
+import { CreateUser } from "../../../src/models/User";
+export const POST = async (req: Request, res: Response) => {
+
+  const { email, username, password, confirmPass }: CreateUser = req.body;
+
+  if (!username || !email || !password || !confirmPass)
+    return res.status(400).json({ error: "Missing fields" });
+
+  if (password !== confirmPass)
+    return res.status(400).json({ error: "Passwords do not match" });
+
+  const { db } = await connectToDatabase();
+
+  const exists = await db.collection("users").findOne({ email });
+  if (exists)
+    return res
+      .status(409)
+      .json({ error: "User with that email already exists" });
+
+  const salt = 10;
+  const hashed = await bcrypt.hash(password, salt);
+
+  await db.collection("users").insertOne({
+    username,
+    email,
+    password: hashed,
+    createdAt: new Date(),
+  });
+
+  return res.status(201).json({ ok: true });
+};

package/template/.aaex/api/auth/validate.ts

@@ -0,0 +1,18 @@
+import jwt from "jsonwebtoken";
+import type { Request, Response } from "express";
+
+export async function POST(req: Request, res: Response) {
+  const { token } = req.body;
+
+  if (!process.env.JWT_SECRET) {
+    console.error("Missing: JWT_SECRET from environment");
+    return res.status(500).json({error: "Internal server error!"});
+  }
+
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    return res.status(200).json({ valid: true, user: decoded });
+  } catch (err) {
+    return res.status(401).json({ valid: false });
+  }
+}

package/template/.aaex/framework/database/mongodb.ts

@@ -0,0 +1,29 @@
+import { MongoClient, Db } from "mongodb";
+
+const MONGO_URI = process.env.MONGO_URI || "mongodb://localhost:27017";
+const DB_NAME = process.env.DB_NAME || "mydatabase";
+
+if (!MONGO_URI) {
+  throw new Error("Please define the MONGO_URI environment variable inside .env");
+}
+
+let cachedClient: MongoClient | null = null;
+let cachedDb: Db | null = null;
+
+export async function connectToDatabase(): Promise<{ client: MongoClient; db: Db }> {
+  // Return cached connection if it exists
+  if (cachedClient && cachedDb) {
+    return { client: cachedClient, db: cachedDb };
+  }
+
+  const client = new MongoClient(MONGO_URI);
+  await client.connect();
+  const db = client.db(DB_NAME);
+
+  cachedClient = client;
+  cachedDb = db;
+
+  console.log("MongoDB connected:", DB_NAME);
+
+  return { client, db };
+}

package/template/.aaex/framework/entry-server.tsx

@@ -4,7 +4,7 @@ import { StaticRouter } from "react-router";
 import App from "../../src/App";
 
 export function render(_url: string) {
-  const url = `/${_url}`;
+  const url = `${_url}`;
 
   // call your SSR function or API here and pass the result as props
 

package/template/.aaex/server/server.js

@@ -2,15 +2,17 @@ import fs from "node:fs/promises";
 import express from "express";
 import { pathToFileURL } from "node:url";
 import path from "node:path";
+import dotenv from "dotenv";
+dotenv.config();
 
 // server.js is now in .aaex/server/
-const frameworkRoot = path.resolve(".aaex"); // absolute path to .aaex
 const projectRoot = path.resolve("."); // root of the project
 
 // Import BuildApiRoutes
-const { default: apiRoutes, PathToRoute } = await import(
-  pathToFileURL(`${frameworkRoot}/BuildApiRoutes.js`).href
-);
+import * as BuildApiRoutes from "../BuildApiRoutes.js";
+
+const apiRoutes = BuildApiRoutes.default; // default export
+const PathToRoute = BuildApiRoutes.pathToRoute; // named export
 
 // Constants
 const isProduction = process.env.NODE_ENV === "production";
@@ -46,14 +48,16 @@ if (!isProduction) {
   );
 }
 
+// parse JSON bodies
+app.use(express.json());
+
+// parse URL-encoded bodies (optional, for form POSTs)
+app.use(express.urlencoded({ extended: true }));
+
 // API routing
 app.use("/api", async (req, res) => {
-  console.log(req.path);
-
   const routeMatch = PathToRoute(req.path, apiRoutes);
 
-  console.log(routeMatch);
-
   if (!routeMatch)
     return res.status(404).json({ error: "API route not found" });
 
@@ -62,7 +66,11 @@ app.use("/api", async (req, res) => {
 
   if (!isProduction) {
     // DEV: Vite handles TS/JS loading
-    modulePath = `/src/api${route.filePath.replace(/^src\/api/, "")}`;
+    if (route.filePath.split("/")[0] == ".aaex") {
+      modulePath = `${route.filePath.replace(/^src\/api/, "")}`;
+    } else {
+      modulePath = `/src/api${route.filePath.replace(/^src\/api/, "")}`;
+    }
   } else {
     // PROD: bundled JS
     modulePath = pathToFileURL(
@@ -93,9 +101,11 @@ app.use("/api", async (req, res) => {
 });
 
 // SSR HTML
-app.use("*all", async (req, res) => {
+app.use(/.*/, async (req, res) => {
   try {
-    const url = req.originalUrl.replace(base, "");
+    let url = req.originalUrl;
+
+    console.log("url", url);
 
     let template;
     let render;

package/template/.aaex/utils/ServerLoadCssImports.ts

@@ -0,0 +1,51 @@
+//credit to https://github.com/vitejs/vite/issues/16515
+
+import type {Plugin, ViteDevServer} from 'vite';
+
+const virtualCssPath = '/@virtual:ssr-css.css';
+
+const collectedStyles = new Map<string, string>();
+
+export function pluginSsrDevFoucFix(): Plugin {
+  let server: ViteDevServer;
+
+  return {
+    name: 'ssr-dev-FOUC-fix',
+    apply: 'serve',
+    transform(code: string, id: string) {
+      if (id.includes('node_modules')) return null;
+      if (id.includes('.css')) {
+        collectedStyles.set(id, code);
+      }
+      return null;
+    },
+    configureServer(server_) {
+      server = server_;
+
+      server.middlewares.use((req, _res, next) => {
+        if (req.url === virtualCssPath) {
+          _res.setHeader('Content-Type', 'text/css');
+          _res.write(Array.from(collectedStyles.values()).join('\n'));
+          _res.end();
+          return;
+        }
+        next();
+      });
+    },
+
+    transformIndexHtml: {
+      handler: async () => {
+        return [
+          {
+            tag: 'link',
+            injectTo: 'head',
+            attrs: {
+              rel: 'stylesheet',
+              href: virtualCssPath,
+            },
+          },
+        ];
+      },
+    },
+  };
+}

package/template/.aaex/utils/cookies.ts

@@ -0,0 +1,63 @@
+export function setCookie(
+  name: string,
+  value: string,
+  days = 7,
+  options: {
+    path?: string;
+    secure?: boolean;
+    sameSite?: "Strict" | "Lax" | "None";
+    domain?: string;
+  } = {}
+) {
+  const maxAge = days * 24 * 60 * 60;
+  const encoded = encodeURIComponent(value);
+
+  let cookie = `${name}=${encoded}; max-age=${maxAge}; path=${
+    options.path ?? "/"
+  }`;
+
+  if (options.secure) cookie += "; secure";
+  if (options.sameSite) cookie += `; samesite=${options.sameSite}`;
+  if (options.domain) cookie += `; domain=${options.domain}`;
+
+  document.cookie = cookie;
+}
+export function getCookie(name: string) {
+  const cookies = document.cookie.split("; ");
+
+  for (const c of cookies) {
+    const [key, ...rest] = c.split("=");
+    if (key === name) {
+      return decodeURIComponent(rest.join("="));
+    }
+  }
+
+  return null;
+}
+
+function cookieToJSON(cookie: string) {
+  const parts = cookie.split("; ");
+  const result: Record<string, string> = {};
+
+  for (const part of parts) {
+    const [key, ...rest] = part.split("=");
+    result[key] = rest.join("=");
+  }
+
+  return result;
+}
+
+export function getCookieAsJSON(name: string) {
+  const raw = getCookie(name);
+  if (!raw) return null;
+  return cookieToJSON(raw);
+}
+
+export function deleteCookie(
+  name: string,
+  options: { path?: string; domain?: string } = {}
+) {
+  let cookie = `${name}=; max-age=0; path=${options.path ?? "/"}`;
+  if (options.domain) cookie += `; domain=${options.domain}`;
+  document.cookie = cookie;
+}

package/template/.env

@@ -0,0 +1,4 @@
+# edit to fit your needs
+MONGO_URI="mongodb://localhost:27018/"
+DB_NAME="mydatabase"
+JWT_SECRET="your-jwt-secret"

package/template/index.html

@@ -1,9 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./src/index.css" />
     <title>AaExJS</title>
     <!--app-head-->
   </head>

package/template/src/hooks/useAuth.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { getCookie } from "../../.aaex/utils/cookies";
+import { CookieUser } from "../models/User";
+
+export function useAuth() {
+  const [user, setUser] = useState<CookieUser>({
+    username: "",
+    email: "",
+    id: "",
+  });
+  const [loading, setLoading] = useState(true);
+  const [valid, setValid] = useState(false);
+
+  useEffect(() => {
+    async function checkAuth() {
+      const token = getCookie("token");
+      if (!token) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const res = await fetch("/api/auth/validate", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token }),
+        });
+
+        const data = await res.json();
+
+        if (data.valid) {
+          setValid(true);
+          setUser(data.user);
+        } else {
+          setValid(false);
+        }
+      } catch (err) {
+        setValid(false);
+      }
+
+      setLoading(false);
+    }
+
+    checkAuth();
+  }, []);
+
+  return { user, valid, loading };
+}

package/template/src/index.css

@@ -14,6 +14,13 @@
   -webkit-text-size-adjust: 100%;
 }
 
+#root {
+  /* centeres all content along the x-axis */
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 a {
   font-weight: 500;
   color: #646cff;

package/template/src/models/User.ts

@@ -0,0 +1,13 @@
+export type User = {
+  id: string;
+  email: string;
+  username: string;
+  password: string;
+  confirmPass: string;
+};
+
+export type CreateUser = Omit<User, "id">; //should not be edited
+
+export type LoginUser = Pick<User, "email" | "password">; //should not be edited
+
+export type CookieUser = Omit<User, "password" | "confirmPass">;

package/template/src/pages/index.tsx

@@ -1,3 +1,19 @@
+import { useAuth } from "../hooks/useAuth";
+import { FileLink } from "aaex-file-router";
+import { FileRoutes } from "../routeTypes";
+
 export default function Home() {
-  return <>Hello AaEx</>;
+  const { user, valid, loading } = useAuth();
+
+  console.log(user, valid, loading);
+
+  if (loading) return <p>Checking authentication...</p>;
+  if (!valid)
+    return (
+      <p>
+        You are not logged in! <br/> <FileLink<FileRoutes> to="/login">Login</FileLink>
+      </p>
+    );
+
+  return <p>Welcome, {user ? user.username : ""}</p>;
 }

package/template/src/pages/login.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { setCookie } from "../../.aaex/utils/cookies";
+import { LoginUser } from "../models/User";
+
+export default function Login() {
+  const [fields, setFields] = useState<LoginUser>({
+    email: "",
+    password: "",
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFields((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(fields),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Invalid credentials");
+      } else {
+        setSuccess("Logged in!");
+
+        // Store token + user in cookies
+        setCookie("token", data.token);
+        setCookie("user", JSON.stringify(data.user));
+
+        // Optional: redirect
+        window.location.href = "/";
+      }
+    } catch (err) {
+      setError("Server error");
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div style={styles.page}>
+      <form onSubmit={handleSubmit} style={styles.card}>
+        <h2 style={styles.title}>Login</h2>
+
+        <input
+          name="email"
+          type="email"
+          placeholder="Email"
+          value={fields.email}
+          onChange={handleChange}
+          required
+          style={styles.input}
+        />
+
+        <input
+          name="password"
+          type="password"
+          placeholder="Password"
+          value={fields.password}
+          onChange={handleChange}
+          required
+          style={styles.input}
+        />
+
+        <button type="submit" disabled={loading} style={styles.button}>
+          {loading ? "Logging in..." : "Login"}
+        </button>
+
+        {error && <div style={styles.error}>{error}</div>}
+        {success && <div style={styles.success}>{success}</div>}
+      </form>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  page: {
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "20px",
+  },
+  card: {
+    width: "100%",
+    maxWidth: "420px",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 8px 20px rgba(0,0,0,0.06)",
+    display: "flex",
+    flexDirection: "column",
+    gap: "15px",
+  },
+  title: {
+    textAlign: "center",
+    marginBottom: "5px",
+    fontSize: "1.5rem",
+  },
+  input: {
+    padding: "12px 15px",
+    borderRadius: "8px",
+    border: "1px solid #ddd",
+    fontSize: "1rem",
+    outline: "none",
+    transition: "all 0.2s",
+  },
+  button: {
+    marginTop: "10px",
+    padding: "12px",
+    background: "#4f46e5",
+    color: "white",
+    border: "none",
+    fontSize: "1rem",
+    borderRadius: "8px",
+    cursor: "pointer",
+    transition: "0.2s",
+  },
+  error: {
+    marginTop: "10px",
+    color: "red",
+    textAlign: "center",
+    fontSize: "0.9rem",
+  },
+  success: {
+    marginTop: "10px",
+    color: "green",
+    textAlign: "center",
+    fontSize: "0.9rem",
+  },
+};

package/template/src/pages/register.tsx

@@ -0,0 +1,168 @@
+import { useState } from "react";
+import { CreateUser } from "../models/User";
+
+export default function Register() {
+  const [fields, setFields] = useState<CreateUser>({
+    email: "",
+    password: "",
+    confirmPass: "",
+    username: "",
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setFields((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+    setLoading(true);
+
+    if (fields.password !== fields.confirmPass) {
+      setError("Passwords do not match.");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const res = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(fields),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Unknown error");
+      } else {
+        setSuccess("Account created successfully!");
+      }
+    } catch (err) {
+      setError("Server error");
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div style={styles.page}>
+      <form onSubmit={handleSubmit} style={styles.card}>
+        <h2 style={styles.title}>Register</h2>
+
+        <input
+          name="email"
+          type="email"
+          placeholder="Email"
+          value={fields.email}
+          onChange={handleChange}
+          required
+          style={styles.input}
+        />
+
+        <input
+          name="username"
+          type="text"
+          placeholder="Username"
+          value={fields.username}
+          onChange={handleChange}
+          required
+          style={styles.input}
+        />
+
+        <input
+          name="password"
+          type="password"
+          placeholder="Password"
+          value={fields.password}
+          onChange={handleChange}
+          required
+          style={styles.input}
+        />
+
+        <input
+          name="confirmPass"
+          type="password"
+          placeholder="Confirm Password"
+          value={fields.confirmPass}
+          onChange={handleChange}
+          required
+          style={styles.input}
+        />
+
+        <button type="submit" disabled={loading} style={styles.button}>
+          {loading ? "Registering..." : "Register"}
+        </button>
+
+        {error && <div style={styles.error}>{error}</div>}
+        {success && <div style={styles.success}>{success}</div>}
+      </form>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  page: {
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "20px",
+  },
+  card: {
+    width: "100%",
+    maxWidth: "420px",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 8px 20px rgba(0,0,0,0.06)",
+    display: "flex",
+    flexDirection: "column",
+    gap: "15px",
+  },
+  title: {
+    textAlign: "center",
+    marginBottom: "5px",
+    fontSize: "1.5rem",
+  },
+  input: {
+    padding: "12px 15px",
+    borderRadius: "8px",
+    border: "1px solid #ddd",
+    fontSize: "1rem",
+    outline: "none",
+    transition: "all 0.2s",
+  },
+  button: {
+    marginTop: "10px",
+    padding: "12px",
+    background: "#4f46e5",
+    color: "white",
+    border: "none",
+    fontSize: "1rem",
+    borderRadius: "8px",
+    cursor: "pointer",
+    transition: "0.2s",
+  },
+  error: {
+    marginTop: "10px",
+    color: "red",
+    textAlign: "center",
+    fontSize: "0.9rem",
+  },
+  success: {
+    marginTop: "10px",
+    color: "green",
+    textAlign: "center",
+    fontSize: "0.9rem",
+  },
+};

package/template/src/routeTypes.ts

@@ -0,0 +1,5 @@
+// AUTO-GENERATED: DO NOT EDIT
+export type FileRoutes =
+  | "/"
+  | "/login"
+  | "/register";

package/template/src/routes.ts

@@ -1,12 +1,22 @@
 //* AUTO GENERATED: DO NOT EDIT
 import React from 'react';
 import Index from './pages/index.tsx';
+import Login from './pages/login.tsx';
+import Register from './pages/register.tsx';
 import type { RouteObject } from 'react-router-dom';
 
 const routes: RouteObject[] = [
   {
     "path": "",
     "element": React.createElement(Index)
+  },
+  {
+    "path": "login",
+    "element": React.createElement(Login)
+  },
+  {
+    "path": "register",
+    "element": React.createElement(Register)
   }
 ];
 

package/template/tsconfig.api.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2024",
+    "module": "esnext",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    ".aaex/api","src/api"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/template/vite.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { aaexFileRouter } from 'aaex-file-router/plugin'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { aaexFileRouter } from "aaex-file-router/plugin";
+import { pluginSsrDevFoucFix } from "./.aaex/utils/ServerLoadCssImports";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(),aaexFileRouter()],
-})
+  plugins: [react(), aaexFileRouter(), pluginSsrDevFoucFix()],
+});