fede/mern-template
Template
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

updated some small details

Browse Source
This commit is contained in:
Ben Elferink
2021-02-03 17:39:23 +02:00
parent 711c0fc5ee
commit 5b26c86dfe
8 changed files with 127 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -57,6 +57,6 @@ Then go to your server folder (backend), and set your database within `server.js
> cors: ^2.8.5 &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Enable HTTP requests<br/> dotenv: ^8.2.0
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Secure sensitive information<br /> express: ^4.17.1
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Server app<br /> mongoose: ^5.11.8 &nbsp;&nbsp;&nbsp;
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Server app<br /> mongoose: ^5.11.14 &nbsp;&nbsp;&nbsp;
> ---> &nbsp;&nbsp;&nbsp; MongoDB database<br /> morgan: ^1.10.0 &nbsp;&nbsp;&nbsp; --->
> &nbsp;&nbsp;&nbsp; Logs requests

6
client/src/App.js
View File

@@ -1,11 +1,9 @@
import './styles/App.css';
import './styles/styles.css';
function App() {
export default function App() {
return (
<div className='App'>
<p>Hello World - React.js</p>
</div>
);
}
export default App;

170
client/src/styles/reset.css
View File

@@ -1,16 +1,15 @@
/*
HTML5 Reset :: style.css
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://meyerweb.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
HTML5 Reset :: reset.css
---------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://meyerweb.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
-----------------------------------------------------------
Let's default this puppy out
-----------------------------
*/
html,
body,
@@ -100,8 +99,10 @@ summary {
display: block;
}
/* Handle box-sizing while better addressing child elements:
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
/*
Handle box-sizing while better addressing child elements:
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html {
box-sizing: border-box;
}
@@ -112,8 +113,10 @@ html {
box-sizing: inherit;
}
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154
credits to: Tim Murtaugh - https://gist.github.com/murtaugh/5247154 */
/*
consider resetting the default cursor: https://gist.github.com/murtaugh/5247154
credits to: Tim Murtaugh - https://gist.github.com/murtaugh/5247154
*/
html,
body {
cursor: default;
@@ -123,11 +126,10 @@ code {
cursor: text;
}
/*
textarea and input[type="text"] already receive
"cursor: text" via browsers' base stylesheets
/*
textarea and input[type="text"] already receive
"cursor: text" via browsers' base stylesheets
*/
a,
label,
button,
@@ -142,8 +144,10 @@ input[disabled] {
cursor: default;
}
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
/*
Responsive images and other embedded objects
if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto
*/
img,
object,
embed {
@@ -151,23 +155,27 @@ embed {
}
/*
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
In fact, it *will* cause problems with Google Maps' controls at small size.
If this is the case for you, try uncommenting the following:
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
In fact, it *will* cause problems with Google Maps' controls at small size.
If this is the case for you, try uncommenting the following:
#map img {
max-width: none;
}
#map img {
max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
/*
force a vertical scrollbar to prevent a jumpy page
*/
html {
overflow-y: scroll;
}
/* we use a lot of ULs that aren't bulleted.
/*
we use a lot of ULs that aren't bulleted.
you'll have to restore the bullets within content,
which is fine because they're probably customized anyway */
which is fine because they're probably customized anyway
*/
ul {
list-style: none;
}
@@ -203,7 +211,9 @@ dfn[title] {
cursor: help;
}
/* tables still need cellspacing="0" in the markup */
/*
tables still need cellspacing="0" in the markup
*/
table {
border-collapse: separate;
border-spacing: 0;
@@ -275,47 +285,63 @@ td img {
vertical-align: top;
}
/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930
This is tested to not break line-heights in:
-- WinXP/IE6,
-- WinXP/IE7,
-- WinXP/IE8,
-- Mac/FF 3.5.9,
-- Mac/Chrome 5.0,
-- Mac/Safari 4.0.4,
assuming a base font size of 14px and a line-height of 21px, or 1.5em.
Poke this, try to make it break!
credits to: Ruthie BenDor - https://gist.github.com/unruthless/413930 */
/*
Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930
This is tested to not break line-heights in:
-- WinXP/IE6,
-- WinXP/IE7,
-- WinXP/IE8,
-- Mac/FF 3.5.9,
-- Mac/Chrome 5.0,
-- Mac/Safari 4.0.4,
assuming a base font size of 14px and a line-height of 21px, or 1.5em.
Poke this, try to make it break!
credits to: Ruthie BenDor - https://gist.github.com/unruthless/413930
*/
sub,
sup {
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
/*
Specified in % so that the sup/sup is the
right size relative to the surrounding text
*/
font-size: 75%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
/*
Zero out the line-height so that it doesn't
interfere with the positioning that follows
*/
line-height: 0;
/* Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text */
/*
Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text
*/
position: relative;
/* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule
vertical-align: baseline;*/
/*
Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule:
vertical-align: baseline;
*/
}
sup {
/* Move the superscripted text up */
/*
Move the superscripted text up
*/
top: -0.5em;
}
sub {
/* Move the subscripted text down, but only
half as far down as the superscript moved up */
/*
Move the subscripted text down, but only
half as far down as the superscript moved up
*/
bottom: -0.25em;
}
/* standardize any monospaced elements */
/*
standardize any monospaced elements
*/
pre,
code,
kbd,
@@ -323,7 +349,9 @@ samp {
font-family: monospace, sans-serif;
}
/* hand cursor on clickable elements */
/*
hand cursor on clickable elements
*/
.clickable,
label,
input[type='button'],
@@ -333,7 +361,9 @@ button {
cursor: pointer;
}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
/*
Webkit browsers add a 2px margin outside the chrome of form elements
*/
button,
input,
select,
@@ -341,24 +371,34 @@ textarea {
margin: 0;
}
/* make buttons play nice in IE */
/*
make buttons play nice in IE
*/
button,
input[type='button'] {
width: auto;
overflow: visible;
}
/* scale images in IE7 more attractively */
/*
scale images in IE7 more attractively
*/
.ie7 img {
-ms-interpolation-mode: bicubic;
}
/* prevent BG image flicker upon hover
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
/*
prevent BG image flicker upon hover
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {
filter: expression(document.execCommand('BackgroundImageCache', false, true));
}
*/
/* let's clear some floats */
/*
let's clear some floats
*/
.clearfix:after {
content: ' ';
display: block;

0
client/src/styles/App.css → client/src/styles/styles.css
View File

0
server/api/controllers/usersControllers.js → server/api/controllers/controllers.js
View File

2
server/api/routes/usersRoutes.js → server/api/routes/routes.js
View File

@@ -1,5 +1,5 @@
import express from 'express';
import { getAllUsers, createNewUser } from '../controllers/peopleControllers.js'; // import request & response function
import { getAllUsers, createNewUser } from '../controllers/controllers.js'; // import request & response function
// initialize router
const router = express.Router();

27
server/server.js → server/index.js
View File

@@ -1,21 +1,22 @@
import mongoose from 'mongoose'; // MongoDB (database)
import express from 'express'; // Backend App (server)
import dotenv from 'dotenv'; // Secures variables
import cors from 'cors'; // HTTP headers (enable requests)
import morgan from 'morgan'; // Logs incoming requests
import dotenv from 'dotenv'; // Secures variables
// import usersRoutes from './api/routes/usersRoutes.js';
// import routes from './api/routes/routes.js';
// ^ ^ ^ un-comment this to use imported route(s)
// doing this will link the following files: server.js -> usersRoutes.js -> usersControllers.js -> User.js
// doing this will link the following files: index.js -> routes.js -> controllers.js -> User.js
// initialize app
const app = express();
const origin = '*';
// middlewares
app.use(express.json({ limit: '10mb', extended: false })); // body parser
app.use(express.urlencoded({ limit: '10mb', extended: false })); // url parser
app.use(cors({ origin: 'http://localhost:3000' })); // enables http requests on react development server
app.use(morgan('common')); // logs requests
dotenv.config(); // protected variables
dotenv.config();
app.use(cors({ origin }));
app.use(express.json({ limit: '1mb', extended: false })); // body parser
app.use(express.urlencoded({ limit: '1mb', extended: false })); // url parser
app.use(morgan('common'));
// configure db:
// for "atlas" edit CONNECTION_URL in -> .env file || for "community server" edit <dbname>
@@ -26,13 +27,15 @@ const DEPRECATED_FIX = { useNewUrlParser: true, useUnifiedTopology: true, useCre
mongoose
.connect(CONNECTION_URL, DEPRECATED_FIX)
.catch((error) => console.log('❌ MongoDB connection error', error)); // listen for errors on initial connection
mongoose.connection.on('connected', () => console.log('✅ MongoDB connected')); // connected
mongoose.connection.on('disconnected', () => console.log('❌ MongoDB disconnected')); // disconnected
mongoose.connection.on('error', (error) => console.log('❌ MongoDB connection error', error)); // listen for errors during the session
const db = mongoose.connection;
db.on('connected', () => console.log('✅ MongoDB connected')); // connected
db.on('disconnected', () => console.log('❌ MongoDB disconnected')); // disconnected
db.on('error', (error) => console.log('❌ MongoDB connection error', error)); // listen for errors during the session
// routes
app.get('/', (request, response, next) => response.status(200).json('Hello World - Express.js'));
// app.use('/api/v1/users', usersRoutes);
// app.use('/api/v1/users', routes);
// ^ ^ ^ un-comment this to use imported route(s)
// server is listening for requests

6
server/package.json
View File

@@ -1,17 +1,17 @@
{
"name": "server",
"version": "1.0.0",
"main": "server.js",
"main": "index.js",
"type": "module",
"scripts": {
"start": "nodemon server.js || node server.js"
"start": "nodemon server.js || node index.js"
},
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongoose": "^5.11.8",
"mongoose": "^5.11.14",
"morgan": "^1.10.0"
}
}