Slightly updated template

README.md

@@ -58,4 +58,5 @@ 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; MongoDB database
+> ---> &nbsp;&nbsp;&nbsp; MongoDB database<br /> morgan: ^1.10.0 &nbsp;&nbsp;&nbsp; --->
+> &nbsp;&nbsp;&nbsp; Logs requests

client/src/App.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import HelloWorld from './components/HelloWorld/HelloWorld';
-// import * as api from './api';
-// ^ ^ ^ un-comment this to import api endpoints
-
-function App() {
-  // const [data, setData] = React.useState([]);
-  // React.useEffect(() => {
-  //   api
-  //     .getSomething() // replace this with your endpoint
-  //     .then((response) => console.log(`✅ ${response.status} ${response.statusText}`, setData(response.data)))
-  //     .catch((error) => console.log(`❌ ${error}`));
-  // }, []);
-  //
-  // ^ ^ ^ example using the api endpoint
-
-  return (
-    <div>
-      <HelloWorld />
-    </div>
-  );
-}
-
-export default App;

client/src/api/index.js

@@ -3,10 +3,38 @@ import axios from 'axios';
 // api base-url (that you created on server side)
 const url = 'http://localhost:8080/api/v1';
 
-// current path: http://localhost:8080/api/v1/example
 // current method: GET
-// export const getSomething = () => axios.get(url + '/example');
+// current path: http://localhost:8080/api/v1/example
+export const getExample = () => axios.get(`${url}/example`);
 
-// current path: http://localhost:8080/api/v1/example/upload
 // current method: POST
-// export const postSometing = (form) => axios.post(url + '/example/upload', form);
+// current path: http://localhost:8080/api/v1/example/upload
+export const uploadExample = (form) => axios.post(`${url}/example/upload`, form);
+
+// Example using your API:
+//
+//
+//
+// 1) in your Component file, import a method from above like so:
+//
+//    import { getExample } from './api';
+//
+//
+//
+// 2) Then call the method and handle it's errors/response, like so:
+//
+//    function ExampleFetching() {
+//      const [data, setData] = React.useState([]);
+//
+//      React.useEffect(() => {
+//        getExample()
+//          .then((response) => setData(response.data))
+//          .catch((error) => console.log(error));
+//      }, []);
+//
+//      return (
+//        <div>
+//          {data}
+//        </div>
+//      );
+//    }

client/src/components/App/App.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import HelloWorld from './../HelloWorld/HelloWorld';
+
+function App() {
+  return (
+    <div>
+      <HelloWorld />
+    </div>
+  );
+}
+
+export default App;

client/src/components/HelloWorld/HelloWorld.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import styles from './HelloWorld.module.css'; // CSS module -> className={styles.App} (AKA styled components)
+import styles from './HelloWorld.module.css';
+// CSS module -> className={styles.App} (AKA styled components)
 
 function HelloWorld() {
   return <div className={styles.HelloWorld}>Hello World - React.js</div>;

client/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './components/App/App';
 import './style/reset.css';
 
 ReactDOM.render(

server/api/controllers/controller.js

@@ -1,26 +0,0 @@
-import mongoose from 'mongoose';
-import Example from './../models/model.js';
-// more about response status codes   --->   https://restapitutorial.com/httpstatuscodes.html
-
-export const getExamples = async (request, response, next) => {
-  try {
-    const allExamples = await Example.find(); // what is .find() ???   --->   https://mongoosejs.com/docs/queries.html
-    response.status(200).json(allExamples);
-  } catch (error) {
-    response.status(500).json(error);
-  }
-};
-
-export const uploadExample = async (request, response, next) => {
-  let newExample = new Example({
-    _id: mongoose.Types.ObjectId(), // _id is set by default, (you can remove this line)
-    name: request.body.fieldName, // fieldName === name used on client side
-  });
-
-  try {
-    const savedExample = await newExample.save(); // what is .save() ???   --->   https://mongoosejs.com/docs/api.html#document_Document-save
-    response.status(201).json(savedExample);
-  } catch (error) {
-    response.status(500).json(error);
-  }
-};

server/api/controllers/exampleControllers.js

@@ -0,0 +1,28 @@
+import mongoose from 'mongoose';
+import Example from '../models/Example.js';
+// more about response status codes   --->   https://restapitutorial.com/httpstatuscodes.html
+
+export async function getExamples(request, response, next) {
+  try {
+    const allExamples = await Example.find();
+    response.status(200).json(allExamples);
+  } catch (error) {
+    console.log(error);
+    response.status(500).json(error);
+  }
+}
+
+export const uploadExample = async (request, response, next) => {
+  try {
+    let newExample = new Example({
+      _id: mongoose.Types.ObjectId(), // _id is set by default, (you can remove this line)
+      name: request.body.fieldName, // fieldName === name used on client side
+    });
+
+    const savedExample = await newExample.save();
+    response.status(201).json(savedExample);
+  } catch (error) {
+    console.log(error);
+    response.status(500).json(error);
+  }
+};

server/api/models/Example.js

@@ -3,19 +3,19 @@ import mongoose from 'mongoose';
 const instance = new mongoose.Schema(
   {
     _id: mongoose.Schema.Types.ObjectId, // _id is set by default, (you can remove this line)
+    name: String,
     /*
       name = property of document object
       String = type of value   --->   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
     */
-    name: String,
   },
   {
     timestamps: true,
   },
 );
 
-// modelName   --->   https://mongoosejs.com/docs/guide.html
-// note: use a singular name, mongoose automatically creates a collection like so -> model: 'Person' === collection: 'people'
+// NOTE! use a singular model name, mongoose automatically creates a collection like so:
+// model: 'Person' === collection: 'people'
 const modelName = 'Example';
 
 export default mongoose.model(modelName, instance);

server/api/routes/exampleRoutes.js

@@ -1,16 +1,19 @@
 import express from 'express';
-import { getExamples, uploadExample } from './../controllers/controller.js'; // import request & response function
+import { getExamples, uploadExample } from '../controllers/exampleControllers.js'; // import request & response function
 
 // initialize router
 const router = express.Router();
-
 /*
   request methods   --->   https://www.tutorialspoint.com/http/http_methods.htm
   1st param = extended url path
   2nd param = middlewares (optional)
   3rd param = request & response function (controller)
 */
-router.get('/', (request, response, next) => next(), getExamples); // current path: http://localhost:8080/api/v1/example
-router.post('/upload', (request, response, next) => next(), uploadExample); // current path: http://localhost:8080/api/v1/example/upload
+
+// current path: http://localhost:8080/api/v1/example
+router.get('/', (request, response, next) => next(), getExamples);
+
+// current path: http://localhost:8080/api/v1/example/upload
+router.post('/upload', (request, response, next) => next(), uploadExample);
 
 export default router;

server/package.json

@@ -11,6 +11,7 @@
     "cors": "^2.8.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
-    "mongoose": "^5.11.8"
+    "mongoose": "^5.11.8",
+    "morgan": "^1.10.0"
   }
 }

