@swizzyweb/swizzy-frontend-template-web-service 0.2.0

package/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:24
+USER root
+WORKDIR /home/app/
+COPY . .
+
+RUN npm install
+RUN npm run build
+EXPOSE 3005
+ENTRYPOINT ./entrypoint.sh
+

package/README.md

@@ -0,0 +1,43 @@
+# @swizzyweb/swizzy-frontend-template-web-service
+
+Sample react and tailwind based swizzy frontend web service. The sample app has a react based frontend
+and a swizzy web service backend. A sample implementation of an api can be found in the
+routers/Api directory.
+
+## Web service
+
+The Swizzy web service logic can be found in the src directory.
+
+## React
+
+The react code is in the react directory.
+
+## Running
+
+## Install
+
+```npm
+npm install
+```
+
+## Build and run immediately
+
+```npm
+npm run dev
+```
+
+## Only build
+
+```npm
+npm run build
+```
+
+## Running server after build
+
+```npm
+npm run server
+```
+
+## With swerve
+
+After build you can just run `swerve` in the root directory.

package/babel.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    ["@babel/preset-react", { runtime: "automatic" }], // 'automatic' for new JSX transform
+    "@babel/preset-typescript",
+  ],
+};

package/dist/app.js

@@ -0,0 +1,15 @@
+import { FunnyJokeClient } from "./client/index.js";
+import { SampleFrontendWebService } from "./web-service.js";
+export async function getWebservice(props) {
+    const state = {
+        funnyJokeClient: new FunnyJokeClient({
+            baseUrl: props.serviceArgs.funnyJokeBaseUrl,
+        }),
+    };
+    return new SampleFrontendWebService({
+        ...props,
+        ...props.serviceArgs,
+        state,
+    });
+}
+//# sourceMappingURL=app.js.map

package/dist/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,KAA6C;IAE7C,MAAM,KAAK,GAAG;QACZ,eAAe,EAAE,IAAI,eAAe,CAAC;YACnC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB;SAC5C,CAAC;KACH,CAAC;IACF,OAAO,IAAI,wBAAwB,CAAC;QAClC,GAAG,KAAK;QACR,GAAG,KAAK,CAAC,WAAW;QACpB,KAAK;KACN,CAAC,CAAC;AACL,CAAC"}

package/dist/client/funny-joke-client.js

@@ -0,0 +1,15 @@
+const DEFAULT_BASE_URL = "https://official-joke-api.appspot.com";
+export class FunnyJokeClient {
+    baseUrl;
+    constructor(props) {
+        this.baseUrl = props.baseUrl ?? DEFAULT_BASE_URL;
+    }
+    async getFunnyJoke(request) {
+        const response = await fetch(`${this.baseUrl}/jokes/random`, {
+            method: "get",
+        });
+        const joke = await response.json();
+        return joke;
+    }
+}
+//# sourceMappingURL=funny-joke-client.js.map

