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

refactored template

Browse Source
This commit is contained in:
Ben Elferink
2021-01-19 22:33:49 +02:00
parent 41d557dca6
commit 711c0fc5ee
19 changed files with 126 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -48,7 +48,7 @@ Then go to your server folder (backend), and set your database within `server.js
###### Client:
> axios: ^0.21.0 &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Use the API<br /> react: ^17.0.1
> axios: ^0.21.1 &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Use the API<br /> react: ^17.0.1
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; UI framework<br /> react-dom: ^17.0.1
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; UI framework<br /> react-scripts: ^4.0.1
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Quickly launch local service

1
client/.gitignore vendored
View File

@@ -1,3 +1,4 @@
/node_modules
.env
.DS_Store
.eslintcache

17
client/package.json
View File

@@ -1,15 +1,24 @@
{
"name": "client",
"version": "1.0.0",
"private": true,
"main": "index.js",
"scripts": {
"start": "react-scripts start"
},
"license": "ISC",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
},
"dependencies": {
"axios": "^0.21.0",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.1"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
}

11
client/src/App.js Normal file
View File

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

32
client/src/api/index.js
View File

@@ -5,36 +5,8 @@ const url = 'http://localhost:8080/api/v1';
// current method: GET
// current path: http://localhost:8080/api/v1/example
export const getExample = () => axios.get(`${url}/example`);
export const getPeople = () => axios.get(`${url}/people`);
// current method: POST
// 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>
// );
// }
export const newPerson = (form) => axios.post(`${url}/people/new`, form);

12
client/src/components/App/App.js
View File

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

9
client/src/components/HelloWorld/HelloWorld.jsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
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>;
}
export default HelloWorld;

6
client/src/components/HelloWorld/HelloWorld.module.css
View File

@@ -1,6 +0,0 @@
.HelloWorld {
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
}

4
client/src/index.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';
import './style/reset.css';
import './styles/reset.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>

19
client/src/styles/App.css Normal file
View File

@@ -0,0 +1,19 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.App > p {
text-align: center;
}

7
client/src/style/reset.css → client/src/styles/reset.css
View File

@@ -1,10 +1,3 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
HTML5 Reset :: style.css
----------------------------------------------------------

3
server/.env.example
View File

@@ -1 +1,2 @@
CONNECTION_URL = "URL"
CONNECTION_URL = "MongoDB connection URL"
PORT = "4 digits"

4
server/.gitignore vendored
View File

@@ -1,3 +1,3 @@
/node_modules
.DS_Store
.env
.env
.DS_Store

28
server/api/controllers/exampleControllers.js
View File

@@ -1,28 +0,0 @@
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);
}
};

29
server/api/controllers/usersControllers.js Normal file
View File

@@ -0,0 +1,29 @@
import mongoose from 'mongoose';
import User from '../models/User.js';
// more about response status codes ---> https://restapitutorial.com/httpstatuscodes.html
export async function getAllUsers(request, response, next) {
try {
const allUsers = await User.find(); // finds all in 'users' collection
response.status(200).json(allUsers);
} catch (error) {
console.log(error);
response.status(500).json(error);
}
}
export const createNewUser = async (request, response, next) => {
try {
let newUser = new User({
_id: mongoose.Types.ObjectId(), // _id is set by default, (you can remove this line)
name: request.body.userName, // userName === name used on client side
});
const savedUser = await newUser.save();
response.status(201).json(savedUser);
} catch (error) {
console.log(error);
response.status(500).json(error);
}
};

16
server/api/models/Example.js → server/api/models/User.js
View File

@@ -3,19 +3,25 @@ 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 = Object key
String = Type
*/
name: String,
},
{
timestamps: true,
// this creates and maintains:
// {
// createdAt: Date,
// updatedAt: Date,
// }
},
);
// NOTE! use a singular model name, mongoose automatically creates a collection like so:
// model: 'Person' === collection: 'people'
const modelName = 'Example';
// model: 'User' === collection: 'users'
const modelName = 'User';
export default mongoose.model(modelName, instance);

19
server/api/routes/exampleRoutes.js
View File

@@ -1,19 +0,0 @@
import express from 'express';
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)
*/
// 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;

22
server/api/routes/usersRoutes.js Normal file
View File

@@ -0,0 +1,22 @@
import express from 'express';
import { getAllUsers, createNewUser } from '../controllers/peopleControllers.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)
*/
// current method: GET
// current path: http://localhost:8080/api/v1/users
router.get('/', (request, response, next) => next(), getAllUsers);
// current method: POST
// current path: http://localhost:8080/api/v1/users/new
router.post('/new', (request, response, next) => next(), createNewUser);
export default router;

26
server/server.js
View File

@@ -3,28 +3,24 @@ import express from 'express'; // Backend App (server)
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';
// import usersRoutes from './api/routes/usersRoutes.js';
// ^ ^ ^ un-comment this to use imported route(s)
// doing this will link the following files: server.js -> exampleRoutes.js -> exampleControllers.js -> Example.js
// doing this will link the following files: server.js -> usersRoutes.js -> usersControllers.js -> User.js
// initialize app
const app = express();
// middlewares
app.use(express.json({ limit: '10mb', extended: true })); // body parser
app.use(express.urlencoded({ limit: '10mb', extended: true })); // url parser
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
// 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, useCreateIndex: true }; // update this with (possible) deprecated warnings
// for "atlas" edit CONNECTION_URL in -> .env file || for "community server" edit <dbname>
const CONNECTION_URL = process.env.CONNECTION_URL || 'mongodb://localhost:27017/<dbname>';
const DEPRECATED_FIX = { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true };
// connect to db
mongoose
@@ -32,13 +28,13 @@ mongoose
.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)
mongoose.connection.on('error', (error) => console.log('❌ MongoDB connection error', error)); // listen for errors during the session
// routes
app.get('/', (request, response, next) => response.send('Hello World - Express.js'));
// app.use('/api/v1/example', IMPORTED_ROUTES);
app.get('/', (request, response, next) => response.status(200).json('Hello World - Express.js'));
// app.use('/api/v1/users', usersRoutes);
// ^ ^ ^ un-comment this to use imported route(s)
// server is listening for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => console.log(`✅ Server is listening on port: ${PORT}`));