Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| bb1590bae7 | |||
| 5f7b9dda3a | |||
| 051f3dfb2a | |||
| 85456e0892 | |||
| 6130337846 | |||
| ac99f3bf38 | |||
| 20e94db628 | |||
| bcb4a37f5a | |||
| 3b0d3c87b1 | |||
| 51a116503d |
@@ -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
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -28,7 +28,7 @@ const Markdown = props => {
|
||||
}
|
||||
|
||||
return (
|
||||
<ReactMarkdown rehypePlugins={[rehypeRaw]} escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
|
||||
<ReactMarkdown rehypePlugins={[rehypeRaw]} props={{...props}}>{contentHook}</ReactMarkdown>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Generated
+2
-2
@@ -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
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user