Compare commits

..

10 Commits

Author SHA1 Message Date
Kayne Ruse bb1590bae7 Bumped version number 2021-08-10 17:39:09 +10:00
Kayne Ruse 5f7b9dda3a Tweaked README.md 2021-08-07 13:54:39 +10:00
Kayne Ruse 051f3dfb2a Updated README.md 2021-07-30 10:20:14 +10:00
Kayne Ruse 85456e0892 Minor markdown tweak 2021-07-30 03:36:40 +10:00
Kayne Ruse 6130337846 Fixed classNames 2021-07-30 01:34:06 +10:00
Kayne Ruse ac99f3bf38 Fixed CSS classes 2021-07-29 22:13:17 +10:00
Kayne Ruse 20e94db628 I really hate these line endings 2021-07-29 21:15:32 +10:00
Kayne Ruse bcb4a37f5a Tweak 2021-07-29 21:13:53 +10:00
Kayne Ruse 3b0d3c87b1 Tweak 2021-07-28 15:52:50 +01:00
Kayne Ruse 51a116503d Bumped version number 2021-07-28 15:43:09 +01:00
9 changed files with 166 additions and 165 deletions
+92 -91
View File
@@ -1,91 +1,92 @@
# MERN-template
A website template using the MERN stack. The primary technology involved is:
* React
* Nodejs
* MariaDB (with Sequelize)
* 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.
This template is released under the zlib license (see LICENSE).
See the [github wiki](https://github.com/krgamestudios/MERN-template/wiki) for full documentation.
# Microservices
There are external components to this template referred to as "microservices". These can be omitted entirely by simply removing the React components that access them. These are also available via [docker hub](https://hub.docker.com/u/krgamestudios).
* News Server: https://github.com/krgamestudios/news-server
* Auth Server: https://github.com/krgamestudios/auth-server
* Chat Server: https://github.com/krgamestudios/chat-server
# Setup Deployment
A clean install is this easy:
```
git clone https://github.com/krgamestudios/MERN-template.git
cd MERN-template
npm install
node configure-script.js
docker-compose up --build
```
# Setup Development
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
3. Run `npm install`
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
# Features List
- Mainly one language across the codebase (JavaScript)
- Full documentation
- Setup tutorial
- Fully Featured Account System (as a microservice)
- Email validation
- Logging in and out
- Account deletion
- Password management
- JSON web token authentication
- Fully Featured News Blog (as a microservice)
- Publish, edit or delete articles as needed
- Secured via admin panel
- Fully Featured Chat System (as a microservice)
- Available when logged in
- Chat logs saved to the database
- Room-based chat (type `/room name` to access a specific room)
- Moderation tools
- Permanently banning users
- Chat-muting users for a time period
- Users reporting offensive chat-content
- Easy To Use Configuration Script
- Sets up everything via docker
- A default admin account (if desired)
# Coming Soon
- Full documentation
- Modding tutorials
# Coming Eventually
- Fully Featured News Blog (as a microservice)
- Restore deleted articles
- Undo edits
- Fully Featured Chat System (as a microservice)
- Custom emoji
- Private messaging
- Broadcasting to all channels
- Badges next to usernames
- Better compression for client files
- Backend for leaderboards (modding tutorial?)
- Backend for energy systems (modding tutorial?)
- Backend for items, shops, trading and currency
# MERN-template
A website template using the MERN stack. It is geared towards Persistent Browser Based Games (think neopets), but is flexible enough for a number of different uses.
The primary technology involved is:
* React
* Nodejs
* MariaDB (with Sequelize)
* 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.
This template is released under the zlib license (see LICENSE).
See the [github wiki](https://github.com/krgamestudios/MERN-template/wiki) for full documentation.
# Microservices
There are external components to this template referred to as "microservices". These can be omitted entirely by simply removing the React components that access them. These are also available via [docker hub](https://hub.docker.com/u/krgamestudios).
* News Server: https://github.com/krgamestudios/news-server
* Auth Server: https://github.com/krgamestudios/auth-server
* Chat Server: https://github.com/krgamestudios/chat-server
# Setup Deployment
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
```
# Setup Development
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
3. Run `npm install`
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
# Features List
- Mainly one language across the codebase (JavaScript)
- Full documentation
- Setup tutorial
- Fully Featured Account System (as a microservice)
- Email validation
- Logging in and out
- Account deletion
- Password management
- JSON web token authentication
- Fully Featured News Blog (as a microservice)
- Publish, edit or delete articles as needed
- Secured via admin panel
- Fully Featured Chat System (as a microservice)
- Available when logged in
- Chat logs saved to the database
- Room-based chat (type `/room name` to access a specific room)
- Moderation tools
- Permanently banning users
- Chat-muting users for a time period
- Users reporting offensive chat-content
- Easy To Use Configuration Script
- Sets up everything via docker
- A default admin account (if desired)
# Coming Soon
- Full documentation
- Modding tutorials
# Coming Eventually
- Fully Featured News Blog (as a microservice)
- Restore deleted articles
- Undo edits
- Fully Featured Chat System (as a microservice)
- Custom emoji
- Private messaging
- Broadcasting to all channels
- Badges next to usernames
- Better compression for client files
- Backend for leaderboards (modding tutorial?)
- Backend for energy systems (modding tutorial?)
- Backend for items, shops, trading and currency
+2 -2
View File
@@ -37,7 +37,7 @@ const Account = props => {
return (
<div className='page'>
<h1 className='centered'>Account</h1>
<form className='constricted' onSubmit={async evt => {
<form className='constrained' onSubmit={async evt => {
evt.preventDefault();
const [err] = await update(passwordRef.current.value, retypeRef.current.value, contactRef.current.checked, authTokens.tokenFetch);
@@ -69,7 +69,7 @@ const Account = props => {
<button type='submit'>Update Information</button>
</form>
<DeleteAccount className='constricted' />
<DeleteAccount className='constrained' />
</div>
);
};
+1 -1
View File
@@ -21,7 +21,7 @@ const LogIn = props => {
return (
<div className='page'>
<h1 className='centered'>Login</h1>
<form className='constricted' onSubmit={
<form className='constrained' onSubmit={
async evt => {
//on submit
evt.preventDefault();
+1 -1
View File
@@ -22,7 +22,7 @@ const Recover = props => {
return (
<div className='page'>
<h1 className='centered'>Recover Password</h1>
<form className='constricted' onSubmit={
<form className='constrained panel' onSubmit={
async evt => { //on submit
recoverRef.current.disabled = true;
evt.preventDefault();
+5 -5
View File
@@ -25,9 +25,9 @@ const Reset = props => {
return (
<div className='page'>
<h1 className='centered'>Reset Password</h1>
<form className='constricted' onSubmit={async evt => {
<form className='constrained panel' onSubmit={async evt => {
evt.preventDefault();
const [err] = await update(passwordRef.current.value, retypeRef.current.value, query);
const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, query);
if (err) {
alert(err);
@@ -43,12 +43,12 @@ const Reset = props => {
}}>
<div>
<div>
<label htmlFor='password'>Enter New Password:</label>
<label htmlFor='password'>Enter New Password:</label>
<input type='password' name='password' ref={passwordRef} />
</div>
<div>
<label htmlFor='retype'>Retype New Password:</label>
<label htmlFor='retype'>Retype New Password:</label>
<input type='password' name='retype' ref={retypeRef} />
</div>
</div>
@@ -82,7 +82,7 @@ const update = async (password, retype, query) => {
if (!result.ok) {
return [`${await result.status}: ${await result.text()}`];
} else {
return [null];
return [null, true];
}
}
+1 -1
View File
@@ -27,7 +27,7 @@ const SignUp = props => {
return (
<div className='page'>
<h1 className='centered'>Signup</h1>
<form className='constricted' onSubmit={
<form className='constrained' onSubmit={
async evt => { //on submit
signupRef.current.disabled = true;
evt.preventDefault();
+1 -1
View File
@@ -28,7 +28,7 @@ const Markdown = props => {
}
return (
<ReactMarkdown rehypePlugins={[rehypeRaw]} escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
<ReactMarkdown rehypePlugins={[rehypeRaw]} props={{...props}}>{contentHook}</ReactMarkdown>
);
};
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mern-template",
"version": "1.0.2",
"version": "1.0.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "mern-template",
"version": "1.0.2",
"version": "1.0.4",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.14.8",
+61 -61
View File
@@ -1,61 +1,61 @@
{
"name": "mern-template",
"version": "1.0.2",
"description": "A website template using the MERN stack.",
"main": "server/server.js",
"scripts": {
"start": "npm run build && node server/server.js",
"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",
"analyzer": "webpack --env=production --analyzer --config webpack.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/KRGameStudios/MERN-template.git"
},
"author": "Kayne Ruse",
"license": "ISC",
"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",
"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"
},
"devDependencies": {
"nodemon": "^2.0.12",
"webpack-dev-server": "^3.11.2"
}
}
{
"name": "mern-template",
"version": "1.0.4",
"description": "A website template using the MERN stack.",
"main": "server/server.js",
"scripts": {
"start": "npm run build && node server/server.js",
"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",
"analyzer": "webpack --env=production --analyzer --config webpack.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/KRGameStudios/MERN-template.git"
},
"author": "Kayne Ruse",
"license": "ISC",
"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",
"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"
},
"devDependencies": {
"nodemon": "^2.0.12",
"webpack-dev-server": "^3.11.2"
}
}