feat: create starter TS setup with express

feat: add CSS examples
feat: add img example
feat: add views example
feat: add .env example
feat: add example interface
feat: add logger util

.gitignore

@@ -0,0 +1,175 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

example.env

@@ -0,0 +1 @@
+EXPRESS_PORT=4300

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "ts_expressstarter",
+  "module": "src/app.ts",
+  "type": "module",
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "@types/dotenv": "^8.2.0",
+    "@types/express": "^4.17.21",
+    "body-parser": "^1.20.2",
+    "dotenv": "^16.4.5",
+    "ejs": "^3.1.9",
+    "express": "^4.18.3",
+    "express-session": "^1.18.0",
+    "mongoose": "^8.2.2",
+    "socket.io": "^4.7.5"
+  }
+}

src/app.ts

@@ -0,0 +1,42 @@
+//----------------------------------------------->
+// Imports
+//----------------------------------------------->
+
+// Dependencies
+import express, { type Express, type Request, type Response } from "express";
+import dotenv from "dotenv";
+dotenv.config();
+
+// Utils
+import log from "./utils/logger.ts";
+import * as path from "path";
+
+//----------------------------------------------->
+// Express - setup & configuration
+//----------------------------------------------->
+
+// Declare app as a new instance of express
+const app: Express = express();
+
+// Set static assets directory
+app.use(express.static(path.join(import.meta.dirname, "public")));
+
+// Set views directory and view engine
+app.set("views", path.join(import.meta.dirname, "views"));
+app.set("view engine", "ejs");
+
+//----------------------------------------------->
+// Express - routing setup
+//----------------------------------------------->
+
+app.get("/", (req: Request, res: Response) => {
+    res.render("home", { page: { title: "ExpressStarter: Home" } });
+})
+
+//----------------------------------------------->
+// Express - listen on specified port
+//----------------------------------------------->
+
+app.listen(process.env.EXPRESS_PORT, (): void => {
+    log.info("Initialization", `Listening on http://localhost:${process.env.EXPRESS_PORT}`);
+})

src/public/css/_components/button.css

@@ -0,0 +1,3 @@
+.button {
+    background-color: var(--color-primary);
+}

src/public/css/_modules/home.css

@@ -0,0 +1,3 @@
+body {
+    background-color: var(--color-background);
+}

src/public/css/_variables/colours.css

@@ -0,0 +1,6 @@
+:root {
+    --color-text: rgb(221, 221, 221);
+    --color-background: rgb(27, 27, 27);
+    --color-primary: rgb(204, 234, 174);
+    --color-secondary: rgb(164, 137, 198);
+}

src/public/css/all.css

@@ -0,0 +1,11 @@
+/* Variables */
+@import "_variables/colours.css";
+
+/* Base/Overrides */
+@import "base.css";
+
+/* Typography */
+@import "typography.css";
+
+/* Components */
+@import "_components/button.css";

src/public/css/base.css

@@ -0,0 +1,12 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    position: relative;
+}
+
+body {
+    min-width: 100vw;
+    background-color: var(--color-background);
+    color: var(--color-text);
+}

src/public/css/typography.css

@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 400;
+}

src/types/LoggerInterface.ts

@@ -0,0 +1,7 @@
+export interface LoggerInterface {
+    history: Array<string>,
+    constructLog(serviceName: string, message: string): string,
+    info(serviceName: string, content: string): void,
+    warn(serviceName: string, content: string): void,
+    error(serviceName: string, content: string): void
+}

src/utils/logger.ts

@@ -0,0 +1,45 @@
+//----------------------------------------------->
+// Imports
+//----------------------------------------------->
+
+import type {LoggerInterface} from "../types/LoggerInterface.ts";
+
+//----------------------------------------------->
+// Logger class
+//----------------------------------------------->
+
+class Logger implements LoggerInterface {
+    public history: Array<string>;
+    private colors: { warn: string; reset: string; error: string; info: string };
+
+    constructor() {
+        this.history = [];
+
+        this.colors = {
+            error: '\x1b[31m', // Red
+            warn: '\x1b[33m',  // Yellow
+            info: '\x1b[36m',  // Cyan
+            reset: '\x1b[0m',  // Reset color
+        };
+    }
+
+    constructLog(serviceName: string, message: string): string {
+        const timestamp: string = new Date().toISOString();
+        return `[${serviceName}/${timestamp}] ${message}`;
+    }
+
+    info(serviceName: string, content: string): void {
+        console.log(`${this.colors.info}${this.constructLog(serviceName, content)}${this.colors.reset}`);
+    }
+
+    error(serviceName: string, content: string): void {
+        console.log(`${this.colors.error}${this.constructLog(serviceName, content)}${this.colors.reset}`);
+    }
+
+    warn(serviceName: string, content: string): void {
+        console.log(`${this.colors.warn}${this.constructLog(serviceName, content)}${this.colors.reset}`);
+    }
+}
+
+const log: LoggerInterface = new Logger();
+export default log;

src/views/home.ejs

@@ -0,0 +1,8 @@
+<!Doctype html>
+<html lang="en">
+<!-- Include head -->
+<%- include("partials/head.ejs", { page }) %>
+<body>
+    <h1>Home!</h1>
+</body>
+</html>

src/views/partials/head.ejs

@@ -0,0 +1,5 @@
+<head>
+    <title><%- page.title %></title>
+    <link rel="stylesheet" href="/css/all.css">
+    <link rel="shortcut icon" href="/img/logo.png" type="image/png">
+</head>

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}