Updated copyright year

Bumps [react-router](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router) from 7.9.5 to 7.9.6.
- [Release notes](https://github.com/remix-run/react-router/releases)
- [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router/CHANGELOG.md)
- [Commits](https://github.com/remix-run/react-router/commits/react-router@7.9.6/packages/react-router)

---
updated-dependencies:
- dependency-name: react-router
  dependency-version: 7.9.6
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

.envdev

@@ -1,6 +1,8 @@
 WEB_PORT=3000
 
 DB_HOSTNAME=localhost
+DB_PORTNAME=3306
+
 DB_DATABASE=template
 DB_USERNAME=template
 DB_PASSWORD=pikachu

.github/dependabot.yml

@@ -0,0 +1,10 @@
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+
+

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2021 Kayne Ruse, KR Game Studios
+Copyright (c) 2021-2023 Kayne Ruse, KR Game Studios
 
 This software is provided 'as-is', without any express or implied warranty. In no event will the authors be held liable for any damages arising from the use of this software.
 

README.md

@@ -7,7 +7,7 @@ The primary technology involved is:
 * React
 * Nodejs
 * MariaDB (with Sequelize)
-* Docker (with docker-compose)
+* Docker (with docker compose)
 
 This template is designed to support the development of persistent browser based games (PBBGs), but it, and it's component microservices, can be used elsewhere.
 
@@ -31,7 +31,7 @@ A clean install is this easy:
 git clone https://github.com/krgamestudios/MERN-template.git
 cd MERN-template
 node configure-script.js
-docker-compose up --build
+docker compose up --build
 ```
 
 # Setup Development
@@ -44,6 +44,7 @@ To set up this template in development mode:
 4. Run `cp .envdev .env` and enter your details into the `.env` file
 5. Execute `npm run dev`
 6. Navigate to `http://localhost:3001` in your web browser
+7. Repeat this process for each microservice (linked above)
 
 # Features List
 

client/client.jsx

@@ -1,6 +1,3 @@
-//polyfills
-import 'regenerator-runtime/runtime';
-
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 

client/pages/accounts/account.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, useRef } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, Navigate } from 'react-router';
 
 import ApplyToBody from '../utilities/apply-to-body';
 

client/pages/accounts/login.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, Navigate } from 'react-router';
 
 import ApplyToBody from '../utilities/apply-to-body';
 

client/pages/accounts/panels/logout.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { TokenContext } from '../../utilities/token-provider';
 

client/pages/accounts/recover.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -9,12 +9,15 @@ import { TokenContext } from '../utilities/token-provider';
 const validateEmail = require('../../../common/utilities/validate-email');
 
 const Recover = props => {
+	//history
+	const navigate = useNavigate();
+
 	//context
 	const authTokens = useContext(TokenContext);
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Navigate to='/' />;
+		navigate("/");
 	}
 
 	//refs
@@ -39,7 +42,7 @@ const Recover = props => {
 
 							//redirect
 							if (redirect) {
-								props.history.push('/');
+								navigate("/");
 							}
 						}
 					}>

client/pages/accounts/reset.jsx

