updated some small details

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

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 > 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; 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; MongoDB database<br /> morgan: ^1.10.0 &nbsp;&nbsp;&nbsp; --->
> &nbsp;&nbsp;&nbsp; Logs requests > &nbsp;&nbsp;&nbsp; Logs requests

View File

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

View File

@@ -1,16 +1,15 @@
/* /*
HTML5 Reset :: style.css HTML5 Reset :: reset.css
---------------------------------------------------------- ---------------------------
We have learned much from/been inspired by/taken code where offered from: We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://meyerweb.com Eric Meyer :: http://meyerweb.com
HTML5 Doctor :: http://html5doctor.com HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com and the HTML5 Boilerplate :: http://html5boilerplate.com
-----------------------------------------------------------
-------------------------------------------------------------------------------*/ Let's default this puppy out
-----------------------------
/* Let's default this puppy out */
-------------------------------------------------------------------------------*/
html, html,
body, body,
@@ -100,8 +99,10 @@ summary {
display: block; 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 { html {
box-sizing: border-box; box-sizing: border-box;
} }
@@ -112,8 +113,10 @@ html {
box-sizing: inherit; 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, html,
body { body {
cursor: default; cursor: default;
@@ -123,11 +126,10 @@ code {
cursor: text; cursor: text;
} }
/* /*
textarea and input[type="text"] already receive textarea and input[type="text"] already receive
"cursor: text" via browsers' base stylesheets "cursor: text" via browsers' base stylesheets
*/ */
a, a,
label, label,
button, button,
@@ -142,8 +144,10 @@ input[disabled] {
cursor: default; 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, img,
object, object,
embed { embed {
@@ -151,23 +155,27 @@ embed {
} }
/* /*
Note: keeping IMG here will cause problems if you're using foreground images as sprites. 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. In fact, it *will* cause problems with Google Maps' controls at small size.
If this is the case for you, try uncommenting the following: If this is the case for you, try uncommenting the following:
#map img { #map img {
max-width: none; max-width: none;
} }
*/ */
/* force a vertical scrollbar to prevent a jumpy page */ /*
force a vertical scrollbar to prevent a jumpy page
*/
html { html {
overflow-y: scroll; 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, 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 { ul {
list-style: none; list-style: none;
} }
@@ -203,7 +211,9 @@ dfn[title] {
cursor: help; cursor: help;
} }
/* tables still need cellspacing="0" in the markup */ /*
tables still need cellspacing="0" in the markup
*/
table { table {
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
@@ -275,47 +285,63 @@ td img {
vertical-align: top; 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: Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930
-- WinXP/IE6, This is tested to not break line-heights in:
-- WinXP/IE7, -- WinXP/IE6,
-- WinXP/IE8, -- WinXP/IE7,
-- Mac/FF 3.5.9, -- WinXP/IE8,
-- Mac/Chrome 5.0, -- Mac/FF 3.5.9,
-- Mac/Safari 4.0.4, -- Mac/Chrome 5.0,
assuming a base font size of 14px and a line-height of 21px, or 1.5em. -- Mac/Safari 4.0.4,
Poke this, try to make it break! 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 */
credits to: Ruthie BenDor - https://gist.github.com/unruthless/413930
*/
sub, sub,
sup { 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%; 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; 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; position: relative;
/* Note that if you're using Eric Meyer's reset.css, this /*
is already set and you can remove this rule Note that if you're using Eric Meyer's reset.css, this
vertical-align: baseline;*/ is already set and you can remove this rule:
vertical-align: baseline;
*/
} }
sup { sup {
/* Move the superscripted text up */ /*
Move the superscripted text up
*/
top: -0.5em; top: -0.5em;
} }
sub { 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; bottom: -0.25em;
} }
/* standardize any monospaced elements */ /*
standardize any monospaced elements
*/
pre, pre,
code, code,
kbd, kbd,
@@ -323,7 +349,9 @@ samp {
font-family: monospace, sans-serif; font-family: monospace, sans-serif;
} }
/* hand cursor on clickable elements */ /*
hand cursor on clickable elements
*/
.clickable, .clickable,
label, label,
input[type='button'], input[type='button'],
@@ -333,7 +361,9 @@ button {
cursor: pointer; 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, button,
input, input,
select, select,
@@ -341,24 +371,34 @@ textarea {
margin: 0; margin: 0;
} }
/* make buttons play nice in IE */ /*
make buttons play nice in IE
*/
button, button,
input[type='button'] { input[type='button'] {
width: auto; width: auto;
overflow: visible; overflow: visible;
} }
/* scale images in IE7 more attractively */ /*
scale images in IE7 more attractively
*/
.ie7 img { .ie7 img {
-ms-interpolation-mode: bicubic; -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) prevent BG image flicker upon hover
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} (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 { .clearfix:after {
content: ' '; content: ' ';
display: block; display: block;

View File

@@ -1,5 +1,5 @@
import express from 'express'; 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 // initialize router
const router = express.Router(); const router = express.Router();

View File

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

View File

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