arcanajs 2.4.0 → 2.5.1

package/framework/cli/templates.js

@@ -2,35 +2,50 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.requiredDirs = exports.errorPages = exports.configFiles = void 0;
 exports.configFiles = [
+    // project root files
     { src: "package.json", dest: "package.json" },
     { src: "tsconfig.json", dest: "tsconfig.json" },
     { src: "arcanajs.config.ts", dest: "arcanajs.config.ts" },
     { src: "postcss.config.js", dest: "postcss.config.js" },
-    { src: "arcanajs.d.ts", dest: "src/arcanajs.d.ts" },
-    { src: "globals.css", dest: "src/client/globals.css" },
-    { src: "client-index.tsx", dest: "src/client/index.tsx" },
-    { src: "server-index.ts", dest: "src/server/index.ts" },
-    { src: "server-routes-web.ts", dest: "src/server/routes/web.ts" },
+    // types
+    { src: "src/arcanajs.d.ts", dest: "src/arcanajs.d.ts" },
+    // client
+    { src: "src/client/globals.css", dest: "src/client/globals.css" },
+    { src: "src/client/index.tsx", dest: "src/client/index.tsx" },
+    // server
+    { src: "src/server/index.ts", dest: "src/server/index.ts" },
+    { src: "src/server/routes/web.ts", dest: "src/server/routes/web.ts" },
+    { src: "src/server/routes/api.ts", dest: "src/server/routes/api.ts" },
     {
-        src: "server-controller-home.ts",
+        src: "src/server/controllers/HomeController.ts",
         dest: "src/server/controllers/HomeController.ts",
     },
     {
-        src: "HomePage.tsx",
-        dest: "src/views/HomePage.tsx",
+        src: "src/server/controllers/UsersController.ts",
+        dest: "src/server/controllers/UsersController.ts",
     },
+    // views
+    { src: "src/views/HomePage.tsx", dest: "src/views/HomePage.tsx" },
+    { src: "src/views/NotFoundPage.tsx", dest: "src/views/NotFoundPage.tsx" },
+    { src: "src/views/ErrorPage.tsx", dest: "src/views/ErrorPage.tsx" },
+    //public
     {
-        src: "arcanajs.png",
+        src: "public/arcanajs.png",
         dest: "public/arcanajs.png",
     },
     {
-        src: "arcanajs.svg",
+        src: "public/arcanajs.svg",
         dest: "public/arcanajs.svg",
     },
     {
-        src: "favicon.ico",
+        src: "public/favicon.ico",
         dest: "public/favicon.ico",
     },
+    // optional DB templates
+    { src: "src/db/mongo.ts", dest: "src/db/mongo.ts" },
+    { src: "src/db/mongoose.ts", dest: "src/db/mongoose.ts" },
+    { src: "src/db/mysql.ts", dest: "src/db/mysql.ts" },
+    { src: "src/db/postgres.ts", dest: "src/db/postgres.ts" },
 ];
 exports.errorPages = ["NotFoundPage.tsx", "ErrorPage.tsx"];
 exports.requiredDirs = [

package/framework/lib/global.d.ts

@@ -18,6 +18,13 @@ declare module "*.module.css" {
 declare global {
   var __non_webpack_require__: NodeJS.Require;
   namespace Express {
+    interface Request {
+      /**
+       * Normalized DB object optionally attached to the request by ArcanaJSServer.
+       * It may be either the raw client, or an object like `{ client, db, close }`.
+       */
+      db?: any;
+    }
     interface Response {
       /**
        * Render a page component with data

package/framework/lib/server/ArcanaJSMiddleware.js

@@ -50,7 +50,7 @@ const createArcanaJSMiddleware = (options) => {
     return (req, res, next) => {
         res.renderPage = (page, data = {}, params = {}) => {
             const csrfToken = res.locals.csrfToken;
-            if (req.headers["x-arcanajs-request"] || req.query.format === "json") {
+            if (req.get("X-ArcanaJS-Request") || req.query.format === "json") {
                 return res.json({ page, data, params, csrfToken });
             }
             try {

package/framework/lib/server/ArcanaJSServer.d.ts

@@ -1,23 +1,55 @@
 import { Express, RequestHandler } from "express";
 import React from "react";
-export interface ArcanaJSConfig {
+import { Router as ArcanaRouter } from "./Router";
+export interface ArcanaJSConfig<TDb = any> {
     port?: number | string;
     views?: Record<string, React.FC<any>>;
     viewsDir?: string;
     viewsContext?: any;
-    routes?: RequestHandler | RequestHandler[];
+    routes?: RequestHandler | RequestHandler[] | ArcanaRouter | ArcanaRouter[];
+    /** API routes can be provided separately from web routes */
+    apiRoutes?: RequestHandler | RequestHandler[] | ArcanaRouter | ArcanaRouter[];
+    /** Base path under which API routes will be mounted (default: '/api') */
+    apiBase?: string;
     staticDir?: string;
     distDir?: string;
     indexFile?: string;
     layout?: React.FC<any>;
+    /** Optional function to establish a DB connection. Should return a Promise resolving to the DB client/connection. */
+    dbConnect?: () => Promise<TDb> | TDb;
+    /** Automatically register SIGINT/SIGTERM handlers to call stop(). Default: true */
+    autoHandleSignals?: boolean;
 }
-export declare class ArcanaJSServer {
+declare global {
+    namespace Express {
+        interface Request {
+            /**
+             * Normalized DB object optionally attached to the request by ArcanaJSServer.
+             * It may be either the raw client, or an object like `{ client, db, close }`.
+             */
+            db?: any;
+        }
+    }
+}
+export declare class ArcanaJSServer<TDb = any> {
     app: Express;
     private config;
-    constructor(config: ArcanaJSConfig);
+    private serverInstance?;
+    private _sigintHandler?;
+    private _sigtermHandler?;
+    constructor(config: ArcanaJSConfig<TDb>);
+    /**
+     * Normalize different DB client shapes into a single object exposing:
+     * { client?: any, db?: any, close: async () => void }
+     */
+    private normalizeDb;
     private initialize;
     private loadViewsFromContext;
     private loadViewsFromAlias;
     private discoverViews;
     start(): void;
+    /**
+     * Stop the HTTP server and close DB connection if present.
+     */
+    stop(): Promise<void>;
 }

package/framework/lib/server/ArcanaJSServer.js

@@ -22,71 +22,225 @@ class ArcanaJSServer {
         this.app = (0, express_1.default)();
         this.initialize();
     }
-    initialize() {
-        let { staticDir = "public", distDir = "dist/public", indexFile = "dist/public/index.html", views, viewsContext, routes, layout, } = this.config;
-        // 1. Load views from config or context (highest priority)
-        if (!views && viewsContext) {
-            views = this.loadViewsFromContext(viewsContext);
+    /**
+     * Normalize different DB client shapes into a single object exposing:
+     * { client?: any, db?: any, close: async () => void }
+     */
+    normalizeDb(obj) {
+        if (!obj)
+            return obj;
+        // If already normalized (has close function), return as-is
+        if (typeof obj.close === "function") {
+            return obj;
+        }
+        // Mongoose instance
+        if (typeof obj.disconnect === "function") {
+            return {
+                client: obj,
+                close: async () => {
+                    await obj.disconnect();
+                },
+            };
+        }
+        // If object contains { client, db }
+        if (obj.client && obj.db) {
+            const client = obj.client;
+            return {
+                client,
+                db: obj.db,
+                close: async () => {
+                    if (client && typeof client.close === "function") {
+                        await client.close();
+                    }
+                    else if (client && typeof client.disconnect === "function") {
+                        await client.disconnect();
+                    }
+                    else {
+                        throw new Error("No close method on client");
+                    }
+                },
+            };
+        }
+        // Native MongoClient instance
+        if (obj && typeof obj.close === "function" && obj.connect) {
+            return {
+                client: obj,
+                close: async () => {
+                    await obj.close();
+                },
+            };
         }
-        // 2. Load views from injected alias (Webpack)
-        if (!views) {
-            views = this.loadViewsFromAlias();
+        // Pg/mysql client with end()/query()
+        if (typeof obj.end === "function" || typeof obj.query === "function") {
+            return {
+                client: obj,
+                close: async () => {
+                    if (typeof obj.end === "function") {
+                        await obj.end();
+                    }
+                    else if (typeof obj.close === "function") {
+                        await obj.close();
+                    }
+                    else {
+                        throw new Error("No close/end method on SQL client");
+                    }
+                },
+            };
         }
-        // 3. Fallback to auto-discovery (Server-side only, non-bundled)
-        if (!views) {
-            views = this.discoverViews();
+        // Try internal mongo client path { s: { client } }
+        if (obj.s && obj.s.client && typeof obj.s.client.close === "function") {
+            return {
+                client: obj.s.client,
+                db: obj,
+                close: async () => {
+                    await obj.s.client.close();
+                },
+            };
         }
-        if (!views || Object.keys(views).length === 0) {
+        // Fallback: wrap with a close that throws to surface the issue
+        return {
+            client: obj,
+            close: async () => {
+                throw new Error("No known close method on DB client");
+            },
+        };
+    }
+    initialize() {
+        const { staticDir = "public", distDir = "dist/public", indexFile = "dist/public/index.html", views, viewsContext, routes, layout, apiRoutes, apiBase = "/api", } = this.config;
+        const root = process.cwd();
+        // 1. Resolve views once and in priority order
+        let resolvedViews = views;
+        if (!resolvedViews && viewsContext)
+            resolvedViews = this.loadViewsFromContext(viewsContext);
+        if (!resolvedViews)
+            resolvedViews = this.loadViewsFromAlias();
+        if (!resolvedViews)
+            resolvedViews = this.discoverViews();
+        if (!resolvedViews || Object.keys(resolvedViews).length === 0) {
             console.warn("No views found. Please check your views directory.");
-            views = {};
-        }
-        // Add default error views if not already present
-        views.NotFoundPage = views.NotFoundPage || NotFoundPage_1.default;
-        views.ErrorPage = views.ErrorPage || ErrorPage_1.default;
-        // Security and Performance
-        this.app.use((0, helmet_1.default)({
-            contentSecurityPolicy: false,
-        }));
-        this.app.use((0, compression_1.default)());
+            resolvedViews = {};
+        }
+        resolvedViews.NotFoundPage = resolvedViews.NotFoundPage || NotFoundPage_1.default;
+        resolvedViews.ErrorPage = resolvedViews.ErrorPage || ErrorPage_1.default;
+        // Security headers
+        this.app.use((0, helmet_1.default)({ contentSecurityPolicy: false }));
         this.app.use((0, cookie_parser_1.default)());
         this.app.use((0, CsrfMiddleware_1.createCsrfMiddleware)());
         this.app.use(ResponseHandlerMiddleware_1.responseHandler);
-        // Static files
+        // Expose `req.db` for convenience
+        this.app.use((req, _res, next) => {
+            req.db = this.app.locals.db;
+            next();
+        });
+        // Static files: resolve and dedupe paths, serve before compression to avoid recompressing static files
         const isProduction = process.env.NODE_ENV === "production";
-        const staticOptions = {
-            index: false,
-            maxAge: isProduction ? "1y" : "0",
-        };
-        this.app.use(express_1.default.static(path_1.default.resolve(process.cwd(), distDir), staticOptions));
-        this.app.use(express_1.default.static(path_1.default.resolve(process.cwd(), staticDir), staticOptions));
+        const staticOptions = { index: false, maxAge: isProduction ? "1y" : "0" };
+        const staticPaths = [
+            path_1.default.resolve(root, distDir),
+            path_1.default.resolve(root, staticDir),
+        ].filter((p, i, a) => a.indexOf(p) === i);
+        for (const p of staticPaths) {
+            this.app.use(express_1.default.static(p, staticOptions));
+        }
+        // Compression for dynamic responses (after static middleware)
+        this.app.use((0, compression_1.default)());
         // ArcanaJS Middleware
         this.app.use((0, ArcanaJSMiddleware_1.createArcanaJSMiddleware)({
-            views,
-            indexFile: path_1.default.resolve(process.cwd(), indexFile),
+            views: resolvedViews,
+            indexFile: path_1.default.resolve(root, indexFile),
             layout,
         }));
-        // Custom Routes
-        if (routes) {
-            if (Array.isArray(routes)) {
-                routes.forEach((route) => this.app.use(route));
+        // Establish DB connection if provided (normalize eagerly where possible)
+        if (this.config.dbConnect) {
+            try {
+                const maybe = this.config.dbConnect();
+                const handleDb = (db) => {
+                    try {
+                        this.app.locals.db = this.normalizeDb(db) || db;
+                        console.log("Database connection attached to app.locals.db");
+                    }
+                    catch (e) {
+                        this.app.locals.db = db;
+                        console.warn("DB connection attached without full normalization", e);
+                    }
+                };
+                if (maybe &&
+                    maybe.then &&
+                    typeof maybe.then === "function") {
+                    maybe
+                        .then(handleDb)
+                        .catch((err) => console.error("Error establishing DB connection:", err));
+                }
+                else {
+                    handleDb(maybe);
+                }
             }
-            else {
-                this.app.use(routes);
+            catch (err) {
+                console.error("Error calling dbConnect:", err);
+            }
+        }
+        // Helper to mount arrays or single route objects
+        const mount = (target, base) => {
+            if (!target)
+                return;
+            const items = Array.isArray(target) ? target : [target];
+            for (const r of items) {
+                if (!r)
+                    continue;
+                if (typeof r.getRouter === "function") {
+                    this.app.use(base || "/", r.getRouter());
+                }
+                else {
+                    this.app.use(base || "/", r);
+                }
             }
+        };
+        try {
+            mount(apiRoutes, apiBase);
+            if (apiRoutes)
+                console.log(`API routes mounted at ${apiBase}`);
+        }
+        catch (err) {
+            console.error("Error mounting apiRoutes:", err);
+        }
+        try {
+            mount(routes);
+        }
+        catch (err) {
+            console.error("Error mounting routes:", err);
         }
         // Dynamic Router
-        this.app.use((0, DynamicRouter_1.createDynamicRouter)(views));
-        // 404 Fallback
+        this.app.use((0, DynamicRouter_1.createDynamicRouter)(resolvedViews));
+        // 404 and error handlers
         this.app.use((req, res) => {
-            res.status(404).renderPage("NotFoundPage");
+            if (req.get("X-ArcanaJS-Request") || req.query.format === "json") {
+                res.status(404).json({
+                    page: "NotFoundPage",
+                    data: {},
+                    params: {},
+                    csrfToken: res.locals.csrfToken,
+                });
+            }
+            else {
+                res.status(404).renderPage("NotFoundPage");
+            }
         });
-        // Error Handler
         this.app.use((err, req, res, next) => {
             console.error(err);
             const message = process.env.NODE_ENV === "production"
                 ? "Internal Server Error"
                 : err.message;
-            res.status(500).renderPage("ErrorPage", { message });
+            if (req.get("X-ArcanaJS-Request") || req.query.format === "json") {
+                res.status(500).json({
+                    page: "ErrorPage",
+                    data: { message },
+                    params: {},
+                    csrfToken: res.locals.csrfToken,
+                });
+            }
+            else {
+                res.status(500).renderPage("ErrorPage", { message });
+            }
         });
     }
     loadViewsFromContext(context) {
@@ -157,9 +311,131 @@ class ArcanaJSServer {
     }
     start() {
         const PORT = this.config.port || process.env.PORT || 3000;
-        this.app.listen(PORT, () => {
+        this.serverInstance = this.app.listen(PORT, () => {
             console.log(`Server is running on http://localhost:${PORT}`);
         });
+        // Optionally register process signal handlers per-instance to gracefully shutdown
+        const autoHandle = this.config.autoHandleSignals !== false;
+        if (autoHandle) {
+            const shutdown = async () => {
+                try {
+                    await this.stop();
+                    process.exit(0);
+                }
+                catch (err) {
+                    console.error("Error during shutdown:", err);
+                    process.exit(1);
+                }
+            };
+            this._sigintHandler = shutdown;
+            this._sigtermHandler = shutdown;
+            process.on("SIGINT", this._sigintHandler);
+            process.on("SIGTERM", this._sigtermHandler);
+        }
+    }
+    /**
+     * Stop the HTTP server and close DB connection if present.
+     */
+    async stop() {
+        // Close HTTP server
+        if (this.serverInstance) {
+            await new Promise((resolve, reject) => {
+                this.serverInstance.close((err) => {
+                    if (err)
+                        return reject(err);
+                    resolve();
+                });
+            });
+            this.serverInstance = undefined;
+            console.log("HTTP server stopped");
+        }
+        // Close DB connection if attached to app.locals.db
+        const db = this.app.locals.db;
+        if (db) {
+            let closed = false;
+            // Try mongoose.disconnect()
+            try {
+                if (typeof db.disconnect === "function") {
+                    await db.disconnect();
+                    closed = true;
+                    console.log("Database connection closed via disconnect().");
+                }
+            }
+            catch (err) {
+                console.error("Error calling disconnect() on DB client:", err);
+            }
+            // Try db.close()
+            if (!closed) {
+                try {
+                    if (typeof db.close === "function") {
+                        await db.close();
+                        closed = true;
+                        console.log("Database connection closed via close().");
+                    }
+                }
+                catch (err) {
+                    console.error("Error calling close() on DB client:", err);
+                }
+            }
+            // Try db.end()
+            if (!closed) {
+                try {
+                    if (typeof db.end === "function") {
+                        await db.end();
+                        closed = true;
+                        console.log("Database connection closed via end().");
+                    }
+                }
+                catch (err) {
+                    console.error("Error calling end() on DB client:", err);
+                }
+            }
+            // Try db.client?.close()
+            if (!closed) {
+                try {
+                    const clientClose = db.client && db.client.close;
+                    if (clientClose && typeof clientClose === "function") {
+                        await db.client.close();
+                        closed = true;
+                        console.log("Database connection closed via db.client.close().");
+                    }
+                }
+                catch (err) {
+                    console.error("Error calling db.client.close() on DB client:", err);
+                }
+            }
+            // Try db.s?.client?.close() (internal Mongo client path)
+            if (!closed) {
+                try {
+                    const maybeInternal = db.s && db.s.client && db.s.client.close;
+                    if (maybeInternal && typeof maybeInternal === "function") {
+                        await db.s.client.close();
+                        closed = true;
+                        console.log("Database connection closed via db.s.client.close().");
+                    }
+                }
+                catch (err) {
+                    console.error("Error calling db.s.client.close() on DB client:", err);
+                }
+            }
+            if (!closed) {
+                console.warn("Could not find a supported close method on the DB client; connection may remain open.");
+            }
+        }
+        // Remove signal handlers registered by this instance
+        try {
+            if (this._sigintHandler) {
+                process.removeListener("SIGINT", this._sigintHandler);
+                this._sigintHandler = undefined;
+            }
+            if (this._sigtermHandler) {
+                process.removeListener("SIGTERM", this._sigtermHandler);
+                this._sigtermHandler = undefined;
+            }
+        }
+        catch (err) {
+            // ignore errors while removing listeners
+        }
     }
 }
 exports.ArcanaJSServer = ArcanaJSServer;

package/framework/lib/shared/core/ArcanaJSApp.js

@@ -86,7 +86,9 @@ const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl,
         setIsNavigating(true);
         try {
             const response = await fetch(newUrl, {
-                headers: { "x-arcanajs-request": "true" },
+                headers: { "X-ArcanaJS-Request": "true" },
+                // prevent caching in dev navigation
+                cache: "no-store",
             });
             if (!response.ok) {
                 if (response.status === 404) {
@@ -97,6 +99,15 @@ const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl,
                 }
                 throw new Error(`Navigation failed: ${response.status} ${response.statusText}`);
             }
+            // Ensure server returned JSON. If not, fallback to full navigation reload
+            const contentType = response.headers.get("content-type") || "";
+            if (!contentType.includes("application/json")) {
+                // The server returned HTML (or something else) instead of JSON.
+                // Do a full reload so the browser displays the correct page instead
+                // of trying to parse HTML as JSON (which causes the SyntaxError).
+                window.location.href = newUrl;
+                return;
+            }
             const json = await response.json();
             // Cache the navigation result
             navigationCache.current.set(newUrl, {

package/framework/templates/package.json

@@ -8,7 +8,7 @@
     "start": "arcanajs start"
   },
   "dependencies": {
-    "arcanajs": "^2.4.0",
+    "arcanajs": "^2.5.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   }

package/framework/templates/{globals.css → src/client/globals.css}

@@ -43,8 +43,7 @@ body {
 }
 
 .hero-gradient {
-  background:
-    radial-gradient(
+  background: radial-gradient(
       circle at 50% 0%,
       rgba(248, 64, 2, 0.15) 0%,
       transparent 50%
@@ -95,8 +94,10 @@ body {
 }
 
 .grid-pattern {
-  background-image:
-    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+  background-image: linear-gradient(
+      rgba(255, 255, 255, 0.02) 1px,
+      transparent 1px
+    ),
     linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
   background-size: 50px 50px;
 }

package/framework/templates/src/db/mongo.ts

@@ -0,0 +1,10 @@
+export default async function dbConnect() {
+  // Example MongoDB connection using the official driver
+  const { MongoClient } = await import("mongodb");
+  const url = process.env.MONGO_URL || "mongodb://localhost:27017";
+  const dbName = process.env.MONGO_DB || "mydb";
+  const client = new MongoClient(url);
+  await client.connect();
+  const db = client.db(dbName);
+  return { client, db };
+}

package/framework/templates/src/db/mongoose.ts

@@ -0,0 +1,12 @@
+import mongoose from "mongoose";
+
+export default async function dbConnect() {
+  const uri =
+    process.env.MONGOOSE_URI ||
+    process.env.MONGO_URL ||
+    "mongodb://localhost:27017/mydb";
+  const options = {} as mongoose.ConnectOptions;
+
+  await mongoose.connect(uri, options);
+  return mongoose;
+}

package/framework/templates/src/db/mysql.ts

@@ -0,0 +1,15 @@
+export default async function dbConnect() {
+  const mysql = await import("mysql2/promise");
+  const uri = process.env.MYSQL_URL;
+  if (uri) {
+    return await mysql.createConnection(uri as any);
+  }
+
+  const connection = await mysql.createConnection({
+    host: process.env.MYSQL_HOST || "localhost",
+    user: process.env.MYSQL_USER || "root",
+    database: process.env.MYSQL_DB || "mydb",
+    password: process.env.MYSQL_PASSWORD || undefined,
+  });
+  return connection;
+}

package/framework/templates/src/db/postgres.ts

@@ -0,0 +1,8 @@
+export default async function dbConnect() {
+  const { Client } = await import("pg");
+  const connectionString =
+    process.env.PG_CONNECTION || process.env.DATABASE_URL;
+  const client = new Client({ connectionString });
+  await client.connect();
+  return client;
+}

package/framework/templates/src/server/controllers/UsersController.ts

@@ -0,0 +1,37 @@
+import { Request, Response } from "express";
+
+/**
+ * UsersController - example controller for users endpoints.
+ */
+export default class UsersController {
+  async users(req: Request, res: Response) {
+    try {
+      const normalized: any = (req as any).db || req.app?.locals?.db;
+      if (!normalized) return res.error("No DB connection", 500, null, null);
+
+      const client: any = normalized.client || normalized;
+      const db: any = normalized.db || normalized;
+
+      if (db && typeof db.collection === "function") {
+        const users = await db.collection("users").find().toArray();
+        return res.success(users, "Users retrieved successfully", 200);
+      }
+
+      if (client && typeof client.query === "function") {
+        const result = await client.query("SELECT * FROM users LIMIT 100");
+        const rows = result.rows || result[0] || result;
+        return res.success(rows, "Users retrieved successfully", 200);
+      }
+
+      return res.error(
+        "Unsupported DB client in template example",
+        400,
+        null,
+        null
+      );
+    } catch (err) {
+      console.error(err);
+      return res.error("Query failed", 500, err as any, null);
+    }
+  }
+}

package/framework/templates/src/server/index.ts

@@ -0,0 +1,35 @@
+import { ArcanaJSServer } from "arcanajs/server";
+import apiRoutes from "./routes/api";
+import webRoutes from "./routes/web";
+
+// Example DB connectors included in templates:
+// import mongoDb from '../db/mongo';
+// import mongooseDb from '../db/mongoose';
+// import pgDb from '../db/postgres';
+// import mysqlDb from '../db/mysql';
+
+const PORT = process.env.PORT || 3000;
+
+const server = new ArcanaJSServer({
+  port: PORT,
+  routes: webRoutes,
+  // Separate API routes (mounted under /api by default)
+  apiRoutes: apiRoutes,
+  // To change the base path, set apiBase: '/v1' for example or similar
+  apiBase: "/api",
+  // Example: provide a dbConnect function that returns the DB client/connection.
+  // You can connect to MySQL/Postgres/MongoDB here and return the client.
+  // dbConnect: async () => {
+  //   const { MongoClient } = await import('mongodb');
+  //   const client = new MongoClient(process.env.MONGO_URL || 'mongodb://localhost:27017');
+  //   await client.connect();
+  //   return client.db('mydb');
+  // },
+  // Or use one of the provided DB templates (uncomment one):
+  // dbConnect: mongoDb,
+  // dbConnect: mongooseDb,
+  // dbConnect: pgDb,
+  // dbConnect: mysqlDb,
+});
+
+server.start();

package/framework/templates/src/server/routes/api.ts

@@ -0,0 +1,6 @@
+import { Route } from "arcanajs/server";
+import UsersController from "../controllers/UsersController";
+
+router.get("/users", [UsersController, "users"]);
+
+export default Route.getRouter();

package/framework/templates/{HomePage.tsx → src/views/HomePage.tsx}

@@ -220,7 +220,7 @@ export default function HomePage() {
                           strokeLinecap="round"
                           strokeLinejoin="round"
                           strokeWidth={2}
-                          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2V7zm0 0V5a2 2 0 012-2h6l2 2h6a2 2 0 012 2v2H3z"
+                          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2V7z"
                         />
                       </svg>
                     </div>

package/package.json

@@ -5,7 +5,7 @@
     "email": "mohammed.bencheikh.dev@gmail.com",
     "url": "https://mohammedbencheikh.com/"
   },
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "ArcanaJS Framework",
   "main": "framework/lib/index.js",
   "types": "framework/lib/index.d.ts",

package/framework/templates/server-index.ts

@@ -1,11 +0,0 @@
-import { ArcanaJSServer } from "arcanajs/server";
-import webRoutes from "./routes/web";
-
-const PORT = process.env.PORT || 3000;
-
-const server = new ArcanaJSServer({
-  port: PORT,
-  routes: webRoutes,
-});
-
-server.start();