@@ -1,21 +1,23 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Navigate } from 'react-router-dom';
-import queryString from 'query-string';
+import { Link, useNavigate, useSearchParams } from 'react-router';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
 const Reset = props => {
+	//params
+	const [params, setParams] = useSearchParams(); //the URLSearchParams API
+
+	//history
+	const navigate = useNavigate();
+
 	//context
 	const authTokens = useContext(TokenContext);
 
-	//query
-	const query = queryString.parse(props.location.search);
-
 	//misplaced?
-	if (authTokens.accessToken || !query.email || !query.token) {
-		return <Navigate to='/' />;
+	if (authTokens.accessToken || !params.has('email') || !params.has('token')) {
+		navigate("/");
 	}
 
 	//refs
@@ -31,7 +33,7 @@ const Reset = props => {
 					<h1 className='text centered'>Reset Password</h1>
 					<form className='constrained' onSubmit={async evt => {
 						evt.preventDefault();
-						const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, query);
+						const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, params);
 
 						if (err) {
 							alert(err);
@@ -42,7 +44,7 @@ const Reset = props => {
 
 						//redirect
 						if (redirect) {
-							props.history.push('/');
+							navigate("/");
 						}
 					}}>
 						<input type='password' name='password' placeholder='New Password' ref={passwordRef} />
@@ -56,7 +58,7 @@ const Reset = props => {
 	);
 };
 
-const update = async (password, retype, query) => {
+const update = async (password, retype, params) => {
 	if (password != retype) {
 		return ['Passwords do not match'];
 	}
@@ -65,7 +67,7 @@ const update = async (password, retype, query) => {
 		return ['Password is too short'];
 	}
 
-	const result = await fetch(`${process.env.AUTH_URI}/auth/reset?email=${query.email}&token=${query.token}`, {
+	const result = await fetch(`${process.env.AUTH_URI}/auth/reset?email=${params.get('email')}&token=${params.get('token')}`, {
 		method: 'PATCH',
 		headers: {
 			'Content-Type': 'application/json'

client/pages/accounts/signup.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -10,12 +10,15 @@ const validateEmail = require('../../../common/utilities/validate-email');
 const validateUsername = require('../../../common/utilities/validate-username');
 
 const Signup = props => {
+	//history
+	const navigate = useNavigate();
+
 	//context
 	const authTokens = useContext(TokenContext);
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Navigate to='/' />;
+		navigate("/");
 	}
 
 	//refs
@@ -44,7 +47,7 @@ const Signup = props => {
 
 							//redirect
 							if (redirect) {
-								props.history.push('/');
+								navigate("/");
 							}
 						}
 					}>

client/pages/administration/admin.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, Navigate } from 'react-router';
 
 import ApplyToBody from '../utilities/apply-to-body';
 

client/pages/administration/mod.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, Navigate } from 'react-router';
 
 import ApplyToBody from '../utilities/apply-to-body';
 

client/pages/administration/panels/chat-reports.jsx

@@ -7,16 +7,13 @@ const ChatReports = props => {
 
 	const authTokens = useContext(TokenContext);
 
-	useEffect(async () => {
-		const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`);
-
-		if (!result.ok) {
-			const err = `${result.status}: ${await result.text()}`;
-			console.log(err);
-			alert(err);
-		} else {
-			setReports(await result.json());
-		}
+	useEffect(() => {
+		authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`)
+			.then(res => res.json())
+			.then(json => {
+				setReports(json);
+			})
+		;
 	}, []);
 
 	return (

client/pages/administration/panels/news-editor.jsx

@@ -17,16 +17,13 @@ const NewsEditor = props => {
 	const [index, setIndex] = useState(null);
 
 	//run once
-	useEffect(async () => {
-		const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`);
-
-		if (!result.ok) {
-			const err = `${result.status}: ${await result.text()}`;
-			console.log(err);
-			alert(err);
-		} else {
-			setArticles(await result.json());
-		}
+	useEffect(() => {
+		fetch(`${process.env.NEWS_URI}/news/metadata?page_size=999`)
+			.then(res => res.json())
+			.then(json => {
+				setArticles(json)
+			})
+		;
 	}, []);
 
 	return (

client/pages/app.jsx

@@ -1,6 +1,6 @@
 //react
 import React, { useContext, Suspense, lazy } from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router';
 import { TokenContext } from './utilities/token-provider';
 
 //styling

client/pages/dashboard.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, Navigate } from 'react-router';
 
 import ApplyToBody from './utilities/apply-to-body';
 

client/pages/homepage.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, Navigate } from 'react-router';
 
 import ApplyToBody from './utilities/apply-to-body';
 

client/pages/not-found.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import ApplyToBody from './utilities/apply-to-body';
 

client/pages/panels/footer.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 const Break = () => {
 	return (
@@ -13,7 +13,7 @@ const Break = () => {
 const Footer = () => {
 	return (
 		<footer>
-			<p className='text centered'>© <a href='https://krgamestudios.com'>KR Game Studios</a> 2020-2022<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
+			<p className='text centered'>© <a href='https://krgamestudios.com'>KR Game Studios</a> 2020-2025<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
 		</footer>
 	);
 };

client/pages/static/credits.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 const Static = props => {
 	return (

client/pages/static/privacy-policy.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 const Static = props => {
 	return (

client/pages/utilities/token-provider.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, createContext } from 'react';
-import decode from 'jwt-decode';
+import { jwtDecode } from 'jwt-decode';
 
 export const TokenContext = createContext();
 
@@ -9,6 +9,12 @@ const TokenProvider = props => {
 	//state to be used
 	const [accessToken, setAccessToken] = useState('');
 
+	//force a logout under certain conditions
+	const forceLogout = () => {
+		localStorage.removeItem("accessToken");
+		setAccessToken("");
+	};
+
 	//make the access token persist between reloads
 	useEffect(() => {
 		setAccessToken(localStorage.getItem("accessToken") || '');
@@ -25,7 +31,7 @@ const TokenProvider = props => {
 		let bearer = accessToken;
 
 		//if expired (10 minutes, normally)
-		const expired = new Date(decode(accessToken).exp * 1000) < Date.now();
+		const expired = new Date(jwtDecode(accessToken).exp) < Date.now() / 1000;
 
 		if (expired) {
 			//BUGFIX: if logging out, just skip over the refresh token
@@ -42,11 +48,17 @@ const TokenProvider = props => {
 			//ping the auth server for a new access token
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
+				headers: {
+					'Authorization': `Bearer ${bearer}`
+				},
 				credentials: 'include'
 			});
 
 			//any errors, throw them
 			if (!response.ok) {
+				if (response.status == 403) {
+					forceLogout();
+				}
 				throw `${response.status}: ${await response.text()}`;
 			}
 
@@ -70,18 +82,27 @@ const TokenProvider = props => {
 
 	//access the refreshed token via callback
 	const tokenCallback = async (cb) => {
+		//use this?
+		let bearer = accessToken;
+
 		//if expired (10 minutes, normally)
-		const expired = new Date(decode(accessToken).exp * 1000) < Date.now();
+		const expired = new Date(jwtDecode(accessToken).exp) < Date.now() / 1000;
 
 		if (expired) {
 			//ping the auth server for a new token
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
+				headers: {
+					'Authorization': `Bearer ${bearer}`
+				},
 				credentials: 'include'
 			});
 
 			//any errors, throw them
 			if (!response.ok) {
+				if (response.status == 403) {
+					forceLogout();
+				}
 				throw `${response.status}: ${await response.text()}`;
 			}
 
@@ -98,7 +119,7 @@ const TokenProvider = props => {
 	};
 
 	return (
-		<TokenContext.Provider value={{ accessToken, setAccessToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
+		<TokenContext.Provider value={{ accessToken, setAccessToken, tokenFetch, tokenCallback, getPayload: () => jwtDecode(accessToken) }}>
 			{props.children}
 		</TokenContext.Provider>
 	)

configure-script.js

@@ -36,7 +36,7 @@ const question = (prompt, def = null) => {
 
 Currently, all microservices are mandatory; you'll have to mess with the result
 and the source code if you wish to be more selective. Microservices currently
-impelented are:
+implemented are:
 
 * auth-server
 * news-server
@@ -46,25 +46,63 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 `
 );
 
-	//determine local computer address for mac user vs everyone else
-	let macUser = '';
-	while (macUser.toLowerCase() !== 'yes' && macUser.toLowerCase() !== 'no') {
-		macUser = await question('Will the MERN Template be running locally on a MacOS system? (yes or no)', '');
-	}
+	// //determine local computer address for mac user vs everyone else
+	// let macUser = '';
+	// while (macUser.toLowerCase() !== 'yes' && macUser.toLowerCase() !== 'no') {
+	// 	macUser = await question('Will the MERN-Template be running locally on a MacOS system? (yes or no, this only alters startup.sql)', '');
+	// }
 
-	const localAddress = macUser ? 'localhost' : '%';
+	// const localAddress = macUser === 'yes' ? 'localhost' : '%';
+	const localAddress = '%';
 
 	//project configuration
 	const projectName = await question('Project Name', 'template');
 	const projectWebAddress = await question('Project Web Address', 'example.com');
 
+	const corsWebOrigin = await question('CORS Web Origin', `https://${projectWebAddress}`);
+
+  let projectDBLocation = '';
+  while (typeof projectDBLocation != 'string' || /^[le]/i.test(projectDBLocation[0]) == false) {
+    projectDBLocation = await question('Project [l]ocal or [e]xternal database?');
+  }
+
+  let projectDBHost = '';
+  let projectDBPort = '';
+
+  if (/^[l]/i.test(projectDBLocation[0])) {
+    projectDBHost = 'database';
+    projectDBPort = '3306';
+  }
+  else {
+    projectDBHost = await question('Project DB Host');
+    projectDBPort = await question('Project DB Port', '3306');
+  }
+
 	const projectDBUser = await question('Project DB Username', projectName);
 	const projectDBPass = await question('Project DB Password', 'pikachu');
 
 	//news configuration
 	const newsName = await question('News Name', 'news');
 	const newsWebAddress = await question('News Web Address', `${newsName}.${projectWebAddress}`);
-	const newsDBUser = await question('News DB Username', newsName);
+
+  let newsDBLocation = '';
+  while (typeof newsDBLocation != 'string' || /^[le]/i.test(newsDBLocation[0]) == false) {
+    newsDBLocation = await question('News [l]ocal or [e]xternal database?');
+  }
+
+  let newsDBHost = '';
+  let newsDBPort = '';
+
+  if (/^[l]/i.test(newsDBLocation[0])) {
+    newsDBHost = 'database';
+    newsDBPort = '3306';
+  }
+  else {
+    newsDBHost = await question('News DB Host');
+    newsDBPort = await question('News DB Port', '3306');
+  }
+
+  const newsDBUser = await question('News DB Username', newsName);
 	const newsDBPass = await question('News DB Password', 'venusaur');
 
 	//auth configuration
@@ -72,7 +110,25 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	const authWebAddress = await question('Auth Web Address', `${authName}.${projectWebAddress}`);
 	const authPostValidationHookArray = await question('Auth Post Validation Hook Array', '');
 	const authResetAddress = await question('Auth Reset Addr', `${projectWebAddress}/reset`);
-	const authDBUser = await question('Auth DB Username', authName);
+
+  let authDBLocation = '';
+  while (typeof authDBLocation != 'string' || /^[le]/i.test(authDBLocation[0]) == false) {
+    authDBLocation = await question('Auth [l]ocal or [e]xternal database?');
+  }
+
+  let authDBHost = '';
+  let authDBPort = '';
+
+  if (/^[l]/i.test(authDBLocation[0])) {
+    authDBHost = 'database';
+    authDBPort = '3306';
+  }
+  else {
+    authDBHost = await question('Auth DB Host');
+    authDBPort = await question('Auth DB Port', '3306');
+  }
+
+  const authDBUser = await question('Auth DB Username', authName);
 	const authDBPass = await question('Auth DB Password', 'charizard');
 
 	const emailSMTP = await question('Email SMTP', 'smtp.example.com');
@@ -83,7 +139,25 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	//chat goes here
 	const chatName = await question('Chat Name', 'chat');
 	const chatWebAddress = await question('Chat Web Address', `${chatName}.${projectWebAddress}`);
-	const chatDBUser = await question('Chat DB Username', chatName);
+
+  let chatDBLocation = '';
+  while (typeof chatDBLocation != 'string' || /^[le]/i.test(chatDBLocation[0]) == false) {
+    chatDBLocation = await question('Chat [l]ocal or [e]xternal database?');
+  }
+
+  let chatDBHost = '';
+  let chatDBPort = '';
+
+  if (/^[l]/i.test(chatDBLocation[0])) {
+    chatDBHost = 'database';
+    chatDBPort = '3306';
+  }
+  else {
+    chatDBHost = await question('Chat DB Host');
+    chatDBPort = await question('Chat DB Port', '3306');
+  }
+
+  const chatDBUser = await question('Chat DB Username', chatName);
 	const chatDBPass = await question('Chat DB Password', 'blastoise');
 
 	//database configuration
@@ -99,32 +173,34 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 
 	//MUST be at least 8 chars
 	let tmpPass = '';
+  let tmpHost = '';
 	while (defaultUser && tmpPass.length < 8) {
 		console.log('--All passwords must be at least 8 characters long--');
 		tmpPass = await question('Default Admin Pass', '');
+    tmpHost = await question('Default Admin Host', '');
 	}
 	const defaultPass = tmpPass;
+  const defaultHost = tmpHost;
 
 	if (defaultUser) {
-		console.log(`Default user email will be: ${defaultUser}@${authWebAddress}`);
+		console.log(`Default user email will be: ${defaultUser}@${defaultHost}`);
 	}
 
 	//traefic configuration
 	const supportEmail = await question('Support Email', emailUser);
 
 	//misc. configuration
-	const projectPort = 3000;
-	const newsPort = 3100;
-	const authPort = 3200;
-	const chatPort = 3300;
+	const projectPort = '3000';
+	const newsPort = '3100';
+	const authPort = '3200';
+	const chatPort = '3300';
 
 const ymlfile = `
-version: "3.6"
 services:
   ${projectName}:
     build: .
     ports:
-      - "${projectPort}"
+      - ${projectPort}
     labels:
       - traefik.enable=true
       - traefik.http.routers.${projectName}router.rule=Host(\`${projectWebAddress}\`)
@@ -133,8 +209,10 @@ services:
       - traefik.http.routers.${projectName}router.service=${projectName}service@docker
       - traefik.http.services.${projectName}service.loadbalancer.server.port=${projectPort}
     environment:
+      - WEB_ORIGIN=${corsWebOrigin}
       - WEB_PORT=${projectPort}
-      - DB_HOSTNAME=database
+      - DB_HOSTNAME=${projectDBHost}
+      - DB_PORTNAME=${projectDBPort}
       - DB_DATABASE=${projectName}
       - DB_USERNAME=${projectDBUser}
       - DB_PASSWORD=${projectDBPass}
@@ -143,10 +221,12 @@ services:
       - AUTH_URI=https://${authWebAddress}
       - CHAT_URI=https://${chatWebAddress}
       - SECRET_ACCESS=${accessToken}
+    volumes:
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-    depends_on:
-      - database
+    depends_on:${ projectDBHost != 'database' ? '' : `
+      - database`}
       - traefik
 
   ${newsName}:
@@ -161,18 +241,22 @@ services:
       - traefik.http.routers.${newsName}router.service=${newsName}service@docker
       - traefik.http.services.${newsName}service.loadbalancer.server.port=${newsPort}
     environment:
+      - WEB_ORIGIN=${corsWebOrigin}
       - WEB_PORT=${newsPort}
-      - DB_HOSTNAME=database
+      - DB_HOSTNAME=${newsDBHost}
+      - DB_PORTNAME=${newsDBPort}
       - DB_DATABASE=${newsName}
       - DB_USERNAME=${newsDBUser}
       - DB_PASSWORD=${newsDBPass}
       - DB_TIMEZONE=${dbTimeZone}
-      - QUERY_LIMIT=10
+      - PAGE_SIZE=10
       - SECRET_ACCESS=${accessToken}
+    volumes:
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-    depends_on:
-      - database
+    depends_on:${ newsDBHost != 'database' ? '' : `
+      - database`}
       - traefik
 
   ${authName}:
@@ -187,12 +271,14 @@ services:
       - traefik.http.routers.${authName}router.service=${authName}service@docker
       - traefik.http.services.${authName}service.loadbalancer.server.port=${authPort}
     environment:
+      - WEB_ORIGIN=${corsWebOrigin}
       - WEB_PROTOCOL=https
       - WEB_ADDRESS=${authWebAddress}
       - HOOK_POST_VALIDATION_ARRAY=${authPostValidationHookArray}
       - WEB_RESET_ADDRESS=${authResetAddress}
       - WEB_PORT=${authPort}
-      - DB_HOSTNAME=database
+      - DB_HOSTNAME=${authDBHost}
+      - DB_PORTNAME=${authDBPort}
       - DB_DATABASE=${authName}
       - DB_USERNAME=${authDBUser}
       - DB_PASSWORD=${authDBPass}
@@ -202,13 +288,16 @@ services:
       - MAIL_PASSWORD=${emailPass}
       - MAIL_PHYSICAL=${emailPhysical}
       - ADMIN_DEFAULT_USERNAME=${defaultUser}
+      - ADMIN_DEFAULT_HOSTNAME=${defaultHost}
       - ADMIN_DEFAULT_PASSWORD=${defaultPass}
       - SECRET_ACCESS=${accessToken}
       - SECRET_REFRESH=${refreshToken}
+    volumes:
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-    depends_on:
-      - database
+    depends_on:${ authDBHost != 'database' ? '' : `
+      - database`}
       - traefik
 
   ${chatName}:
@@ -223,19 +312,24 @@ services:
       - traefik.http.routers.${chatName}router.service=${chatName}service@docker
       - traefik.http.services.${chatName}service.loadbalancer.server.port=${chatPort}
     environment:
+      - WEB_ORIGIN=${corsWebOrigin}
       - WEB_PORT=${chatPort}
-      - DB_HOSTNAME=database
+      - DB_HOSTNAME=${chatDBHost}
+      - DB_PORTNAME=${chatDBPort}
       - DB_DATABASE=${chatName}
       - DB_USERNAME=${chatDBUser}
       - DB_PASSWORD=${chatDBPass}
       - DB_TIMEZONE=${dbTimeZone}
       - SECRET_ACCESS=${accessToken}
+    volumes:
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-    depends_on:
-      - database
+    depends_on:${ chatDBHost != 'database' ? '' : `
+      - database`}
       - traefik
 
+${ [projectDBHost, newsDBHost, authDBHost, chatDBHost].some(x => x == "database") == false ? '' : `
   database:
     image: mariadb
     restart: always
@@ -244,11 +338,12 @@ services:
     volumes:
       - ./mysql:/var/lib/mysql
       - ./startup.sql:/docker-entrypoint-initdb.d/startup.sql:ro
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-
+`}
   traefik:
-    image: traefik:v2.4
+    image: traefik:latest
     container_name: traefik
     command:
       - --log.level=ERROR
@@ -269,6 +364,7 @@ services:
     volumes:
       - ./letsencrypt:/letsencrypt
       - /var/run/docker.sock:/var/run/docker.sock:ro
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
 
@@ -278,12 +374,12 @@ networks:
 `;
 
 	const dockerfile = `
-FROM node:18
+FROM node:22-bookworm-slim
 WORKDIR "/app"
 COPY . /app
-RUN mkdir /app/public
+RUN mkdir -p /app/public
 RUN chown node:node /app/public
-RUN npm install --production
+RUN npm install --omit=dev
 EXPOSE ${projectPort}
 USER node
 ENTRYPOINT ["bash", "-c"]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mern-template",
-  "version": "1.3.3",
+  "version": "1.5.5",
   "description": "A website template using the MERN stack.",
   "main": "server/server.js",
   "scripts": {
@@ -10,10 +10,7 @@
     "build:client": "webpack --env=production --config webpack.config.js",
     "dev": "concurrently npm:dev:server npm:dev:client",
     "dev:server": "nodemon --ext js,jsx,json --ignore 'node_modules/*'",
-    "dev:client": "webpack serve --env=development --config webpack.config.js",
-    "local": "concurrently npm:local:server npm:local:client",
-    "local:server": "nodemon --ext js,jsx,json --ignore 'node_modules/*'",
-    "local:client": "webpack serve --env=local --config webpack.config.js",
+    "dev:client": "webpack serve --config webpack.config.js",
     "analyze": "webpack --env=production --env=analyze --config webpack.config.js"
   },
   "repository": {
@@ -21,41 +18,39 @@
     "url": "git+https://github.com/KRGameStudios/MERN-template.git"
   },
   "author": "Kayne Ruse",
-  "license": "ISC",
+  "license": "Zlib",
   "bugs": {
     "url": "https://github.com/KRGameStudios/MERN-template/issues"
   },
   "homepage": "https://github.com/KRGameStudios/MERN-template#readme",
   "dependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "babel-loader": "^8.3.0",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",
-    "compression-webpack-plugin": "^10.0.0",
-    "concurrently": "^7.5.0",
-    "css-loader": "^6.7.1",
+    "compression-webpack-plugin": "^11.1.0",
+    "concurrently": "^9.2.1",
+    "css-loader": "^7.1.2",
     "dateformat": "^5.0.3",
-    "dotenv": "^16.0.3",
-    "express": "^4.18.2",
-    "html-webpack-plugin": "^5.5.0",
-    "jwt-decode": "^3.1.2",
-    "mariadb": "^3.0.2",
-    "query-string": "^7.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.4.3",
-    "react-select": "^5.6.0",
-    "sequelize": "^6.25.5",
-    "socket.io-client": "^4.5.3",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.7.0",
-    "webpack-cli": "^4.10.0"
+    "dotenv": "^17.2.3",
+    "express": "^5.2.1",
+    "html-webpack-plugin": "^5.6.5",
+    "jwt-decode": "^4.0.0",
+    "mariadb": "^3.4.5",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-router": "^7.10.1",
+    "react-select": "^5.10.2",
+    "sequelize": "^6.37.7",
+    "socket.io-client": "^4.8.1",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.103.0",
+    "webpack-bundle-analyzer": "^5.1.0",
+    "webpack-cli": "^6.0.1"
   },
   "devDependencies": {
-    "nodemon": "^2.0.20",
-    "webpack-dev-server": "^4.11.1"
+    "nodemon": "^3.1.11",
+    "webpack-dev-server": "^5.2.2"
   }
 }

server/database/index.js

@@ -2,11 +2,10 @@ const Sequelize = require('sequelize');
 
 const sequelize = new Sequelize(process.env.DB_DATABASE, process.env.DB_USERNAME, process.env.DB_PASSWORD, {
 	host: process.env.DB_HOSTNAME,
+	port: process.env.DB_PORTNAME,
 	dialect: 'mariadb',
 	timezone: process.env.DB_TIMEZONE,
 	logging: process.env.DB_LOGGING ? console.log : false
 });
 
-sequelize.sync();
-
-module.exports = sequelize;
+module.exports = sequelize;

server/server.js

@@ -13,14 +13,14 @@ const server = require('http').Server(app);
 app.use(express.json());
 
 //handle compressed files (middleware)
-app.get('*.js', (req, res, next) => {
+app.get('/{*any}.js', (req, res, next) => {
 	req.url = req.url + '.gz';
 	res.set('Content-Encoding', 'gzip');
 	res.set('Content-Type', 'text/javascript');
 	next();
 });
 
-app.get('*.css', (req, res, next) => {
+app.get('/{*any}.css', (req, res, next) => {
 	req.url = req.url + '.gz';
 	res.set('Content-Encoding', 'gzip');
 	res.set('Content-Type', 'text/css');
@@ -34,7 +34,7 @@ const database = require('./database');
 app.use('/', express.static(path.resolve(__dirname, '..', 'public')));
 
 //fallback to the index file
-app.get('*', (req, res) => {
+app.get('/{*any}', (req, res) => {
 	res.sendFile(path.resolve(__dirname, '..', 'public' , 'index.html'));
 });
 
@@ -42,4 +42,5 @@ app.get('*', (req, res) => {
 server.listen(process.env.WEB_PORT || 3000, async (err) => {
 	await database.sync();
 	console.log(`listening to localhost:${process.env.WEB_PORT || 3000}`);
+	console.log(`database located at ${process.env.DB_HOSTNAME || '<default>'}:${process.env.DB_PORTNAME || '<default>'}`);
 });

tools/create_database.sql

@@ -1,10 +1,5 @@
-#This file only needs to be run once, during initial development setup
-#This file isnt needed for actual deployment
+#use this while debugging
+CREATE DATABASE template;
+CREATE USER 'template'@'%' IDENTIFIED BY 'pikachu';
+GRANT ALL PRIVILEGES ON template.* TO 'template'@'%';
 
-#Create the development database
-CREATE DATABASE IF NOT EXISTS template;
-USE template;
-
-#Create the database user
-CREATE USER IF NOT EXISTS 'template'@'%' IDENTIFIED BY 'pikachu';
-GRANT ALL PRIVILEGES ON template.* TO 'template'@'%';

webpack.config.js

@@ -9,7 +9,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const path = require('path');
 
 //the exported config function
-module.exports = ({ production, development, local, analyze }) => {
+module.exports = ({ production, analyze }) => {
 	return {
 		mode: production ? "production" : "development",
 		entry: path.resolve(__dirname, 'client', 'client.jsx'),
@@ -33,7 +33,6 @@ module.exports = ({ production, development, local, analyze }) => {
 							loader: 'babel-loader',
 							options: {
 								presets: ['@babel/preset-env', '@babel/preset-react'],
-								plugins: ['@babel/plugin-syntax-dynamic-import']
 							}
 						}
 					]
@@ -48,9 +47,9 @@ module.exports = ({ production, development, local, analyze }) => {
 			new DefinePlugin({
 				'process.env': {
 					'PRODUCTION': production,
-					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : development ? '"https://dev-news.krgamestudios.com"' : '"http://localhost:3100"',
-					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : development ? '"https://dev-auth.krgamestudios.com"' : '"http://localhost:3200"',
-					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : development ? '"https://dev-chat.krgamestudios.com"' : '"http://localhost:3300"',
+					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : '"http://localhost:3100"',
+					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"http://localhost:3200"',
+					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"http://localhost:3300"',
 				}
 			}),
 			new CleanWebpackPlugin({
@@ -91,11 +90,12 @@ module.exports = ({ production, development, local, analyze }) => {
 				}
 			},
 
-			proxy: {
-				'/api': {
-					target: 'http://localhost:3000'
+			proxy: [
+				{
+					context: ['/api'],
+					target: 'http://localhost:3000',
 				}
-			},
+			],
 
 			static: '/public',