Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
296effed4f | ||
|
e1e38bc708 | ||
|
|
8c7dfde584 | ||
|
|
05244227b9 | ||
|
|
3a29842cba | ||
|
|
69b5c09ed4 | ||
|
|
0f3f6045b9 | ||
|
|
1c17915ea2 | ||
|
|
8efebf7a31 | ||
|
|
074bca9835 | ||
|
|
c7fd68ba70 |
14
.gitignore
vendored
14
.gitignore
vendored
@@ -1,2 +1,14 @@
|
|||||||
/node_modules
|
# dependencies
|
||||||
|
node_modules
|
||||||
|
.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# production
|
||||||
|
build
|
||||||
|
dist
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.env
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
*.pid
|
||||||
|
|||||||
45
README.md
45
README.md
@@ -1,49 +1,8 @@
|
|||||||
# MERN Stack Template
|
# MERN Stack Template
|
||||||
|
|
||||||
|
<img src='https://raw.githubusercontent.com/BenElferink/mern-template/refs/heads/images/images/mern.jpeg' />
|
||||||
|
|
||||||
- **M** = [MongoDB](https://www.mongodb.com)
|
- **M** = [MongoDB](https://www.mongodb.com)
|
||||||
- **E** = [Express.js](https://expressjs.com)
|
- **E** = [Express.js](https://expressjs.com)
|
||||||
- **R** = [React.js](https://reactjs.org)
|
- **R** = [React.js](https://reactjs.org)
|
||||||
- **N** = [Node.js](https://nodejs.org)
|
- **N** = [Node.js](https://nodejs.org)
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
## How to use this template
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
### STEP 1:
|
|
||||||
|
|
||||||
Click ["Use this template"](https://github.com/belferink1996/MERN-template/generate) to generate a new repository.<br />
|
|
||||||
Then open your terminal and clone your repository:
|
|
||||||
|
|
||||||
> cd ~/Desktop <br />
|
|
||||||
> git clone https://github.com/[your-user-name]/[your-repo-name].git
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
### STEP 2:
|
|
||||||
|
|
||||||
Go to your client folder (frontend), and set your workspace:
|
|
||||||
|
|
||||||
> cd ~/Desktop/[your-repo-name]/client <br />
|
|
||||||
> npm install <br />
|
|
||||||
> npm start
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
### STEP 3:
|
|
||||||
|
|
||||||
Prepare your MongoDB database,<br />
|
|
||||||
then go to your server folder (backend), and set your workspace:
|
|
||||||
|
|
||||||
> cd ~/Desktop/[your-repo-name]/server <br />
|
|
||||||
> npm install <br />
|
|
||||||
|
|
||||||
Set your database within `index.js`, then start server:
|
|
||||||
|
|
||||||
> npm start
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
### STEP 4: CODE !!!
|
|
||||||
|
|||||||
3
client/.gitignore
vendored
3
client/.gitignore
vendored
@@ -1,3 +0,0 @@
|
|||||||
/node_modules
|
|
||||||
.DS_Store
|
|
||||||
.eslintcache
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import './style/style.css';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return <div>Hello World - React.js</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
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);
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
ReactDOM.render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<App />
|
|
||||||
</React.StrictMode>,
|
|
||||||
document.getElementById('root')
|
|
||||||
);
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
BIN
images/mern.jpeg
Normal file
BIN
images/mern.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
images/mongodb/install_clt.png
Normal file
BIN
images/mongodb/install_clt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
BIN
images/mongodb/install_success.png
Normal file
BIN
images/mongodb/install_success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 448 KiB |
BIN
images/mongodb/service_start.png
Normal file
BIN
images/mongodb/service_start.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 807 KiB |
BIN
images/mongodb/service_start_manually.png
Normal file
BIN
images/mongodb/service_start_manually.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
BIN
images/mongodb/shell_started.png
Normal file
BIN
images/mongodb/shell_started.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
images/preview.png
Normal file
BIN
images/preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 KiB |
@@ -1 +0,0 @@
|
|||||||
CONNECTIONS_URL = "URL"
|
|
||||||
3
server/.gitignore
vendored
3
server/.gitignore
vendored
@@ -1,3 +0,0 @@
|
|||||||
/node_modules
|
|
||||||
.DS_Store
|
|
||||||
.env
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
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);
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user