Fully tested the remote database

Added default host for the admin account

.envdev

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

.github/FUNDING.yml

@@ -0,0 +1,5 @@
+# These are supported funding model platforms
+
+patreon: krgamestudios
+ko_fi: krgamestudios
+custom: ["https://www.paypal.com/donate/?hosted_button_id=73Q82T2ZHV8AA"]

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
@@ -39,7 +39,7 @@ docker-compose up --build
 To set up this template in development mode:
 
 1. Ensure mariadb is running in your development environment
-2. Run `mariadb sql/create_database.sql` as the root user
+2. Run `mariadb tools/create_database.sql` as the root user
 3. Run `npm install`
 4. Run `cp .envdev .env` and enter your details into the `.env` file
 5. Execute `npm run dev`
@@ -56,6 +56,8 @@ To set up this template in development mode:
 	- Account deletion
 	- Password management
 	- JSON web token authentication
+	- HttpOnly cookies for security
+	- Optional post validation hook
 - Fully Featured News Blog (as a microservice)
 	- Publish, edit or delete articles as needed
 	- Secured via admin panel

client/client.jsx

@@ -2,14 +2,16 @@
 import 'regenerator-runtime/runtime';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 import App from './pages/app';
 import TokenProvider from './pages/utilities/token-provider';
 
-ReactDOM.render(
-	<TokenProvider>
-		<App />
-	</TokenProvider>,
-	document.querySelector('#root')
-);
+ReactDOM
+	.createRoot(document.getElementById('root'))
+	.render(
+		<TokenProvider>
+			<App />
+		</TokenProvider>
+	)
+;

client/markdown/credits.md

