Initial commit

.gitignore

@@ -0,0 +1,27 @@
+node_modules/
+dist
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,2 @@
+# Docker-App-Template
+A template repo that supports a frontend (Svelte) and backend (Hapi)

api/dockerfile

@@ -0,0 +1,26 @@
+from node:19 as base
+
+workdir /app
+
+expose 6969
+
+run npm install --global typescript@4
+
+copy package*.json tsconfig.json /app/
+run npm install
+
+healthcheck CMD curl -f http://localhost:6969/health
+
+copy ./src ./src
+run tsc
+
+
+from base as dev
+run npm install
+cmd [ "/bin/bash" ]
+
+
+from base as prod
+run npm install --omit=dev
+run rm -rf src tsconfig.json
+cmd [ "NODE_ENV=production", "node", "dist/main.js" ]

api/makefile

@@ -0,0 +1,5 @@
+dev: build
+	NODE_ENVIRONMENT="development" node dist/main.js
+
+test:
+	./node_modules/ts-mocha/bin/ts-mocha -r tsconfig-paths/register --paths src/**/*.spec.ts

api/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "api",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/main.js",
+  "scripts": {
+    "test": ""
+  },
+  "author": "Oliver Akins",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@hapi/hapi": "^21.3.2",
+    "glob": "^10.3.3",
+    "joi": "^17.9.2",
+    "module-alias": "^2.2.3",
+    "tsconfig-paths": "^4.2.0",
+    "tslog": "^4.8.2"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.3.5",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "^20.4.7",
+    "chai": "^4.3.7",
+    "mocha": "^10.2.0",
+    "ts-mocha": "^10.0.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.6"
+  },
+  "_moduleAliases": {
+    "~": "./dist"
+  }
+}

api/src/endpoints/ping.spec.ts

@@ -0,0 +1,28 @@
+import { Server, ServerApplicationState } from "@hapi/hapi";
+import { describe } from "mocha";
+import { expect } from "chai";
+
+import { init } from "~/hapi";
+
+
+describe("GET /", async () => {
+	let server: Server<ServerApplicationState>;
+
+
+	beforeEach(async () => {
+		server = await init();
+	});
+
+	afterEach(async () => {
+		await server.stop();
+	});
+
+
+	it("should return 204 on success", async () => {
+		const res = await server.inject({
+			method: `GET`,
+			url: `/`,
+		});
+		expect(res.statusCode).to.equal(204);
+	});
+});

api/src/endpoints/ping.ts

@@ -0,0 +1,9 @@
+import { ServerRoute } from "@hapi/hapi";
+
+const route: ServerRoute = {
+	method: `GET`, path: `/`,
+	handler(_, h) {
+		return h.response().code(204);
+	},
+};
+export default route;

api/src/hapi.ts

@@ -0,0 +1,34 @@
+import { Server } from "@hapi/hapi";
+import { globSync } from "glob";
+import path from "path";
+
+
+const server = new Server({
+	port: 6969,
+	host: `0.0.0.0`,
+});
+
+
+async function registerRoutes() {
+	let files = globSync(
+		path.join(`endpoints`, `**`, `!(*.spec.js|*.map)`),
+		{ cwd: __dirname, nodir: true }
+	);
+	for (const file of files) {
+		let route = (await import(path.join(__dirname, file))).default;
+		server.route(route);
+	};
+};
+
+
+export async function init() {
+	await registerRoutes();
+	await server.initialize();
+	return server;
+};
+
+export async function start() {
+	await registerRoutes();
+	await server.start();
+	return server;
+};

api/src/main.ts

@@ -0,0 +1,35 @@
+// Filepath aliasing to avoid relative-imports whenever possible, this must stay
+// at the top of this file as the first statement
+import "module-alias/register";
+
+import { Logger } from "tslog";
+import { start } from "~/hapi";
+
+export const isDev = process.env.NODE_ENV?.startsWith(`dev`);
+
+let logLevel = 4;
+if (process.env.LOG_LEVEL) {
+	logLevel = parseInt(process.env.LOG_LEVEL);
+} else if (isDev) {
+	logLevel = 0;
+};
+
+export const log = new Logger({
+	minLevel: logLevel,
+	hideLogPositionForProduction: !isDev,
+	maskValuesOfKeys: [ `password`, `token` ],
+});
+
+
+async function main() {
+	let server = await start();
+	log.info(`Server listening`)
+};
+
+if (require.main === module) {
+	process.on(`unhandledRejection`, err => {
+		log.error(err);
+		process.exit(1);
+	});
+	main();
+};