package/dist/client/funny-joke-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"funny-joke-client.js","sourceRoot":"","sources":["../../src/client/funny-joke-client.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,uCAAuC,CAAC;AAgBjE,MAAM,OAAO,eAAe;IAClB,OAAO,CAAS;IACxB,YAAY,KAA2B;QACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,gBAAgB,CAAC;IACnD,CAAC;IACD,KAAK,CAAC,YAAY,CAAC,OAAY;QAC7B,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,eAAe,EAAE;YAC3D,MAAM,EAAE,KAAK;SACd,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

package/dist/client/index.js

@@ -0,0 +1,2 @@
+export * from "./funny-joke-client.js";
+//# sourceMappingURL=index.js.map

package/dist/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/routers/ApiRouter/api-router.js

@@ -0,0 +1,22 @@
+import { RequestIdMiddleware, RequestLoggerMiddleware, SwizzyRequestMiddleware, WebRouter, } from "@swizzyweb/swizzy-web-service";
+import { FunnyJokeController } from "./controllers/funny-joke-controller.js";
+export class ApiWebRouter extends WebRouter {
+    constructor(props) {
+        super({
+            ...props,
+            name: "ApiWebRouter",
+            path: "api",
+            stateConverter: ApiRouterStateConverter,
+            webControllerClasses: [FunnyJokeController],
+            middleware: [
+                SwizzyRequestMiddleware,
+                RequestIdMiddleware,
+                RequestLoggerMiddleware,
+            ],
+        });
+    }
+}
+const ApiRouterStateConverter = async function (props) {
+    return { ...props.state };
+};
+//# sourceMappingURL=api-router.js.map

package/dist/routers/ApiRouter/api-router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-router.js","sourceRoot":"","sources":["../../../src/routers/ApiRouter/api-router.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EACnB,uBAAuB,EAGvB,uBAAuB,EACvB,SAAS,GACV,MAAM,+BAA+B,CAAC;AAKvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAQ7E,MAAM,OAAO,YAAa,SAAQ,SAGjC;IACC,YAAY,KAAqB;QAC/B,KAAK,CAAC;YACJ,GAAG,KAAK;YACR,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,KAAK;YACX,cAAc,EAAE,uBAAuB;YACvC,oBAAoB,EAAE,CAAC,mBAAmB,CAAC;YAC3C,UAAU,EAAE;gBACV,uBAAuB;gBACvB,mBAAmB;gBACnB,uBAAuB;aACxB;SACF,CAAC,CAAC;IACL,CAAC;CACF;AAED,MAAM,uBAAuB,GAGzB,KAAK,WACP,KAAyD;IAEzD,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;AAC5B,CAAC,CAAC"}

package/dist/routers/ApiRouter/controllers/funny-joke-controller.js

@@ -0,0 +1,33 @@
+import { DefaultStateExporter, RequestMethod, WebController, } from "@swizzyweb/swizzy-web-service";
+export class FunnyJokeController extends WebController {
+    constructor(props) {
+        super({
+            ...props,
+            name: "FunnyJokeController",
+            action: "funnyJoke",
+            method: RequestMethod.get,
+            stateConverter: DefaultStateExporter,
+            middleware: [],
+        });
+    }
+    async getInitializedController(props) {
+        const logger = this.logger;
+        const getState = this.getState.bind(this);
+        return async function (req, res) {
+            logger.info("We got a jokster lookin for jokes!");
+            try {
+                const { funnyJokeClient } = getState();
+                const joke = await funnyJokeClient.getFunnyJoke({});
+                res.json({
+                    message: "Here's your funny joke",
+                    joke,
+                });
+            }
+            catch (e) {
+                res.status(500);
+                res.json({ message: "Internal error occurred" });
+            }
+        };
+    }
+}
+//# sourceMappingURL=funny-joke-controller.js.map

package/dist/routers/ApiRouter/controllers/funny-joke-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"funny-joke-controller.js","sourceRoot":"","sources":["../../../../src/routers/ApiRouter/controllers/funny-joke-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAGpB,aAAa,EACb,aAAa,GAEd,MAAM,+BAA+B,CAAC;AAcvC,MAAM,OAAO,mBAAoB,SAAQ,aAGxC;IACC,YAAY,KAA+B;QACzC,KAAK,CAAC;YACJ,GAAG,KAAK;YACR,IAAI,EAAE,qBAAqB;YAC3B,MAAM,EAAE,WAAW;YACnB,MAAM,EAAE,aAAa,CAAC,GAAG;YACzB,cAAc,EAAE,oBAAoB;YACpC,UAAU,EAAE,EAAE;SACf,CAAC,CAAC;IACL,CAAC;IAES,KAAK,CAAC,wBAAwB,CACtC,KAEC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1C,OAAO,KAAK,WAAW,GAAY,EAAE,GAAa;YAChD,MAAM,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;YAClD,IAAI,CAAC;gBACH,MAAM,EAAE,eAAe,EAAE,GAAG,QAAQ,EAAG,CAAC;gBACxC,MAAM,IAAI,GAAG,MAAM,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;gBACpD,GAAG,CAAC,IAAI,CAAC;oBACP,OAAO,EAAE,wBAAwB;oBACjC,IAAI;iBACL,CAAC,CAAC;YACL,CAAC;YAAC,OAAO,CAAM,EAAE,CAAC;gBAChB,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAChB,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,yBAAyB,EAAE,CAAC,CAAC;YACnD,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;CACF"}

package/dist/routers/PageRouter/page-router.js

@@ -0,0 +1,29 @@
+import { RequestIdMiddleware, RequestLoggerMiddleware, SwizzyRequestMiddleware, WebRouter, } from "@swizzyweb/swizzy-web-service";
+import path from "path";
+// @ts-ignore
+import express from "@swizzyweb/express";
+import { fileURLToPath } from "node:url";
+// This gives you the directory where *this* file is located
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export class PageWebRouter extends WebRouter {
+    constructor(props) {
+        super({
+            ...props,
+            name: "PageWebRouter",
+            path: "",
+            stateConverter: PageRouterStateConverter,
+            webControllerClasses: [],
+            middleware: [
+                SwizzyRequestMiddleware,
+                RequestIdMiddleware,
+                RequestLoggerMiddleware,
+                () => express.static(path.join(__dirname, "../../../bundle")),
+            ],
+        });
+    }
+}
+const PageRouterStateConverter = async function (props) {
+    return { ...props.state };
+};
+//# sourceMappingURL=page-router.js.map

package/dist/routers/PageRouter/page-router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-router.js","sourceRoot":"","sources":["../../../src/routers/PageRouter/page-router.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EACnB,uBAAuB,EAGvB,uBAAuB,EACvB,SAAS,GACV,MAAM,+BAA+B,CAAC;AAEvC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,aAAa;AACb,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,4DAA4D;AAC5D,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAM3C,MAAM,OAAO,aAAc,SAAQ,SAGlC;IACC,YAAY,KAAsB;QAChC,KAAK,CAAC;YACJ,GAAG,KAAK;YACR,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,EAAE;YACR,cAAc,EAAE,wBAAwB;YACxC,oBAAoB,EAAE,EAAE;YACxB,UAAU,EAAE;gBACV,uBAAuB;gBACvB,mBAAmB;gBACnB,uBAAuB;gBACvB,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;IACL,CAAC;CACF;AAED,MAAM,wBAAwB,GAG1B,KAAK,WACP,KAAyD;IAEzD,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;AAC5B,CAAC,CAAC"}

package/dist/web-service.js

@@ -0,0 +1,16 @@
+import { WebService } from "@swizzyweb/swizzy-web-service";
+import { PageWebRouter } from "./routers/PageRouter/page-router.js";
+import { ApiWebRouter } from "./routers/ApiRouter/api-router.js";
+export class SampleFrontendWebService extends WebService {
+    constructor(props) {
+        super({
+            ...props,
+            name: "SampleFrontendWebService",
+            path: props.path ?? "",
+            packageName: "@swizzyweb/swizzy-frontend-template-web-service",
+            routerClasses: [PageWebRouter, ApiWebRouter],
+            middleware: [],
+        });
+    }
+}
+//# sourceMappingURL=web-service.js.map

package/dist/web-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-service.js","sourceRoot":"","sources":["../src/web-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAajE,MAAM,OAAO,wBAAyB,SAAQ,UAAyC;IACrF,YAAY,KAAoC;QAC9C,KAAK,CAAC;YACJ,GAAG,KAAK;YACR,IAAI,EAAE,0BAA0B;YAChC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,EAAE;YACtB,WAAW,EAAE,iDAAiD;YAC9D,aAAa,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC;YAC5C,UAAU,EAAE,EAAE;SACf,CAAC,CAAC;IACL,CAAC;CACF"}

package/docker-compose.yaml

@@ -0,0 +1,8 @@
+services:
+  swizzywebsite:
+    build: .
+    ports:
+      - 3705:3005
+    volumes:
+      - ./logs:/home/app/logs
+      - ./appdata:/home/app/appdata

package/entrypoint.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/bash
+
+npm run server

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@swizzyweb/swizzy-frontend-template-web-service",
+  "version": "0.2.0",
+  "description": "Template for swizzyweb frontend web services",
+  "main": "dist/app.js",
+  "type": "module",
+  "author": "Jason Gallagher",
+  "scripts": {
+    "dev": "npm run build && npm run server",
+    "server": "swerve",
+    "build:service": "tsc",
+    "build": "npm run build:webpack && npm run build:service",
+    "start:webpack": "webpack serve --config webpack.config.cjs",
+    "build:webpack": "webpack --config webpack.config.cjs"
+  },
+  "keywords": [
+    "react",
+    "webpack",
+    "tailwind",
+    "route-optimizer",
+    "typescript"
+  ],
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@swizzyweb/swerve": "^0.5.6",
+    "@tailwindcss/postcss": "^4.1.13",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^9.2.1",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.4",
+    "mini-css-extract-plugin": "^2.9.4",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^4.1.7",
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.2"
+  },
+  "dependencies": {
+    "@swizzyweb/express": "^4.19.2",
+    "@swizzyweb/swizzy-common": "^0.3.2",
+    "@swizzyweb/swizzy-web-service": "^0.5.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    // Use the new PostCSS plugin for Tailwind CSS
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};