@@ -1,10 +0,0 @@
-<header>
-	<h1 class="text centered">Credits</h1>
-</header>
-
-## MERN-template
-
-The MERN-template developed by Kayne Ruse, KR Game Studios
-
-[https://github.com/krgamestudios/MERN-template](https://github.com/krgamestudios/MERN-template)
-

client/markdown/privacy-policy.md

@@ -1,4 +0,0 @@
-<header>
-	<h1 class="text centered">Privacy Policy</h1>
-</header>
-

client/pages/accounts/account.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -13,7 +13,7 @@ const Account = props => {
 
 	//misplaced?
 	if (!authTokens.accessToken) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	//refs
@@ -23,12 +23,7 @@ const Account = props => {
 
 	//grab the user's info
 	useEffect(() => {
-		authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
-			method: 'GET',
-			headers: {
-				'Access-Control-Allow-Origin': '*'
-			}
-		})
+		authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`)
 			.then(blob => blob.json())
 			.then(json => contactRef.current.checked = json.contact)
 			.catch(e => console.error(e))
@@ -88,7 +83,6 @@ const update = async (password, retype, contact, tokenFetch) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 		method: 'PATCH',
 		headers: {
-			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({

client/pages/accounts/login.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -13,7 +13,7 @@ const Login = props => {
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	//refs
@@ -31,17 +31,16 @@ const Login = props => {
 							async evt => {
 								//on submit
 								evt.preventDefault();
-								const [err, newTokens] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
+								const [err, accessToken] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
 								if (err) {
 									alert(err);
 								}
 
 								//save auth tokens and redirect
-								if (newTokens) {
-									authTokens.setAccessToken(newTokens.accessToken);
-									authTokens.setRefreshToken(newTokens.refreshToken);
+								if (accessToken) {
+									authTokens.setAccessToken(accessToken);
 
-									props.history.push('/');
+									return <Navigate to='/' />;
 								}
 							}
 						}>
@@ -72,13 +71,13 @@ const handleSubmit = async (email, password) => {
 	const result = await fetch(`${process.env.AUTH_URI}/auth/login`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			email,
 			password,
-		})
+		}),
+		credentials: 'include'
 	});
 
 	//handle errors
@@ -89,8 +88,8 @@ const handleSubmit = async (email, password) => {
 	}
 
 	//return the new auth tokens
-	const newTokens = await result.json();
-	return [null, newTokens];
+	const accessToken = await result.text();
+	return [null, accessToken];
 };
 
 //returns an error message, or null on success

client/pages/accounts/panels/delete-account.jsx

@@ -38,7 +38,6 @@ const handleSubmit = async (password, authTokens) => {
 	const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 		method: 'DELETE',
 		headers: {
-			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
@@ -52,14 +51,7 @@ const handleSubmit = async (password, authTokens) => {
 
 	//force a logout
 	const result2 = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, {
-		method: 'DELETE',
-		headers: {
-			'Access-Control-Allow-Origin': '*',
-			'Content-Type': 'application/json'
-		},
-		body: JSON.stringify({
-			token: authTokens.refreshToken
-		})
+		method: 'DELETE'
 	});
 
 	if (!result2.ok) {
@@ -67,7 +59,6 @@ const handleSubmit = async (password, authTokens) => {
 	}
 
 	authTokens.setAccessToken('');
-	authTokens.setRefreshToken('');
 
 	return [null];
 };

client/pages/accounts/panels/logout.jsx

@@ -12,14 +12,7 @@ const Logout = () => {
 			{ /* Logout logs you out of the server too */ }
 			<Link to='/' onClick={async () => {
 				const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, { //NOTE: this gets overwritten as a bugfix
-					method: 'DELETE',
-					headers: {
-						'Content-Type': 'application/json',
-						'Access-Control-Allow-Origin': '*'
-					},
-					body: JSON.stringify({
-						token: authTokens.refreshToken
-					})
+					method: 'DELETE'
 				});
 
 				//any problems?
@@ -27,7 +20,6 @@ const Logout = () => {
 					console.error(await result.text());
 				} else {
 					authTokens.setAccessToken('');
-					authTokens.setRefreshToken('');
 				}
 			}}>Logout</Link>
 		</>

client/pages/accounts/recover.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 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 <Redirect to='/' />;
+		navigate("/");
 	}
 
 	//refs
@@ -39,7 +42,7 @@ const Recover = props => {
 
 							//redirect
 							if (redirect) {
-								props.history.push('/');
+								navigate("/");
 							}
 						}
 					}>
@@ -66,8 +69,7 @@ const handleSubmit = async (email) => {
 	const result = await fetch(`${process.env.AUTH_URI}/auth/recover`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			email

client/pages/accounts/reset.jsx

@@ -1,21 +1,23 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
-import queryString from 'query-string';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 
 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 <Redirect 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,10 +67,9 @@ 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: {
-			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({

client/pages/accounts/signup.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 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 <Redirect to='/' />;
+		navigate("/");
 	}
 
 	//refs
@@ -44,7 +47,7 @@ const Signup = props => {
 
 							//redirect
 							if (redirect) {
-								props.history.push('/');
+								navigate("/");
 							}
 						}
 					}>
@@ -83,8 +86,7 @@ const handleSubmit = async (email, username, password, retype, contact) => {
 	const result = await fetch(`${process.env.AUTH_URI}/auth/signup`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			email,

client/pages/administration/admin.jsx

@@ -1,13 +1,10 @@
 import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
-import NewsPublisher from './panels/news-publisher';
-import NewsEditor from './panels/news-editor';
-
 import GrantAdmin from './panels/grant-admin';
 import GrantMod from './panels/grant-mod';
 
@@ -17,7 +14,7 @@ const Admin = props => {
 
 	//misplaced? (admin only)
 	if (!authTokens.accessToken || !authTokens.getPayload().admin) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	return (
@@ -26,9 +23,6 @@ const Admin = props => {
 			<div className='page panel'>
 				<div className='central panel'>
 					<h1 className='text centered'>Administration Tools</h1>
-					<NewsPublisher />
-					<br />
-					<NewsEditor />
 					<br />
 					<GrantAdmin />
 					<br />

client/pages/administration/mod.jsx

@@ -1,10 +1,13 @@
 import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
+import NewsPublisher from './panels/news-publisher';
+import NewsEditor from './panels/news-editor';
+
 import ChatReports from './panels/chat-reports';
 import BanUser from './panels/ban-user';
 
@@ -14,7 +17,7 @@ const Mod = props => {
 
 	//misplaced? (admin only)
 	if (!authTokens.accessToken || !(authTokens.getPayload().admin || authTokens.getPayload().mod)) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	return (
@@ -23,7 +26,12 @@ const Mod = props => {
 			<div className='page panel'>
 				<div className='central panel'>
 					<h1 className='text centered'>Moderation Tools</h1>
+					<NewsPublisher />
+					<br />
+					<NewsEditor />
+					<br />
 					<BanUser />
+					<br />
 					<ChatReports />
 					<Link to='/' className='text centered'>Return Home</Link>
 				</div>

client/pages/administration/panels/ban-user.jsx

@@ -42,8 +42,7 @@ const handleButtonPress = async (username, tokenFetch) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/banuser`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			username

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

@@ -7,21 +7,13 @@ const ChatReports = props => {
 
 	const authTokens = useContext(TokenContext);
 
-	useEffect(async () => {
-		const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
-			method: 'GET',
-			headers: {
-				'Access-Control-Allow-Origin': '*'
-			}
-		});
-
-		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 (
@@ -59,8 +51,7 @@ const deleteReportsFor = (chatlogIndex, tokenFetch, setReports) => {
 	tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
 		method: 'DELETE',
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({ chatlogIndex })
 	});

client/pages/administration/panels/grant-admin.jsx

@@ -51,8 +51,7 @@ const handleButtonPress = async (username, tokenFetch, method) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/admin`, {
 		method: method,
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			username

client/pages/administration/panels/grant-mod.jsx

@@ -51,8 +51,7 @@ const handleButtonPress = async (username, tokenFetch, method) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/mod`, {
 		method: method,
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			username

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import Select from 'react-dropdown-select';
+import Select from 'react-select';
 
 import { TokenContext } from '../../utilities/token-provider';
 
@@ -17,38 +17,23 @@ const NewsEditor = props => {
 	const [index, setIndex] = useState(null);
 
 	//run once
-	useEffect(async () => {
-		const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*'
-			},
-		});
-
-		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 (
 		<div className='panel'>
 			<h2 className='text centered'>News Editor</h2>
 			<Select
-				options={articles.map(article => { return { label: article.title, value: article.index }; })}
-				onChange={async values => {
+				options={articles.map(article => { return { label: article.title, index: article.index }; })}
+				onChange={async ({index}) => {
 					//fetch this article
-					const index = values[0].value;
-
-					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`, {
-						headers: {
-							'Access-Control-Allow-Origin': '*'
-						}
-					});
+					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`);
 
 					if (!result.ok) {
 						const err = `${result.status}: ${await result.text()}`;
@@ -109,8 +94,7 @@ const handleSubmit = async (title, author, body, index, tokenFetch) => {
 	const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, {
 		method: 'PATCH',
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			title,

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

@@ -28,7 +28,7 @@ const NewsPublisher = props => {
 				<input type='text' name='title' placeholder='Title' ref={titleRef} />
 				<input type='text' name='author' placeholder='Author' ref={authorRef} />
 				<textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
-	
+
 				<button type='submit'>Publish</button>
 			</form>
 		</div>
@@ -46,8 +46,7 @@ const handleSubmit = async (title, author, body, tokenFetch) => {
 		{
 			method: 'POST',
 			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*'
+				'Content-Type': 'application/json'
 			},
 			body: JSON.stringify({
 				title,

client/pages/app.jsx

@@ -1,12 +1,8 @@
 //react
-import React, { useContext } from 'react';
-import { BrowserRouter, Switch } from 'react-router-dom';
+import React, { useContext, Suspense, lazy } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { TokenContext } from './utilities/token-provider';
 
-//library components
-import LazyRoute from './utilities/lazy-route';
-import MarkdownPage from './utilities/markdown-page';
-
 //styling
 import '../styles/styles.css';
 
@@ -14,33 +10,49 @@ import '../styles/styles.css';
 import Footer from './panels/footer';
 import PopupChat from './panels/popup-chat';
 
+//lazy wrappers
+const Homepage = lazy(() => import('./homepage'));
+const Signup = lazy(() => import('./accounts/signup'));
+const Login = lazy(() => import('./accounts/login'));
+const Account = lazy(() => import('./accounts/account'));
+const Dashboard = lazy(() => import('./dashboard'));
+const Recover = lazy(() => import('./accounts/recover'));
+const Reset = lazy(() => import('./accounts/reset'));
+const Admin = lazy(() => import('./administration/admin'));
+const Mod = lazy(() => import('./administration/mod'));
+const PrivacyPolicy = lazy(() => import('./static/privacy-policy'));
+const Credits = lazy(() => import('./static/credits'));
+const NotFound = lazy(() => import('./not-found'));
+
 const App = props => {
 	const authTokens = useContext(TokenContext);
 
 	//default render
 	return (
 		<BrowserRouter>
-				<Switch>
-					<LazyRoute exact path='/' component={() => import('./homepage')} />
+			<Suspense>
+				<Routes>
+					<Route exact path='/' element={<Homepage />} />
 
-					<LazyRoute path='/signup' component={() => import('./accounts/signup')} />
-					<LazyRoute path='/login' component={() => import('./accounts/login')} />
-					<LazyRoute path='/account' component={() => import('./accounts/account')} />
-					<LazyRoute path='/dashboard' component={() => import('./dashboard')} />
+					<Route path='/signup' element={<Signup />} />
+					<Route path='/login' element={<Login />} />
+					<Route path='/account' element={<Account />} />
+					<Route path='/dashboard' element={<Dashboard />} />
 
-					<LazyRoute path='/recover' component={() => import('./accounts/recover')} />
-					<LazyRoute path='/reset' component={() => import('./accounts/reset')} />
+					<Route path='/recover' element={<Recover />} />
+					<Route path='/reset' element={<Reset />} />
 
-					<LazyRoute path='/admin' component={() => import('./administration/admin')} />
-					<LazyRoute path='/mod' component={() => import('./administration/mod')} />
+					<Route path='/admin' element={<Admin />} />
+					<Route path='/mod' element={<Mod />} />
 
-					<LazyRoute path='/privacypolicy' component={async () => () => <MarkdownPage content={require('../markdown/privacy-policy.md').default} />} />
-					<LazyRoute path='/credits' component={async () => () => <MarkdownPage content={require('../markdown/credits.md').default} />} />
+					<Route path='/privacypolicy' element={<PrivacyPolicy />} />
+					<Route path='/credits' element={<Credits />} />
 
-					<LazyRoute path='*' component={() => import('./not-found')} />
-				</Switch>
-				{ authTokens.accessToken ? <PopupChat /> : <></> }
-				<Footer />
+					<Route path='*' element={<NotFound />} />
+				</Routes>
+			</Suspense>
+			{ authTokens.accessToken ? <PopupChat /> : <></> }
+			<Footer />
 		</BrowserRouter>
 	);
 };

client/pages/dashboard.jsx

@@ -1,11 +1,10 @@
 import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from './utilities/apply-to-body';
 
 import { TokenContext } from './utilities/token-provider';
 
-import MarkdownPanel from './utilities/markdown-panel';
 import Logout from './accounts/panels/logout';
 
 const Dashboard = props => {
@@ -14,7 +13,7 @@ const Dashboard = props => {
 
 	//misplaced?
 	if (!authTokens.accessToken) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	return (

client/pages/homepage.jsx

@@ -1,11 +1,10 @@
 import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from './utilities/apply-to-body';
 
 import { TokenContext } from './utilities/token-provider';
 
-import MarkdownPanel from './utilities/markdown-panel';
 import NewsFeed from './panels/news-feed';
 
 const HomePage = props => {
@@ -14,7 +13,7 @@ const HomePage = props => {
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Redirect to='/dashboard' />;
+		return <Navigate to='/dashboard' />;
 	}
 
 	return (

client/pages/panels/footer.jsx

@@ -13,7 +13,7 @@ const Break = () => {
 const Footer = () => {
 	return (
 		<footer>
-			<p className='text centered'>© <a href='https://krgamestudios.com'>KR Game Studios</a> 2020-2021<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-2024<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
 		</footer>
 	);
 };

client/pages/panels/news-feed.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import dateFormat from 'dateformat';
 
-import MarkdownPanel from '../utilities/markdown-panel';
-
 const NewsFeed = props => {
 	const [articles, setArticles] = useState([]);
 	const aborter = useRef(new AbortController()); //BUGFIX: double-renders = double fetches + react update after unmount
@@ -10,11 +8,6 @@ const NewsFeed = props => {
 	useEffect(() => {
 		//this... um...
 		fetch(`${process.env.NEWS_URI}/news`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*'
-			},
 			signal: aborter.current.signal //oh dear
 		})
 			.then(blob => blob.json())
@@ -40,7 +33,7 @@ const NewsFeed = props => {
 							<span>Published {dateFormat(article.createdAt, 'fullDate')}</span>
 						}</em></p>
 						<br />
-						<MarkdownPanel style={{whiteSpace: 'pre-wrap'}} content={article.body} />
+						<div dangerouslySetInnerHTML={{ __html: article.rendered }} />
 					</div>
 				);
 			})}

client/pages/panels/popup-chat.jsx

@@ -78,7 +78,7 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
 	});
 
 	if (!inputRef.current.value.startsWith('/')) {
-		pushChatlog({ username: username, text: inputRef.current.value });
+		pushChatlog({ createdAt: (new Date(Date.now())).toISOString(), username: username, text: inputRef.current.value });
 	}
 
 	inputRef.current.value = '';
@@ -86,7 +86,36 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
 
 //render each line
 const processLine = (line, index, accessToken) => {
-	let content = <div className='content'>{line.username ? <span className='username'>{line.username}: </span> : ''}{line.text ? <span className='text'>{line.text}</span> : ''}</div>;
+	//utility functions
+	const isValidDate = d => {
+		return d instanceof Date && !isNaN(d);
+	};
+
+	const isToday = d => {
+		const now = new Date(Date.now());
+		return d.getDate() == now.getDate() && d.getMonth() == now.getMonth() && d.getFullYear() == now.getFullYear();
+	};
+
+	const isThisYear = d => {
+		const now = new Date(Date.now());
+		return d.getFullYear() == now.getFullYear();
+	};
+
+	//parse the date
+	const date = new Date(line.createdAt);
+
+	//split it up so we can format each field individually
+	const year = `${date.getFullYear()}`;
+	const month = `${date.getMonth() + 1}`;
+	const day = `${date.getDate()}`;
+	const hours = `${date.getHours()}`;
+	const minutes = `${date.getMinutes()}`.padStart(2, '0');
+
+	//combine into the final timestamp
+	const timestamp = !isValidDate(date) ? '' : isToday(date) ? `${hours}:${minutes}` : isThisYear(date) ? `${month}/${day}` : `${year}`;
+
+	//generate the content string
+	let content = <div className='content row'>{timestamp.length > 0 ? <span className='timestamp col'>{timestamp}</span> : null }<span className='inner col'>{line.username ? <span className='username'>{line.username}: </span> : ''}{line.text ? <span className='text'>{line.text}</span> : ''}</span></div>;
 
 	//decorators
 	if (line.emphasis) {
@@ -97,7 +126,8 @@ const processLine = (line, index, accessToken) => {
 		content = <strong>{content}</strong>;
 	}
 
-	return <li key={index} className='line'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
+
+	return <li key={index} className='line table noCollapse'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
 };
 
 const processReport = (line, accessToken) => {

client/pages/static/credits.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Static = props => {
+	return (
+		<div className='page central'>
+			<header>
+				<h1 className='text centered'>Credits</h1>
+			</header>
+			<h2 className='text centered'>MERN-template</h2>
+			<p>The <a href='https://github.com/krgamestudios/MERN-template'>MERN-template</a> developed by Kayne Ruse, KR Game Studios</p>
+
+			<Link className='text centered' to='/'>Return Home</Link>
+		</div>
+	);
+};
+
+export default Static;

client/pages/static/privacy-policy.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Static = props => {
+	return (
+		<div className='page central'>
+			<header>
+				<h1 className="text centered">Privacy Policy</h1>
+
+				<Link className='text centered' to='/'>Return Home</Link>
+			</header>
+		</div>
+	);
+};
+
+export default Static;

client/pages/utilities/lazy-route.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import loadable from '@loadable/component';
-
-const LazyRoute = props => {
-	const { component, ...lazyProps } = props;
-
-	const lazyComponent = loadable(component);
-
-	return <Route {...lazyProps} component={lazyComponent} />
-};
-
-export default LazyRoute;

client/pages/utilities/markdown-page.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import ApplyToBody from '../utilities/apply-to-body';
-
-import MarkdownPanel from './markdown-panel';
-
-const MarkdownPage = props => {
-	return (
-		<>
-			<ApplyToBody className='dashboard' />
-			<div className='page'>
-				<div className='central panel'>
-					<MarkdownPanel uri={props.uri} content={props.content} />
-					<Link to='/' className='text centered'>Return Home</Link>
-				</div>
-			</div>
-		</>
-	)
-};
-
-export default MarkdownPage;

client/pages/utilities/markdown-panel.jsx

@@ -1,35 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-
-const Markdown = props => {
-	//content?
-	let [contentHook, setContentHook] = useState(null);
-
-	//check arguments
-	if (!props.content) {
-		if (!props.uri) {
-			throw 'Markdown requires either content or uri prop';
-		}
-
-		//once
-		useEffect(() => {
-			fetch(props.uri)
-				.then(blob => blob.text())
-				.then(blob => setContentHook(blob))
-				.catch(e => console.error(e))
-			;
-		}, []);
-	}
-
-	//assume raw info
-	else if (!contentHook) {
-		setContentHook(props.content);
-	}
-
-	return (
-		<ReactMarkdown rehypePlugins={[rehypeRaw]} props={{...props}}>{contentHook}</ReactMarkdown>
-	);
-};
-
-export default Markdown;

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();
 
@@ -8,19 +8,22 @@ export const TokenContext = createContext();
 const TokenProvider = props => {
 	//state to be used
 	const [accessToken, setAccessToken] = useState('');
-	const [refreshToken, setRefreshToken] = useState('');
 
-	//make the access and refresh tokens persist between reloads
+	//force a logout under certain conditions
+	const forceLogout = () => {
+		localStorage.removeItem("accessToken");
+		setAccessToken("");
+	};
+
+	//make the access token persist between reloads
 	useEffect(() => {
 		setAccessToken(localStorage.getItem("accessToken") || '');
-		setRefreshToken(localStorage.getItem("refreshToken") || '');
 	}, []);
 
 	//update the stored copies
 	useEffect(() => {
 		localStorage.setItem("accessToken", accessToken);
-		localStorage.setItem("refreshToken", refreshToken);
-	}, [accessToken, refreshToken]);
+	}, [accessToken]);
 
 	//wrap the default fetch function
 	const tokenFetch = async (url, options) => {
@@ -28,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
@@ -36,30 +39,26 @@ const TokenProvider = props => {
 				return fetch(url, {
 					method: 'DELETE',
 					headers: {
-						'Content-Type': 'application/json',
-						'Access-Control-Allow-Origin': '*',
 						'Authorization': `Bearer ${bearer}`
 					},
-					body: JSON.stringify({
-						token: refreshToken
-					})
+					credentials: 'include'
 				});
 			}
 
-			//ping the auth server for a new token
+			//ping the auth server for a new access token
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
 				headers: {
-					'Content-Type': 'application/json',
-					'Access-Control-Allow-Origin': '*'
+					'Authorization': `Bearer ${bearer}`
 				},
-				body: JSON.stringify({
-					token: refreshToken
-				})
+				credentials: 'include'
 			});
 
 			//any errors, throw them
 			if (!response.ok) {
+				if (response.status == 403) {
+					forceLogout();
+				}
 				throw `${response.status}: ${await response.text()}`;
 			}
 
@@ -67,7 +66,6 @@ const TokenProvider = props => {
 			const newAuth = await response.json();
 
 			setAccessToken(newAuth.accessToken);
-			setRefreshToken(newAuth.refreshToken);
 			bearer = newAuth.accessToken;
 		}
 
@@ -77,30 +75,34 @@ const TokenProvider = props => {
 			headers: {
 				...(options || { headers: {} }).headers,
 				'Authorization': `Bearer ${bearer}`
-			}
+			},
+			credentials: 'include'
 		});
 	};
 
 	//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: {
-					'Content-Type': 'application/json',
-					'Access-Control-Allow-Origin': '*'
+					'Authorization': `Bearer ${bearer}`
 				},
-				body: JSON.stringify({
-					token: refreshToken
-				})
+				credentials: 'include'
 			});
 
 			//any errors, throw them
 			if (!response.ok) {
+				if (response.status == 403) {
+					forceLogout();
+				}
 				throw `${response.status}: ${await response.text()}`;
 			}
 
@@ -108,7 +110,6 @@ const TokenProvider = props => {
 			const newAuth = await response.json();
 
 			setAccessToken(newAuth.accessToken);
-			setRefreshToken(newAuth.refreshToken);
 
 			//finally
 			return cb(newAuth.accessToken);
@@ -118,7 +119,7 @@ const TokenProvider = props => {
 	};
 
 	return (
-		<TokenContext.Provider value={{ accessToken, refreshToken, setAccessToken, setRefreshToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
+		<TokenContext.Provider value={{ accessToken, setAccessToken, tokenFetch, tokenCallback, getPayload: () => jwtDecode(accessToken) }}>
 			{props.children}
 		</TokenContext.Provider>
 	)

client/styles/popup-chat.css

@@ -77,6 +77,16 @@
 	display: flex;
 }
 
+.chat .timestamp {
+	max-width: 44px;
+}
+
+.chat .inner {
+	flex: 1 !important;
+	display: inline-block !important;
+	flex-direction: row !important;
+}
+
 .chat .username {
 	font-weight: bold;
 }

client/template.html

@@ -22,6 +22,6 @@
 		<meta property="og:description" content="" />
 	</head>
 	<body>
-		<div id = "root"></div>
+		<div id="root"></div>
 	</body>
 </html>

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,24 +46,86 @@ 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, this only alters startup.sql)', '');
+	}
+
+	const localAddress = macUser ? 'localhost' : '%';
+
 	//project configuration
 	const projectName = await question('Project Name', 'template');
 	const projectWebAddress = await question('Project Web Address', 'example.com');
 
+  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
 	const authName = await question('Auth Name', 'auth');
 	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');
@@ -74,7 +136,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
@@ -90,11 +170,14 @@ 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}`);
@@ -104,18 +187,17 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	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}\`)
@@ -125,7 +207,8 @@ services:
       - traefik.http.services.${projectName}service.loadbalancer.server.port=${projectPort}
     environment:
       - WEB_PORT=${projectPort}
-      - DB_HOSTNAME=database
+      - DB_HOSTNAME=${projectDBHost}
+      - DB_PORTNAME=${projectDBPort}
       - DB_DATABASE=${projectName}
       - DB_USERNAME=${projectDBUser}
       - DB_PASSWORD=${projectDBPass}
@@ -134,10 +217,13 @@ services:
       - AUTH_URI=https://${authWebAddress}
       - CHAT_URI=https://${chatWebAddress}
       - SECRET_ACCESS=${accessToken}
+    volumes:
+      - /etc/timezone:/etc/timezone:ro
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-    depends_on:
-      - database
+    depends_on:${ projectDBHost != 'database' ? '' : `
+      - database`}
       - traefik
 
   ${newsName}:
@@ -153,17 +239,21 @@ services:
       - traefik.http.services.${newsName}service.loadbalancer.server.port=${newsPort}
     environment:
       - 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/timezone:/etc/timezone:ro
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-    depends_on:
-      - database
+    depends_on:${ newsDBHost != 'database' ? '' : `
+      - database`}
       - traefik
 
   ${authName}:
@@ -180,9 +270,11 @@ services:
     environment:
       - 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}
@@ -192,13 +284,17 @@ 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/timezone:/etc/timezone:ro
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-    depends_on:
-      - database
+    depends_on:${ authDBHost != 'database' ? '' : `
+      - database`}
       - traefik
 
   ${chatName}:
@@ -214,18 +310,23 @@ services:
       - traefik.http.services.${chatName}service.loadbalancer.server.port=${chatPort}
     environment:
       - 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/timezone:/etc/timezone:ro
+      - /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
@@ -234,28 +335,35 @@ services:
     volumes:
       - ./mysql:/var/lib/mysql
       - ./startup.sql:/docker-entrypoint-initdb.d/startup.sql:ro
+      - /etc/timezone:/etc/timezone:ro
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
-
+`}
   traefik:
-    image: traefik:v2.4
+    image: traefik:latest
     container_name: traefik
     command:
       - --log.level=ERROR
       - --api.insecure=false
       - --providers.docker=true
       - --providers.docker.exposedbydefault=false
+      - --entrypoints.web.address=:80
+      - --entrypoints.web.http.redirections.entryPoint.to=websecure
+      - --entrypoints.web.http.redirections.entryPoint.scheme=https
+      - --entrypoints.web.http.redirections.entrypoint.permanent=true
       - --entrypoints.websecure.address=:443
       - --certificatesresolvers.myresolver.acme.tlschallenge=true
       - --certificatesresolvers.myresolver.acme.email=${supportEmail}
       - --certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json
-      -  traefik.docker.network=app-network
     ports:
       - 80:80
       - 443:443
     volumes:
       - ./letsencrypt:/letsencrypt
       - /var/run/docker.sock:/var/run/docker.sock:ro
+      - /etc/timezone:/etc/timezone:ro
+      - /etc/localtime:/etc/localtime:ro
     networks:
       - app-network
 
@@ -265,7 +373,7 @@ networks:
 `;
 
 	const dockerfile = `
-FROM node:16
+FROM node:22-bookworm-slim
 WORKDIR "/app"
 COPY . /app
 RUN mkdir /app/public
@@ -279,24 +387,25 @@ CMD ["sleep 10 && npm start"]
 
 	const sqlfile = `
 CREATE DATABASE IF NOT EXISTS ${projectName};
-CREATE USER IF NOT EXISTS '${projectDBUser}'@'%' IDENTIFIED BY '${projectDBPass}';
-GRANT ALL PRIVILEGES ON ${projectName}.* TO '${projectDBUser}'@'%';
+CREATE USER IF NOT EXISTS '${projectDBUser}'@'${localAddress}' IDENTIFIED BY '${projectDBPass}';
+GRANT ALL PRIVILEGES ON ${projectName}.* TO '${projectDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${newsName};
-CREATE USER IF NOT EXISTS '${newsDBUser}'@'%' IDENTIFIED BY '${newsDBPass}';
-GRANT ALL PRIVILEGES ON ${newsName}.* TO '${newsDBUser}'@'%';
+CREATE USER IF NOT EXISTS '${newsDBUser}'@'${localAddress}' IDENTIFIED BY '${newsDBPass}';
+GRANT ALL PRIVILEGES ON ${newsName}.* TO '${newsDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${authName};
-CREATE USER IF NOT EXISTS '${authDBUser}'@'%' IDENTIFIED BY '${authDBPass}';
-GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'%';
+CREATE USER IF NOT EXISTS '${authDBUser}'@'${localAddress}' IDENTIFIED BY '${authDBPass}';
+GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${chatName};
-CREATE USER IF NOT EXISTS '${chatDBUser}'@'%' IDENTIFIED BY '${chatDBPass}';
-GRANT ALL PRIVILEGES ON ${chatName}.* TO '${chatDBUser}'@'%';
+CREATE USER IF NOT EXISTS '${chatDBUser}'@'${localAddress}' IDENTIFIED BY '${chatDBPass}';
+GRANT ALL PRIVILEGES ON ${chatName}.* TO '${chatDBUser}'@'${localAddress}';
 
 FLUSH PRIVILEGES;
 `;
 
+
 	fs.writeFileSync('docker-compose.yml', ymlfile);
 	fs.writeFileSync('Dockerfile', dockerfile);
 	fs.writeFileSync('startup.sql', sqlfile);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mern-template",
-  "version": "1.0.6",
+  "version": "1.5.1",
   "description": "A website template using the MERN stack.",
   "main": "server/server.js",
   "scripts": {
@@ -8,9 +8,12 @@
     "build": "npm run build:server && npm run build:client",
     "build:server": "exit 0",
     "build:client": "webpack --env=production --config webpack.config.js",
-    "dev": "concurrently npm:watch:server npm:watch:client",
-    "watch:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
-    "watch:client": "webpack serve --env=development --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",
     "analyze": "webpack --env=production --env=analyze --config webpack.config.js"
   },
   "repository": {
@@ -18,45 +21,40 @@
     "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.14.8",
-    "@babel/preset-env": "^7.14.8",
-    "@babel/preset-react": "^7.14.5",
-    "@loadable/component": "^5.15.0",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "compression-webpack-plugin": "^8.0.1",
-    "concurrently": "^6.2.0",
-    "css-loader": "^6.2.0",
-    "dateformat": "^4.5.1",
-    "dotenv": "^10.0.0",
-    "express": "^4.17.1",
-    "html-webpack-plugin": "^5.3.2",
-    "jwt-decode": "^3.1.2",
-    "mariadb": "^2.5.4",
-    "query-string": "^7.0.1",
-    "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-dropdown-select": "^4.7.4",
-    "react-markdown": "^6.0.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "rehype-raw": "^5.1.0",
-    "sequelize": "^6.6.5",
-    "socket.io-client": "^4.1.3",
-    "style-loader": "^3.2.1",
-    "webpack": "^5.46.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.2"
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "babel-loader": "^9.1.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^11.1.0",
+    "concurrently": "^8.2.2",
+    "css-loader": "^7.1.1",
+    "dateformat": "^5.0.3",
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "html-webpack-plugin": "^5.6.0",
+    "jwt-decode": "^4.0.0",
+    "mariadb": "^3.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.23.0",
+    "react-select": "^5.8.0",
+    "sequelize": "^6.37.3",
+    "socket.io-client": "^4.7.5",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.91.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4"
   },
   "devDependencies": {
-    "nodemon": "^2.0.12",
-    "webpack-dev-server": "^3.11.2"
+    "nodemon": "^3.1.0",
+    "webpack-dev-server": "^5.0.4"
   }
 }

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

@@ -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>'}`);
 });

sql/create_database.sql

@@ -1,10 +0,0 @@
-#This file only needs to be run once, during initial development setup
-#This file isnt needed for actual deployment
-
-#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'@'%';

tools/create_database.sql

@@ -0,0 +1,5 @@
+#use this while debugging
+CREATE DATABASE template;
+CREATE USER '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, analyze }) => {
+module.exports = ({ production, development, local, analyze }) => {
 	return {
 		mode: production ? "production" : "development",
 		entry: path.resolve(__dirname, 'client', 'client.jsx'),
@@ -19,7 +19,7 @@ module.exports = ({ production, analyze }) => {
 			filename: '[name].[chunkhash].js',
 			sourceMapFilename: '[name].[chunkhash].js.map'
 		},
-		devtool: production ? 'source-map' : 'eval-source-map',
+		devtool: production ? false : 'eval-source-map',
 		resolve: {
 			extensions: ['.js', '.jsx']
 		},
@@ -42,23 +42,15 @@ module.exports = ({ production, analyze }) => {
 					test: /\.(css)$/,
 					use: ['style-loader', 'css-loader']
 				},
-				{
-					test: /\.(md)$/,
-					use: [
-						{
-							loader: 'raw-loader'
-						},
-					],
-				},
 			]
 		},
 		plugins: [
 			new DefinePlugin({
 				'process.env': {
 					'PRODUCTION': production,
-					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : '"https://dev-news.krgamestudios.com"',
-					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"https://dev-auth.krgamestudios.com"',
-					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"https://dev-chat.krgamestudios.com"',
+					'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"',
 				}
 			}),
 			new CleanWebpackPlugin({
@@ -83,41 +75,32 @@ module.exports = ({ production, analyze }) => {
 			})
 		],
 		devServer: {
-			contentBase: path.resolve(__dirname, 'public'),
-			compress: true,
-			port: 3001,
-			proxy: {
-				'/api/': 'http://localhost:3000/'
-			},
-			overlay: {
-				errors: true
-			},
-			stats: {
-				colors: true,
-				hash: false,
-				version: false,
-				timings: false,
-				assets: false,
-				chunks: false,
-				modules: false,
-				reasons: false,
-				children: false,
-				source: false,
-				errors: true,
-				errorDetails: false,
-				warnings: true,
-				publicPath: false
-			},
-			host: '0.0.0.0',
-			disableHostCheck: true,
-			clientLogLevel: 'silent',
-			historyApiFallback: true,
 			hot: true,
-			injectHot: true
-		},
-		watchOptions: {
-			ignored: /(node_modules)/
+			host: 'localhost',
+			port: 3001,
+			client: {
+				overlay: {
+					errors: true,
+					warnings: true,
+				},
+			},
+
+			watchFiles: {
+				options: {
+					ignored: ['node_modules/**']
+				}
+			},
+
+			proxy: [
+				{
+					context: ['/api'],
+					target: 'http://localhost:3000',
+				}
+			],
+
+			static: '/public',
+
+			historyApiFallback: true
 		}
 	}
 };
-