Update package.json

It's supposed to point to localhost when developing locally.

.envdev

@@ -1,6 +1,6 @@
 WEB_PORT=3000
 
-DB_HOSTNAME=database
+DB_HOSTNAME=localhost
 DB_DATABASE=template
 DB_USERNAME=template
 DB_PASSWORD=pikachu
@@ -12,4 +12,4 @@ DB_TIMEZONE=Australia/Sydney
 DB_LOGGING=
 
 # Make sure this value matches the system that you connect to
-SECRET_ACCESS=access
+SECRET_ACCESS=access

client/components/panels/chat-reports.jsx

@@ -43,7 +43,7 @@ const ChatReports = props => {
 						<td>{report.chatlog.room}</td>
 						<td>{report.chatlog.text}</td>
 						<td>{report.reporter.join(', ')}</td>
-						<td><button onClick={() => deleteReportsFor(report.chatlogId, authTokens.tokenFetch, setReports)}>Delete</button></td>
+						<td><button onClick={() => deleteReportsFor(report.chatlogIndex, authTokens.tokenFetch, setReports)}>Delete</button></td>
 					</tr>
 				))}
 			</tbody>
@@ -51,17 +51,17 @@ const ChatReports = props => {
 	);
 };
 
-const deleteReportsFor = (chatlogId, tokenFetch, setReports) => {
+const deleteReportsFor = (chatlogIndex, tokenFetch, setReports) => {
 	tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
 		method: 'DELETE',
 		headers: {
 			'Content-Type': 'application/json',
 			'Access-Control-Allow-Origin': '*'
 		},
-		body: JSON.stringify({ chatlogId })
+		body: JSON.stringify({ chatlogIndex })
 	});
 
-	setReports(reports => reports.filter(report => report.chatlogId != chatlogId));
+	setReports(reports => reports.filter(report => report.chatlogIndex != chatlogIndex));
 };
 
 export default ChatReports;

client/components/panels/markdown.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown/with-html';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 
 const Markdown = props => {
 	//content?
@@ -27,7 +28,7 @@ const Markdown = props => {
 	}
 
 	return (
-		<ReactMarkdown escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
+		<ReactMarkdown rehypePlugins={[rehypeRaw]} escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
 	);
 };
 

client/components/panels/popup-chat.jsx

@@ -96,7 +96,7 @@ const processLine = (line, index, accessToken) => {
 		content = <strong>{content}</strong>;
 	}
 
-	return <li key={index} className='line'>{content}<div className='report'><a onClick={() => processReport(line, accessToken)} style={{ display: line.id && !line.notification ? 'flex' : 'none' }}>!!!</a></div></li>;
+	return <li key={index} className='line'>{content}<div className='report'><a onClick={() => processReport(line, accessToken)} style={{ display: line.index && !line.notification ? 'flex' : 'none' }}>!!!</a></div></li>;
 };
 
 const processReport = (line, accessToken) => {
@@ -105,7 +105,7 @@ const processReport = (line, accessToken) => {
 	if (yes) {
 		socket.emit('report', {
 			accessToken,
-			id: line.id
+			index: line.index
 		});
 	}
 };

configure-script.js

@@ -123,7 +123,7 @@ services:
       - traefik.http.routers.${projectName}router.service=${projectName}service@docker
       - traefik.http.services.${projectName}service.loadbalancer.server.port=${projectPort}
     environment:
-      - WEB_PORT=3000
+      - WEB_PORT=${projectPort}
       - DB_HOSTNAME=database
       - DB_DATABASE=${projectName}
       - DB_USERNAME=${projectDBUser}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mern-template",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A website template using the MERN stack.",
   "main": "server/server.js",
   "scripts": {
@@ -9,7 +9,7 @@
     "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:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
     "watch:client": "webpack serve --env=development --config webpack.config.js",
     "analyzer": "webpack --env=production --analyzer --config webpack.config.js"
   },
@@ -24,37 +24,38 @@
   },
   "homepage": "https://github.com/KRGameStudios/MERN-template#readme",
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@loadable/component": "^5.14.1",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "concurrently": "^5.3.0",
-    "css-loader": "^5.1.3",
-    "dateformat": "^4.5.1",
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "html-webpack-plugin": "^5.0.0-alpha.14",
-    "jwt-decode": "^3.1.2",
-    "mariadb": "^2.5.2",
-    "raw-loader": "^4.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-dropdown-select": "^4.7.4",
-    "react-markdown": "^5.0.3",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "sequelize": "^6.4.0",
-    "socket.io-client": "^4.0.0",
-    "style-loader": "^2.0.0",
-    "universal-cookie": "^4.0.4",
-    "webpack": "^5.15.0",
-    "webpack-cli": "^4.3.1"
+    "@babel/core": ">=7.12.10",
+    "@babel/preset-env": ">=7.12.11",
+    "@babel/preset-react": ">=7.12.10",
+    "@loadable/component": ">=5.14.1",
+    "babel-loader": ">=8.2.2",
+    "clean-webpack-plugin": ">=3.0.0",
+    "concurrently": ">=5.3.0",
+    "css-loader": ">=5.1.3",
+    "dateformat": ">=4.5.1",
+    "dotenv": ">=8.2.0",
+    "express": ">=4.17.1",
+    "html-webpack-plugin": ">=5.0.0-alpha.14",
+    "jwt-decode": ">=3.1.2",
+    "mariadb": ">=2.5.2",
+    "raw-loader": ">=4.0.2",
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1",
+    "react-dropdown-select": ">=4.7.4",
+    "react-markdown": ">=5.0.3",
+    "react-router": ">=5.2.0",
+    "react-router-dom": ">=5.2.0",
+    "rehype-raw": "^5.1.0",
+    "sequelize": ">=6.4.0",
+    "socket.io-client": ">=4.0.0",
+    "style-loader": ">=2.0.0",
+    "universal-cookie": ">=4.0.4",
+    "webpack": ">=5.15.0",
+    "webpack-cli": ">=4.3.1"
   },
   "devDependencies": {
-    "nodemon": "^2.0.7",
-    "webpack-bundle-analyzer": "^4.3.0",
-    "webpack-dev-server": "^3.11.2"
+    "nodemon": ">=2.0.7",
+    "webpack-bundle-analyzer": ">=4.3.0",
+    "webpack-dev-server": ">=1.16.5"
   }
 }

