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

Initial commit

Browse Source
This commit is contained in:
Ben Elferink
2020-12-21 23:03:50 +02:00
commit ad0098bc7c
14 changed files with 155 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitattributes vendored Normal file
View File

@@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
/node_modules
.DS_Store

24
README.md Normal file
View File

@@ -0,0 +1,24 @@
# MERN Stack Template
- **M** = [MongoDB](https://www.mongodb.com)
- **E** = [Express.js](https://expressjs.com)
- **R** = [React.js](https://reactjs.org)
- **N** = [Node.js](https://nodejs.org)
## Initialize project:
###### Server (Backend):
1. Prepare your MongoDB database
2. Terminal: `cd server`
3. Terminal: `npm install`
4. Set your database within `index.js`
5. Terminal: `npm start`
6. Start writing code...
###### Client (Frontend):
1. Terminal: `cd client`
2. Terminal: `npm install`
3. Terminal: `npm start`
4. Start writing code...

3
client/.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
/node_modules
.DS_Store
.eslintcache

28
client/package.json Normal file
View File

@@ -0,0 +1,28 @@
{
"name": "client",
"version": "0.1.0",
"main": "index.js",
"scripts": {
"start": "react-scripts start"
},
"author": "Ben Elferink",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

12
client/public/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MERN_STACK</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" />
</body>
</html>

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

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

6
client/src/api/index.js Normal file
View File

@@ -0,0 +1,6 @@
import axios from 'axios';
const url = 'http://localhost:8080/';
// export const getSomething = () => axios.get(url + 'path');
// export const postSometing = (form) => axios.post(url + 'path', form);

10
client/src/index.js Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

9
client/src/style/style.css Normal file
View File

@@ -0,0 +1,9 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}

1
server/.env.example Normal file
View File

@@ -0,0 +1 @@
CONNECTIONS_URL = "URL"

3
server/.gitignore vendored Normal file
View File

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

30
server/index.js Normal file
View File

@@ -0,0 +1,30 @@
import mongoose from 'mongoose';
import express from 'express';
import dotenv from 'dotenv';
import cors from 'cors';
// initialize app
const app = express();
dotenv.config();
// connect to db ---> if you want to connect to cloud server: edit "CONNECTION_URL" in -> .env file
const DB_NAME = 'testDB'; // if you want to use local server: edit this "DB_NAME" (and remove the "CONNECTION_URL" from -> .env file)
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
mongoose
.connect(CONNECTION_URL, DEPRECATED_FIX)
.then(() => console.log('✅ MongoDB connected'))
.then(() => app.listen(PORT, () => console.log(`✅ Listening on port: ${PORT}`)))
.catch((error) => console.log(`❌ ${error}`));
mongoose.connection.on('error', (err) => console.log(`❌ MongoDB: ${err}`));
// middlewares
app.use(express.json()); // body parser
app.use(cors()); // enables requests
// routes
app.get('/', (req, res) => res.send('Hello World - Express.js'));
// app.use('/', IMPORTED_ROUTES);

18
server/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "server",
"version": "0.1.0",
"main": "index.js",
"type": "module",
"scripts": {
"start": "nodemon index.js"
},
"author": "Ben Elferink",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongoose": "^5.11.8",
"nodemon": "^2.0.6"
}
}