aaex-cli 1.1.0 → 1.4.0

package/.TODO

@@ -0,0 +1,4 @@
+1. Fix server not being able to use Suspense
+    - Option 1. Remake the router to always import pages directly
+    - Option 2. Make the server able to stream content  
+2. 

package/README.md

@@ -7,13 +7,14 @@ Light weight SSR framework for react with filebased page and api routing. Builds
 - File routing using aaex-file-router (can be used seperatly)
 - API routing using hybrid solution only available in the full framework
 - SSR rendering using vites native functions + additional functionality
--full typescript support (currently only typescript)
+- full typescript support (currently only typescript)
 - all vite plugins that work with ssr should work
 
+
 ## Usage
 ```sh
 npx create-aaex-app <project-name>
 ```  
 
-## V1.1
-Added user system
+## V1.4
+Added server side data loading

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: {
@@ -72,7 +73,11 @@ async function createPackageJson() {
       express: "^5.1.0",
       compression: "^1.8.1",
       sirv: "^3.0.2",
-      "aaex-file-router": "^1.4.4",
+      "aaex-file-router": "^1.5.0",
+      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.4.0",
   "description": "Command line interface for creating aaexjs app",
   "license": "ISC",
   "author": "",
@@ -12,8 +12,18 @@
     "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",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@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-client.tsx

@@ -1,16 +1,16 @@
-import "../../src/index.css"
-import { StrictMode, Suspense } from "react";
+import "../../src/index.css";
+import { StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
-import App from "../../src/App"
+import App from "../../src/App";
 import { BrowserRouter } from "react-router";
 
+const initialData = (window as any).__INITIAL_DATA__;
+
 hydrateRoot(
   document.getElementById("root") as HTMLElement,
   <StrictMode>
     <BrowserRouter>
-      <Suspense>
-        <App />
-      </Suspense>
+      <App initialData={initialData} />
     </BrowserRouter>
   </StrictMode>
 );

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

@@ -3,17 +3,14 @@ import { renderToString } from "react-dom/server";
 import { StaticRouter } from "react-router";
 import App from "../../src/App";
 
-export function render(_url: string) {
-  const url = `/${_url}`;
+export function render(_url: string, initialData= {}) {
+  const url = `${_url}`;
 
-  // call your SSR function or API here and pass the result as props
 
   const html = renderToString(
     <StrictMode>
       <StaticRouter location={url}>
-        <Suspense>
-          <App />
-        </Suspense>
+          <App initialData={initialData} />
       </StaticRouter>
     </StrictMode>
   );

package/template/.aaex/matchServerRoutes.js

@@ -0,0 +1,60 @@
+export default function routeMatcher(routes, url) {
+  const segments = url.split("/").filter(Boolean); // "test/hej" → ["test", "hej"]
+
+  return matchLevel(routes, segments);
+}
+
+function matchLevel(routes, segments) {
+  for (const route of routes) {
+    const result = matchRoute(route, segments);
+
+    if (result) return result;
+  }
+
+  return null;
+}
+
+function matchRoute(route, segments) {
+  const isParam = /^:[a-zA-Z0-9_]+$/;
+
+  const [current, ...rest] = segments;
+
+  // Root index route
+  if (route.path === "" && segments.length === 0) {
+    return { route, params: {} };
+  }
+
+  // Static match
+  if (route.path === current) {
+    if (rest.length === 0) {
+      return { route, params: {} };
+    }
+
+    // Has children → go deeper
+    if (route.children) {
+      return matchLevel(route.children, rest);
+    }
+  }
+
+  // Dynamic match → :slug , :id osv
+  if (isParam.test(route.path)) {
+    const paramName = route.path.slice(1);
+
+    if (rest.length === 0) {
+      return { route, params: { [paramName]: current } };
+    }
+
+    // Has children → go deeper
+    if (route.children) {
+      const matchedChild = matchLevel(route.children, rest);
+      if (matchedChild) {
+        return {
+          route: matchedChild.route,
+          params: { [paramName]: current, ...matchedChild.params },
+        };
+      }
+    }
+  }
+
+  return null;
+}

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

@@ -2,15 +2,18 @@ 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
-
+let serverRoutes;
 // Import BuildApiRoutes
-const { default: apiRoutes, PathToRoute } = await import(
-  pathToFileURL(`${frameworkRoot}/BuildApiRoutes.js`).href
-);
+import * as BuildApiRoutes from "../BuildApiRoutes.js";
+import routeMatcher from "../matchServerRoutes.js";
+
+const apiRoutes = BuildApiRoutes.default; // default export
+const PathToRoute = BuildApiRoutes.pathToRoute; // named export
 
 // Constants
 const isProduction = process.env.NODE_ENV === "production";
@@ -35,6 +38,7 @@ if (!isProduction) {
     root: projectRoot,
     base,
   });
+  serverRoutes = (await vite.ssrLoadModule("/src/server-routes.ts")).default;
   app.use(vite.middlewares);
 } else {
   const compression = (await import("compression")).default;
@@ -44,16 +48,24 @@ if (!isProduction) {
     base,
     sirv(path.join(projectRoot, "dist/client"), { extensions: [] })
   );
+
+  const serverRoutesModule = await import(
+    pathToFileURL(path.join(projectRoot, "dist/src/server-routes.js")).href
+  );
+
+  serverRoutes = serverRoutesModule.default;
 }
 
+// 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 +74,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 +109,24 @@ 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;
+
+    const routeMatch = routeMatcher(serverRoutes, url);
+
+    if (!routeMatch) {
+      return res.status(404).send("Not found");
+    }
+
+    // Dynamicly import the file
+    const mod = await vite.ssrLoadModule(routeMatch.route.modulePath);
+
+    // Call load if it exist
+    let initialData = {};
+    if (mod.load) {
+      initialData = await mod.load(routeMatch.params);
+    }
 
     let template;
     let render;
@@ -114,11 +145,25 @@ app.use("*all", async (req, res) => {
       ).render;
     }
 
-    const rendered = await render(url);
+    const rendered = await render(url, initialData);
+
+    function XSSPrevention(unsafeString) {
+      return unsafeString.replace(/</g, "//u003c");
+      // .replace(/>/g, "&gt")
+      // .replace(/'/g, "&#39")
+      // .replace(/"/g, "&#34");
+    }
+
+    const serializedData = JSON.stringify(initialData);
+    const safeData = XSSPrevention(serializedData);
 
     const html = template
       .replace("<!--app-head-->", rendered.head ?? "")
-      .replace("<!--app-html-->", rendered.html ?? "");
+      .replace("<!--app-html-->", rendered.html ?? "")
+      .replace(
+        "<!--initial-data-->",
+        `<script>window.__INITIAL_DATA__ = ${safeData}</script>`
+      );
 
     res.status(200).set({ "Content-Type": "text/html" }).send(html);
   } catch (e) {

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,5 @@
+# edit to fit your needs
+MONGO_URI="mongodb://localhost:27018/"
+DB_NAME="mydatabase"
+JWT_SECRET="your-jwt-secret"
+JWT_EXP="24h"

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/App.tsx

@@ -1,23 +1,34 @@
 import "./App.css";
-import { Route, RouteObject, Routes } from "react-router";
-import routes from "./routes";
+import { Route, Routes } from "react-router";
+import serverRoutes from "./server-routes";
+import { createElement } from "react";
 
-function renderRoutes(routesArray: RouteObject[]) {
+function renderRoutes(routesArray: any[], initialData: any) {
   return routesArray.map((route) => {
-    if (route.children && route.children.length > 0) {
+    const element = createElement(route.element as any, { ...initialData });
+
+    if (route.children?.length) {
       return (
-        <Route  path={route.path} element={route.element}>
-          {renderRoutes(route.children)}
+        <Route path={route.path} element={element}>
+          {renderRoutes(route.children, initialData)}
         </Route>
       );
-    } else {
-      return <Route  path={route.path} element={route.element} />;
     }
+
+    return <Route path={route.path} element={element} />;
   });
 }
 
-function App() {
-  return <Routes>{renderRoutes(routes)}</Routes>;
+interface AppProps {
+  initialData?: any;
+}
+
+function App({ initialData }: AppProps) {
+  return (
+    <>
+      <Routes>{renderRoutes(serverRoutes, initialData)}</Routes>;
+    </>
+  );
 }
 
 export default App;

package/template/src/client-routes.ts

@@ -0,0 +1,33 @@
+//* 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 Slug from './pages/test/[slug].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)
+  },
+  {
+    "path": "test",
+    "children": [
+      {
+        "path": ":slug",
+        "element": React.createElement(Slug)
+      }
+    ]
+  }
+];
+
+export default routes;

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,50 @@
-export default function Home() {
-  return <>Hello AaEx</>;
+import { useAuth } from "../hooks/useAuth.js";
+import { FileLink } from "aaex-file-router";
+import { FileRoutes } from "../routeTypes.js";
+
+/** ------- Ideally same type as the API imported from /types or /interfaces ------- */
+type PageData = {
+  hello: string;
+};
+
+type PageError = {
+  error: string;
+};
+
+/** -------- */
+export async function load(): Promise<PageData | PageError> {
+  const res = await fetch("http://localhost:5173/api/helloworld");
+
+  if (!res.ok) {
+    return { error: "internal server error" };
+  }
+
+  const data = await res.json();
+
+  if (data) {
+    return data;
+  }
+
+  return { error: "Unknown error" };
+}
+
+export default function Home({ hello }: PageData) {
+  const { user, valid, loading } = useAuth();
+
+  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>
+      <br />
+      <p>Server rendered content: {hello}</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/pages/test/[slug].tsx

@@ -0,0 +1,7 @@
+import { useParams } from "react-router";
+
+export default function Test() {
+  const { slug } = useParams();
+
+  return <>{slug}</>;
+}

package/template/src/routeTypes.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED: DO NOT EDIT
+export type FileRoutes =
+  | "/"
+  | "/login"
+  | "/register"
+  | "/test"
+  | "/test/{string}";

package/template/src/server-routes.ts

@@ -0,0 +1,37 @@
+//* 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 Slug from './pages/test/[slug].tsx';
+
+
+const serverRoutes: any[] = [
+  {
+    "path": "",
+    "element": Index,
+    "modulePath": "C:/Users/tmraa/OneDrive/Dokument/AaExJS-documentation/test-app/src/pages/index.tsx"
+  },
+  {
+    "path": "login",
+    "element": Login,
+    "modulePath": "C:/Users/tmraa/OneDrive/Dokument/AaExJS-documentation/test-app/src/pages/login.tsx"
+  },
+  {
+    "path": "register",
+    "element": Register,
+    "modulePath": "C:/Users/tmraa/OneDrive/Dokument/AaExJS-documentation/test-app/src/pages/register.tsx"
+  },
+  {
+    "path": "test",
+    "children": [
+      {
+        "path": ":slug",
+        "element": Slug,
+        "modulePath": "C:/Users/tmraa/OneDrive/Dokument/AaExJS-documentation/test-app/src/pages/test/[slug].tsx"
+      }
+    ]
+  }
+];
+
+export default serverRoutes;

package/template/tsconfig.aaex.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2024",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true
+  },
+  "include": [
+    ".aaex/api",
+    "src/api",
+    ".aaex/utils",
+    "src/server-routes.ts",
+    "src/hooks"
+  ],
+  "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 { aaexServerRouter } from "aaex-file-router/plugin";
+import { pluginSsrDevFoucFix } from "./.aaex/utils/ServerLoadCssImports";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(),aaexFileRouter()],
-})
+  plugins: [react(), aaexServerRouter(), pluginSsrDevFoucFix()],
+});

package/template/src/routes.ts

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