diff --git a/README.md b/README.md index 096aa0d..289e399 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,6 @@ Then go to your server folder (backend), and set your database within `server.js > cors: ^2.8.5     --->     Enable HTTP requests
dotenv: ^8.2.0 >     --->     Secure sensitive information
express: ^4.17.1 ->     --->     Server app
mongoose: ^5.11.8     +>     --->     Server app
mongoose: ^5.11.14     > --->     MongoDB database
morgan: ^1.10.0     ---> >     Logs requests diff --git a/client/src/App.js b/client/src/App.js index b0ecb7f..1138952 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,11 +1,9 @@ -import './styles/App.css'; +import './styles/styles.css'; -function App() { +export default function App() { return (

Hello World - React.js

); } - -export default App; diff --git a/client/src/styles/reset.css b/client/src/styles/reset.css index 0486183..622b75e 100644 --- a/client/src/styles/reset.css +++ b/client/src/styles/reset.css @@ -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; diff --git a/client/src/styles/App.css b/client/src/styles/styles.css similarity index 100% rename from client/src/styles/App.css rename to client/src/styles/styles.css diff --git a/server/api/controllers/usersControllers.js b/server/api/controllers/controllers.js similarity index 100% rename from server/api/controllers/usersControllers.js rename to server/api/controllers/controllers.js diff --git a/server/api/routes/usersRoutes.js b/server/api/routes/routes.js similarity index 83% rename from server/api/routes/usersRoutes.js rename to server/api/routes/routes.js index a2ae9cf..65015ba 100644 --- a/server/api/routes/usersRoutes.js +++ b/server/api/routes/routes.js @@ -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(); diff --git a/server/server.js b/server/index.js similarity index 57% rename from server/server.js rename to server/index.js index aa71cc0..e3a9711 100644 --- a/server/server.js +++ b/server/index.js @@ -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 @@ -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 diff --git a/server/package.json b/server/package.json index f67e7a5..8e3487b 100644 --- a/server/package.json +++ b/server/package.json @@ -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" } }