api/tsconfig.json

@@ -0,0 +1,114 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2021",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": ".",                                  /* Specify the base directory to resolve non-relative module names. */
+    "paths": {
+      "~/*": [ "./src/*" ]
+    },                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  },
+  "exclude": [
+    "test"
+  ]
+}

docker-compose.yaml

@@ -0,0 +1,36 @@
+version: "3"
+name: "template"
+services:
+
+  api:
+    build:
+      context: "./api"
+      dockerfile: "dockerfile"
+      target: dev
+    ports:
+      - "6969:6969"
+    environment:
+      NODE_ENV: "dev"
+    healthcheck:
+      disable: true
+    volumes:
+      - "./api:/app"
+
+    stdin_open: true
+    tty: true
+
+
+  site:
+    build:
+      context: "./frontend"
+      dockerfile: "dockerfile"
+      target: "dev"
+    restart: "unless-stopped"
+    ports:
+      - "5173:5173"
+      - "8080:8080"
+    volumes:
+      - "./frontend:/app"
+
+    stdin_open: true
+    tty: true

frontend/.env

@@ -0,0 +1,2 @@
+VITE_API_URL=""
+VITE_APP_NAME=""

frontend/dockerfile

@@ -0,0 +1,17 @@
+from node:19 as base
+
+workdir /app
+
+copy package*.json /app
+run npm install
+copy . /app
+
+
+from base as dev
+cmd [ "/bin/bash" ]
+
+
+from base as prod
+run npm install --global http-server
+run npm run build
+cmd [ "http-server", "./dist", "--no-dotfiles" ]

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<link rel="icon" type="image/png" href="/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>%VITE_APP_NAME%</title>
+</head>
+<body>
+	<div id="app"></div>
+	<script type="module" src="/src/main.ts"></script>
+</body>
+</html>

frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@tsconfig/svelte": "^5.0.0",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.6",
+    "tslib": "^2.6.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  },
+  "dependencies": {
+    "svelte-i18n": "^3.7.0"
+  }
+}

frontend/public/locales/en-CA.json

@@ -0,0 +1,3 @@
+{
+	"docs.svelte": "Svelte Docs"
+}

frontend/src/App.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { _, locale, locales } from "svelte-i18n";
+import localeNames from "./locales";
+</script>
+
+<main>
+	<a href="https://svelte.dev/docs" target="_blank" rel="noreferrer">
+		{$_("docs.svelte")}
+	</a>
+	<br><br>
+	<select bind:value={$locale}>
+		{#each $locales as locale}
+			<option value="{locale}">{localeNames[locale]}</option>
+		{/each}
+	</select>
+</main>
+
+<style>
+</style>

frontend/src/app.css

@@ -0,0 +1,17 @@
+html, body {
+	padding: 0;
+	margin: 0;
+	min-height: 100vh;
+	min-width: 100vw;
+}
+
+body {
+	background-color: #2c2c32;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+a {
+	color: white;
+}

frontend/src/locales.ts

@@ -0,0 +1,8 @@
+export default {
+	"en-CA": "English (Canada)", // Canadian English
+	// "en-US": "English (United States)", // US English
+	// "en-GB": "English (Britain)", // British English
+	// "sv": "Svenska", // Swedish
+	// "cz": "", // Czech
+	// "nl": "", // Dutch
+};

frontend/src/main.ts

@@ -0,0 +1,23 @@
+import { getLocaleFromNavigator, init, register } from "svelte-i18n";
+import "./app.css";
+import App from "./App.svelte";
+
+// Get all of the internationalization stuff registered and operational
+import locales from "./locales";
+for (const locale in locales) {
+	register(
+		locale,
+		() => fetch(`/locales/${locale}.json`).then(r => r.json())
+	);
+};
+await init({
+	fallbackLocale: `en-CA`,
+	initialLocale: getLocaleFromNavigator(),
+});
+
+
+const app = new App({
+	target: document.getElementById("app"),
+});
+
+export default app

frontend/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

frontend/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+export default {
+	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+}

frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite"
+import { svelte } from "@sveltejs/vite-plugin-svelte"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [svelte()],
+})