webpack.config.js

@@ -1,116 +1,116 @@
-//plugins
-const { DefinePlugin } = require('webpack');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-//libraries
-const path = require('path');
-
-//the exported config function
-module.exports = ({ production, analyzer }) => {
-
-	return {
-		mode: production ? "production" : "development",
-		entry: path.resolve(__dirname, 'client', 'client.jsx'),
-		output: {
-			path: path.resolve(__dirname, 'public'),
-			filename: '[name].[chunkhash].js',
-			sourceMapFilename: '[name].[chunkhash].js.map'
-		},
-		devtool: 'eval-source-map',
-		resolve: {
-			extensions: ['.js', '.jsx']
-		},
-		module: {
-			rules: [
-				{
-					test: /\.(js|jsx)$/,
-					exclude: /(node_modules)/,
-					use: [
-						{
-							loader: 'babel-loader',
-							options: {
-								presets: ['@babel/preset-env', '@babel/preset-react'],
-								plugins: ['@babel/plugin-syntax-dynamic-import']
-							}
-						}
-					]
-				},
-				{
-					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.eggtrainer.com"',
-					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"https://dev-auth.eggtrainer.com"',
-					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"https://dev-chat.eggtrainer.com"',
-				}
-			}),
-			new CleanWebpackPlugin({
-				cleanOnceBeforeBuildPatterns: ['*', '!content*']
-			}),
-			new HtmlWebpackPlugin({
-				template: './client/template.html',
-				minify: {
-					collapseWhitespace: production,
-					removeComments: production,
-					removeAttributeQuotes: production
-				}
-			}),
-			new BundleAnalyzerPlugin({
-				analyzerMode: analyzer ? 'server' : 'disabled'
-			})
-		],
-		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)/
-		}
-	}
-};
-
+//plugins
+const { DefinePlugin } = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+//libraries
+const path = require('path');
+
+//the exported config function
+module.exports = ({ production, analyzer }) => {
+
+	return {
+		mode: production ? "production" : "development",
+		entry: path.resolve(__dirname, 'client', 'client.jsx'),
+		output: {
+			path: path.resolve(__dirname, 'public'),
+			filename: '[name].[chunkhash].js',
+			sourceMapFilename: '[name].[chunkhash].js.map'
+		},
+		devtool: production ? 'source-map' : 'eval-source-map',
+		resolve: {
+			extensions: ['.js', '.jsx']
+		},
+		module: {
+			rules: [
+				{
+					test: /\.(js|jsx)$/,
+					exclude: /(node_modules)/,
+					use: [
+						{
+							loader: 'babel-loader',
+							options: {
+								presets: ['@babel/preset-env', '@babel/preset-react'],
+								plugins: ['@babel/plugin-syntax-dynamic-import']
+							}
+						}
+					]
+				},
+				{
+					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"',
+				}
+			}),
+			new CleanWebpackPlugin({
+				cleanOnceBeforeBuildPatterns: ['*', '!content*']
+			}),
+			new HtmlWebpackPlugin({
+				template: './client/template.html',
+				minify: {
+					collapseWhitespace: production,
+					removeComments: production,
+					removeAttributeQuotes: production
+				}
+			}),
+			new BundleAnalyzerPlugin({
+				analyzerMode: analyzer ? 'server' : 'disabled'
+			})
+		],
+		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)/
+		}
+	}
+};
+