package/react/App.tsx

@@ -0,0 +1,153 @@
+import React, { useState } from "react"; // Keep this as it's the actual library import
+import { FunnyJokeTeller } from "./FunnyJokeTeller";
+
+// Main App component
+const App = () => {
+  return (
+    <div className="min-h-screen bg-gray-100 font-sans antialiased flex flex-col">
+      {/* Header Section */}
+      <header className="bg-gradient-to-r from-blue-600 to-purple-700 text-white p-6 shadow-lg rounded-b-xl">
+        <div className="container mx-auto flex justify-between items-center">
+          <h1 className="text-4xl font-extrabold tracking-tight">
+            My Awesome SwizzyWeb Site
+          </h1>
+          <nav>
+            <ul className="flex space-x-6">
+              <li>
+                <a
+                  href="#"
+                  className="text-white hover:text-blue-200 transition duration-300 text-lg font-medium"
+                >
+                  Home
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="text-white hover:text-blue-200 transition duration-300 text-lg font-medium"
+                >
+                  About
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="text-white hover:text-blue-200 transition duration-300 text-lg font-medium"
+                >
+                  Services
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="text-white hover:text-blue-200 transition duration-300 text-lg font-medium"
+                >
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+
+      {/* Main Content Section */}
+      <main className="flex-grow container mx-auto p-8 py-12">
+        <section className="bg-white p-8 rounded-xl shadow-lg mb-8">
+          <h2 className="text-3xl font-bold text-gray-800 mb-4">
+            Welcome to Our Site!
+          </h2>
+          <p className="text-gray-700 leading-relaxed text-lg">
+            This is a sample SwizzyWeb website built with the power and
+            flexibility of Tailwind CSS. Enjoy the clean design and responsive
+            layout that adapts beautifully to any screen size. We've focused on
+            creating a modern and user-friendly experience.
+          </p>
+          <div className="mt-6 flex space-x-4">
+            <button className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+              Learn More
+            </button>
+            <button className="bg-purple-500 hover:bg-purple-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+              Get Started
+            </button>
+          </div>
+        </section>
+
+        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {/* Feature Card 1 */}
+          <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition duration-300">
+            <h3 className="text-2xl font-semibold text-gray-800 mb-3">
+              Responsive Design
+            </h3>
+            <p className="text-gray-600">
+              Our website looks great on desktops, tablets, and mobile phones,
+              ensuring a seamless experience for all users.
+            </p>
+          </div>
+
+          {/* Feature Card 2 */}
+          <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition duration-300">
+            <h3 className="2xl font-semibold text-gray-800 mb-3">Modern UI</h3>
+            <p className="text-gray-600">
+              Leveraging Tailwind CSS, we've crafted a clean, modern, and
+              intuitive user interface.
+            </p>
+          </div>
+
+          {/* Feature Card 3 */}
+          <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition duration-300">
+            <h3 className="2xl font-semibold text-gray-800 mb-3">
+              Easy to Customize
+            </h3>
+            <p className="text-gray-600">
+              The component-based structure makes it incredibly easy to extend
+              and customize.
+            </p>
+          </div>
+          {/* Feature Card 4 */}
+          <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition duration-300">
+            <h3 className="2xl font-semibold text-gray-800 mb-3">
+              Easy to add custom api's
+            </h3>
+            <p className="text-gray-600">
+              Adding api's is as simple as creating new controllers, checkout
+              our funny joke API by clicking the button below.
+            </p>
+
+            <FunnyJokeTeller />
+          </div>
+        </section>
+      </main>
+
+      {/* Footer Section */}
+      <footer className="bg-gray-800 text-white p-6 mt-8 rounded-t-xl shadow-inner">
+        <div className="container mx-auto text-center">
+          <p className="text-gray-400">
+            &copy; {new Date().getFullYear()} My Awesome SwizzyWeb Site. All
+            rights reserved.
+          </p>
+          <p className="text-gray-400 mt-2">
+            Made with{" "}
+            <span className="font-semibold text-white">@swizzyweb</span>
+          </p>
+          <div className="flex justify-center space-x-4 mt-3">
+            <a
+              href="#"
+              className="text-gray-400 hover:text-white transition duration-300"
+            >
+              Privacy Policy
+            </a>
+            <span className="text-gray-500">|</span>
+            <a
+              href="#"
+              className="text-gray-400 hover:text-white transition duration-300"
+            >
+              Terms of Service
+            </a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default App;

package/react/FunnyJokeTeller.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+
+interface Joke {
+  id: number;
+  type: string;
+  setup: string;
+  punchline: string;
+}
+
+export function FunnyJokeTeller(props: any) {
+  let [joke, setJoke] = useState<Joke>();
+  let [setupText, setSetupText] = useState("");
+  let [punchlineText, setPunchlineText] = useState("");
+  let [categoryText, setCategoryText] = useState("");
+  async function getFunnyJoke() {
+    const res = await fetch("/api/funnyJoke", {
+      method: "get",
+    });
+    const body = await res.json();
+    const newFunnyJoke = body.joke;
+    setJoke(newFunnyJoke);
+    setSetupText(newFunnyJoke.setup);
+    setPunchlineText(newFunnyJoke.punchline);
+    setCategoryText(newFunnyJoke.type);
+  }
+
+  return (
+    <section id="funny-joke">
+      {" "}
+      <button
+        className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105 mt-5 mb-5"
+        onClick={getFunnyJoke}
+      >
+        Get funny joke
+      </button>
+      {joke && (
+        <div>
+          <div>{setupText}</div>
+          <div>{punchlineText}</div>
+        </div>
+      )}
+    </section>
+  );
+}

package/react/index.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/react/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SwizzyWebSite</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/react/index.tsx

@@ -0,0 +1,19 @@
+// ./react/index.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client'; // Import from 'react-dom/client' for React 18+
+import App from './App'; // Assuming your main component is in App.tsx
+
+// Import your main CSS file (e.g., where Tailwind's output is imported)
+import './index.css'; // Make sure this file exists and imports your Tailwind CSS
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+} else {
+  console.error('Root element with ID "root" not found in the document.');
+}

package/src/app.ts

@@ -0,0 +1,22 @@
+import { FunnyJokeClient } from "./client/index.js";
+import { SampleFrontendWebService } from "./web-service.js";
+
+export interface GetSampleFrontendWebserviceProps {
+  serviceArgs: {
+    funnyJokeBaseUrl?: string;
+  };
+}
+export async function getWebservice(
+  props: GetSampleFrontendWebserviceProps & any,
+) {
+  const state = {
+    funnyJokeClient: new FunnyJokeClient({
+      baseUrl: props.serviceArgs.funnyJokeBaseUrl,
+    }),
+  };
+  return new SampleFrontendWebService({
+    ...props,
+    ...props.serviceArgs,
+    state,
+  });
+}

package/src/client/funny-joke-client.ts

@@ -0,0 +1,29 @@
+const DEFAULT_BASE_URL = "https://official-joke-api.appspot.com";
+
+export interface Joke {
+  id: number;
+  punchline: string;
+  setup: string;
+  type: string;
+}
+
+export interface FunnyJokeClientProps {
+  baseUrl?: string;
+}
+export interface IFunnyJokeClient {
+  getFunnyJoke(request: any): Promise<Joke>;
+}
+
+export class FunnyJokeClient implements IFunnyJokeClient {
+  private baseUrl: string;
+  constructor(props: FunnyJokeClientProps) {
+    this.baseUrl = props.baseUrl ?? DEFAULT_BASE_URL;
+  }
+  async getFunnyJoke(request: any): Promise<Joke> {
+    const response = await fetch(`${this.baseUrl}/jokes/random`, {
+      method: "get",
+    });
+    const joke = await response.json();
+    return joke;
+  }
+}

package/src/client/index.ts

@@ -0,0 +1 @@
+export * from "./funny-joke-client.js";

package/src/routers/ApiRouter/api-router.ts

@@ -0,0 +1,49 @@
+import {
+  IWebRouterProps,
+  RequestIdMiddleware,
+  RequestLoggerMiddleware,
+  StateConverter,
+  StateConverterProps,
+  SwizzyRequestMiddleware,
+  WebRouter,
+} from "@swizzyweb/swizzy-web-service";
+import { SampleFrontendWebServiceState } from "../../web-service.js";
+import path from "path";
+// @ts-ignore
+import express from "@swizzyweb/express";
+import { FunnyJokeController } from "./controllers/funny-joke-controller.js";
+import { IFunnyJokeClient } from "../../client/index.js";
+export interface ApiRouterState {
+  funnyJokeClient: IFunnyJokeClient;
+}
+
+export interface ApiRouterProps
+  extends IWebRouterProps<SampleFrontendWebServiceState, ApiRouterState> {}
+export class ApiWebRouter extends WebRouter<
+  SampleFrontendWebServiceState,
+  ApiRouterState
+> {
+  constructor(props: ApiRouterProps) {
+    super({
+      ...props,
+      name: "ApiWebRouter",
+      path: "api",
+      stateConverter: ApiRouterStateConverter,
+      webControllerClasses: [FunnyJokeController],
+      middleware: [
+        SwizzyRequestMiddleware,
+        RequestIdMiddleware,
+        RequestLoggerMiddleware,
+      ],
+    });
+  }
+}
+
+const ApiRouterStateConverter: StateConverter<
+  SampleFrontendWebServiceState,
+  ApiRouterState
+> = async function (
+  props: StateConverterProps<SampleFrontendWebServiceState>,
+): Promise<ApiRouterState> {
+  return { ...props.state };
+};

package/src/routers/ApiRouter/controllers/funny-joke-controller.ts

@@ -0,0 +1,59 @@
+import {
+  DefaultStateExporter,
+  IWebControllerInitProps,
+  IWebControllerProps,
+  RequestMethod,
+  WebController,
+  WebControllerFunction,
+} from "@swizzyweb/swizzy-web-service";
+import { ApiRouterState, ApiWebRouter } from "../api-router.js";
+// @ts-ignore
+import { Request, Response, json } from "@swizzyweb/express";
+import path from "path";
+import { IFunnyJokeClient } from "../../../client/index.js";
+
+export interface FunnyJokeControllerState {
+  funnyJokeClient: IFunnyJokeClient;
+}
+
+export interface FunnyJokeControllerProps
+  extends IWebControllerProps<ApiRouterState, FunnyJokeControllerState> {}
+
+export class FunnyJokeController extends WebController<
+  ApiRouterState,
+  FunnyJokeControllerState
+> {
+  constructor(props: FunnyJokeControllerProps) {
+    super({
+      ...props,
+      name: "FunnyJokeController",
+      action: "funnyJoke",
+      method: RequestMethod.get,
+      stateConverter: DefaultStateExporter,
+      middleware: [],
+    });
+  }
+
+  protected async getInitializedController(
+    props: IWebControllerInitProps<ApiRouterState> & {
+      state: FunnyJokeControllerState | undefined;
+    },
+  ): Promise<WebControllerFunction> {
+    const logger = this.logger;
+    const getState = this.getState.bind(this);
+    return async function (req: Request, res: Response) {
+      logger.info("We got a jokster lookin for jokes!");
+      try {
+        const { funnyJokeClient } = getState()!;
+        const joke = await funnyJokeClient.getFunnyJoke({});
+        res.json({
+          message: "Here's your funny joke",
+          joke,
+        });
+      } catch (e: any) {
+        res.status(500);
+        res.json({ message: "Internal error occurred" });
+      }
+    };
+  }
+}

package/src/routers/PageRouter/page-router.ts

@@ -0,0 +1,52 @@
+import {
+  IWebRouterProps,
+  RequestIdMiddleware,
+  RequestLoggerMiddleware,
+  StateConverter,
+  StateConverterProps,
+  SwizzyRequestMiddleware,
+  WebRouter,
+} from "@swizzyweb/swizzy-web-service";
+import { SampleFrontendWebServiceState } from "../../web-service.js";
+import path from "path";
+// @ts-ignore
+import express from "@swizzyweb/express";
+import { fileURLToPath } from "node:url";
+
+// This gives you the directory where *this* file is located
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export interface PageRouterState {}
+
+export interface PageRouterProps
+  extends IWebRouterProps<SampleFrontendWebServiceState, PageRouterState> {}
+export class PageWebRouter extends WebRouter<
+  SampleFrontendWebServiceState,
+  PageRouterState
+> {
+  constructor(props: PageRouterProps) {
+    super({
+      ...props,
+      name: "PageWebRouter",
+      path: "",
+      stateConverter: PageRouterStateConverter,
+      webControllerClasses: [],
+      middleware: [
+        SwizzyRequestMiddleware,
+        RequestIdMiddleware,
+        RequestLoggerMiddleware,
+        () => express.static(path.join(__dirname, "../../../bundle")),
+      ],
+    });
+  }
+}
+
+const PageRouterStateConverter: StateConverter<
+  SampleFrontendWebServiceState,
+  PageRouterState
+> = async function (
+  props: StateConverterProps<SampleFrontendWebServiceState>,
+): Promise<PageRouterState> {
+  return { ...props.state };
+};

package/src/web-service.ts

@@ -0,0 +1,27 @@
+import { IWebServiceProps, WebService } from "@swizzyweb/swizzy-web-service";
+import { PageWebRouter } from "./routers/PageRouter/page-router.js";
+import { ApiWebRouter } from "./routers/ApiRouter/api-router.js";
+import { FunnyJokeClient, IFunnyJokeClient } from "./client/index.js";
+
+export interface SampleFrontendWebServiceState {
+  funnyJokeClient: IFunnyJokeClient;
+}
+
+export interface SampleFrontendWebServiceProps
+  extends IWebServiceProps<SampleFrontendWebServiceState> {
+  port: number;
+  path?: string;
+}
+
+export class SampleFrontendWebService extends WebService<SampleFrontendWebServiceState> {
+  constructor(props: SampleFrontendWebServiceProps) {
+    super({
+      ...props,
+      name: "SampleFrontendWebService",
+      path: props.path ?? "",
+      packageName: "@swizzyweb/swizzy-frontend-template-web-service",
+      routerClasses: [PageWebRouter, ApiWebRouter],
+      middleware: [],
+    });
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,25 @@
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // This 'content' array is CRUCIAL. It tells Tailwind where to look for
+  // all the utility classes you are using in your project.
+  content: [
+    // This glob pattern is designed to scan all JavaScript, JSX, TypeScript,
+    // and TSX files within your 'react' directory and any of its subdirectories.
+    // This is where your App.tsx and other React components reside.
+    "./react/**/*.{js,jsx,ts,tsx}",
+    // If your main index.html file (the template used by HtmlWebpackPlugin)
+    // also contains Tailwind classes (e.g., on the <body> tag), include it here.
+    "./react/index.html",
+  ],
+  theme: {
+    extend: {
+      // Ensure your custom font 'Inter' is defined here if you're using it.
+      fontFamily: {
+        inter: ["Inter", "sans-serif"],
+      },
+      // Any other theme extensions (custom colors, spacing, etc.) would go here.
+    },
+  },
+  plugins: [], // Add any Tailwind CSS plugins here if you use them (e.g., @tailwindcss/forms)
+};

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2024", // Or a more recent ECMAScript version (e.g., "es2020", "esnext") based on your Node.js environment
+    "module": "nodenext", // Or "esnext" if your service uses ES modules (and you have "type": "module" in package.json)
+    "outDir": "./dist", // Output directory for compiled JavaScript files from your service code
+    //"rootDir": "./", // Specifies the root directory of input files. Relative to this tsconfig.json.
+    "strict": true, // Enable all strict type-checking options for robust code
+    "esModuleInterop": true, // Allows default imports from modules with no default export
+    "skipLibCheck": true, // Skip type checking of all declaration files (*.d.ts)
+    "forceConsistentCasingInFileNames": true, // Ensure consistent casing for file paths
+    "resolveJsonModule": true, // Allows importing .json files in your service code
+    "sourceMap": true, // Generates source map files for debugging
+    "isolatedModules": true
+  },
+  "include": [
+    // Include all .ts files in the current directory (./src/) and its subdirectories
+    "src" // Include declaration files if any
+    //"react/home.tsx",
+    //    "react/search.tsx"
+  ],
+  "exclude": [
+    "node_modules", // Exclude the node_modules directory
+    "./react", // Explicitly exclude the React application's directory
+    "./bundle" // Exclude the webpack output directory
+  ]
+}