server/server.js

@@ -1,37 +1,42 @@
 import mongoose from 'mongoose'; // MongoDB (database)
 import express from 'express'; // Backend App (server)
-import dotenv from 'dotenv'; // Secures content
-import cors from 'cors'; // HTTP headers
+import cors from 'cors'; // HTTP headers (enable requests)
+import morgan from 'morgan'; // Logs incoming requests
+import dotenv from 'dotenv'; // Secures variables
+
 // import IMPORTED_ROUTES from './api/routes/route.js';
 // ^ ^ ^ un-comment this to use imported route(s)
-// doing this will link the following files:   index.js -> route.js -> controller.js -> model.js
+// doing this will link the following files:   server.js -> exampleRoutes.js -> exampleControllers.js -> Example.js
 
 // initialize app
 const app = express();
-dotenv.config(); // what is dotenv   --->   https://github.com/motdotla/dotenv#readme
 
 // middlewares
-app.use(express.json()); // body parser
-app.use(express.urlencoded({ extended: false })); // url parser
-app.use(cors()); // enables http requests
+app.use(express.json({ limit: '10mb', extended: true })); // body parser
+app.use(express.urlencoded({ limit: '10mb', extended: true })); // 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
 
-// configure db --->            if you want to connect to cloud server: edit "CONNECTION_URL" in -> .env file
-const DB_NAME = 'exampleDB'; // if you want to use local server: edit this "DB_NAME" (and remove the "CONNECTION_URL" from -> .env file)
+// configure db:
+// if you want to connect to cloud server (atlas): edit "CONNECTION_URL" in -> .env file
+// if you want to use local server (community): edit "DB_NAME"
+const DB_NAME = 'exampleDB';
 const CONNECTION_URL = process.env.CONNECTION_URL || `mongodb://localhost:27017/${DB_NAME}`;
 const PORT = process.env.PORT || 8080; // 8080 === development port
-const DEPRECATED_FIX = { useNewUrlParser: true, useUnifiedTopology: true }; // change this with (possible) warnings on first connection
+const DEPRECATED_FIX = { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true }; // update this with (possible) deprecated warnings
 
-// mongoose connections   --->   https://mongoosejs.com/docs/connections.html
 // connect to db
-mongoose.connect(CONNECTION_URL, DEPRECATED_FIX).catch((error) => console.log('❌ MongoDB:', error)); // listen for errors on initial connection
-mongoose.connection.on('connected', () => console.log('✅ MongoDB connected'));
-mongoose.connection.on('error', (error) => console.log('❌ MongoDB:', error)); // listen for errors after the connection is established (errors during the session)
-mongoose.connection.on('disconnected', () => console.log('❌ MongoDB disconnected'));
-mongoose.set('useCreateIndex', true);
-// ^ ^ ^ fix to a deprecated warning
+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 after the connection is established (errors during the session)
 
 // routes
-app.get('/', (req, res) => res.send('Hello World - Express.js'));
+app.get('/', (request, response, next) => response.send('Hello World - Express.js'));
+
 // app.use('/api/v1/example', IMPORTED_ROUTES);
 // ^ ^ ^ un-comment this to use imported route(s)