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
|
||||
*.log
|
||||
*.pid
|
||||
|
||||
45
README.md
45
README.md
@@ -1,49 +1,8 @@
|
||||
# MERN Stack Template
|
||||
|
||||
<img src='https://raw.githubusercontent.com/BenElferink/mern-template/refs/heads/images/images/mern.jpeg' />
|
||||
|
||||
- **M** = [MongoDB](https://www.mongodb.com)
|
||||
- **E** = [Express.js](https://expressjs.com)
|
||||
- **R** = [React.js](https://reactjs.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