package/webpack.config.cjs

@@ -0,0 +1,111 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // Import the CSS extraction plugin
+
+module.exports = {
+  // Set the mode to 'development' for easier debugging during development.
+  // Change to 'production' for optimized, minified output suitable for deployment.
+  mode: "development",
+
+  // The main entry point for your React application.
+  // Webpack starts building its dependency graph from this file.
+  // Ensure that 'index.tsx' exists inside your './react/' directory.
+  entry: "./react/index.tsx",
+
+  // Configuration for where Webpack should output the bundled files.
+  output: {
+    // The absolute path to the output directory.
+    // path.resolve(__dirname, 'bundle') creates a 'bundle' folder
+    // at the root of your project (where this webpack.config.js resides).
+    path: path.resolve(__dirname, "bundle"),
+    // The name of the main JavaScript bundle file.
+    filename: "js/bundle.js",
+    // This option cleans the output directory ('./bundle/') before each new build.
+    // This prevents old, unused files from accumulating.
+    clean: true,
+  },
+
+  // Rules define how different types of modules (files) are processed by Webpack.
+  module: {
+    rules: [
+      {
+        // This rule applies to files with .js, .jsx, .ts, or .tsx extensions.
+        test: /\.(js|jsx|ts|tsx)$/,
+        // Exclude files from the 'node_modules' directory to speed up compilation,
+        // as these are typically pre-compiled.
+        exclude: /node_modules/,
+        use: {
+          // 'babel-loader' is used to transpile (convert) modern JavaScript,
+          // JSX, and TypeScript code into a format compatible with older browsers.
+          loader: "babel-loader",
+          options: {
+            // Babel presets define sets of transformations.
+            presets: [
+              "@babel/preset-env", // Transpiles modern JavaScript (ES6+) to ES5.
+              "@babel/preset-react", // Transpiles JSX syntax into React.createElement calls.
+              "@babel/preset-typescript", // Transpiles TypeScript into JavaScript.
+            ],
+          },
+        },
+      },
+      {
+        // This rule applies to CSS files.
+        test: /\.css$/,
+        // The 'use' array specifies the loaders to apply, in reverse order.
+        use: [
+          // 1. MiniCssExtractPlugin.loader: Extracts CSS into separate files.
+          //    This is crucial for getting a physical 'styles.css' file in your bundle.
+          MiniCssExtractPlugin.loader,
+          // 2. 'css-loader': Interprets `@import` and `url()` like `import`/`require()`
+          //    and resolves them. It turns CSS into CommonJS modules.
+          "css-loader",
+          // 3. 'postcss-loader': Processes CSS with PostCSS plugins.
+          //    This is where Tailwind CSS and Autoprefixer are applied,
+          //    using your 'postcss.config.js' configuration.
+          "postcss-loader",
+        ],
+      },
+    ],
+  },
+
+  // Configure how modules are resolved.
+  resolve: {
+    // This allows you to import modules without specifying their file extensions.
+    // For example, you can write `import App from './App'` instead of `import App from './App.tsx'`.
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
+  },
+
+  // Plugins extend Webpack's capabilities beyond simple module transformations.
+  plugins: [
+    // HtmlWebpackPlugin: Simplifies the creation of HTML files to serve your webpack bundles.
+    // It automatically injects your bundled JavaScript and CSS into the HTML.
+    new HtmlWebpackPlugin({
+      // The template HTML file to use. This file should be in your './react/' directory.
+      template: "./react/index.html",
+      // The name of the output HTML file that will be placed in the 'bundle' directory.
+      filename: "index.html",
+    }),
+    // MiniCssExtractPlugin: Extracts CSS into separate files.
+    // This plugin works in conjunction with its loader (defined in module.rules)
+    // to create a dedicated CSS file (e.g., 'styles.css').
+    new MiniCssExtractPlugin({
+      // The filename for the extracted CSS file.
+      filename: "css/styles.css", // You can customize this name if you wish
+    }),
+  ],
+
+  // Configuration for the Webpack Development Server (optional, for local development).
+  devServer: {
+    // Specifies the directory from which to serve static files.
+    // In this case, it serves files from your 'bundle' directory.
+    static: {
+      directory: path.join(__dirname, "bundle"),
+    },
+    // Enables GZIP compression for everything served by the development server.
+    compress: true,
+    // The port on which the development server will run.
+    port: 3000,
+    // Automatically opens your default web browser to the application when the server starts.
+    open: true,
+  },
+};