Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ayush-rudani/devcube
Blogging + Community Website
https://github.com/ayush-rudani/devcube
express javascript mern mern-stack mongodb mongoose nodejs reactjs
Last synced: about 21 hours ago
JSON representation
Blogging + Community Website
- Host: GitHub
- URL: https://github.com/ayush-rudani/devcube
- Owner: ayush-rudani
- Created: 2022-09-01T08:27:54.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-14T04:32:49.000Z (about 2 years ago)
- Last Synced: 2023-03-10T06:12:16.917Z (almost 2 years ago)
- Topics: express, javascript, mern, mern-stack, mongodb, mongoose, nodejs, reactjs
- Language: JavaScript
- Homepage:
- Size: 14.4 MB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DevCube
## Problems & Solutions
- https://stackoverflow.com/questions/69864165/error-privateroute-is-not-a-route-component-all-component-children-of-rou
- https://stackoverflow.com/questions/66289122/how-to-create-a-protected-route
## Environment Variable
If we wanted to store any constants like PORT, Database URL in an environment variable so sensitive information
like this advisible to store in enviromnet variable using .env file
Don't forgot add this file in .gitignore
To access .env's environment variable in our code we need to do it with help of a node package called dotenv so install using `npm i dotenv`
`dontenv` package that loads environment variables from .env file into the process.env object availabe to us globally in a node js environment
So to use it, you can access using `process.env.`
- mongoose allows us create models and schemas for our data in DB. MongoDB alone is schema less
## Miscellaneous
What is `.populate()` -> https://stackoverflow.com/questions/38051977/what-does-populate-in-mongoose-mean
# Mern-Starter
### Guide To Initialize New Project
#### Initial Project
- Initialize Packages ` npm init`
- Add Some Initial Dependencies `npm i express mongoose body-parser bcryptjs validation`
- bcryptjs is a password hashing function designed by Niels Provos and David Mazières
- body-parser allows us to get the data throughout the request
- express is our main framework
- mongoose is used to connect/interact with MongoDB
- validation (as its name implies) is used for validation
- Add NodeMon `npm i -D nodemon`
- nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
- create `index.js` in the root directory
```js
// index.js
const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello world!'));
const port = process.env.PORT || 8082;
app.listen(port, () => console.log(`Server running on port ${port}`));
```
- Now run `node index`
- check the website `http://localhost:8082`. It will display `Hello World!`.
- Now Change `package.json` Of the Scripts part.
```json
"main": "index.js",
"scripts": {
"start": "node index.js",
"app": "nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
- Now `npm install` & run `npm run app` and check the URL again.
#### Mongo Database Setup
- We will use mongo atlas for database.
- First, create a mongo atlas account at `https://www.mongodb.com/atlas/database`.
- Create a cluster & add a username and password. select choose the application & Copy the database link.
- now create the `config` directory inside the root folder.
- create the `db.js` inside the config directory & add the following code.\
```js
const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');
const connectDB = async () => {
try {
await mongoose.connect(
db,
{
useNewUrlParser: true
}
);
console.log('MongoDB is Connected...');
} catch (err) {
console.error(err.message);
process.exit(1);
}
};
module.exports = connectDB;
```
- create the `default.json` in config directory & add it to `.gitignore`. because it will contain the database password & username.
- We need another dependency package called config for the global variable to run our project. `npm i config`
- After this edit `index.js`. just add below two lines to check whether a database is working properly or not.
```js
const connectDB = require('./config/db');
connectDB();
```
- Now check the app. `npm run app` and see in the console. It should show `MongoDB is Connected...`. (Make allow all ip in the mongo cluster to invoke the request.)
- Now create `Route` & `api` directories inside root directory.
- Then create the `book.js` inside the `api` folder & add the following code in it.
```js
// routes/api/books.js
const express = require('express');
const router = express.Router();
// Load Book model
const Book = require('../../models/Book');
// @route GET api/books/test
// @description tests books route
// @access Public
router.get('/test', (req, res) => res.send('book route testing!'));
// @route GET api/books
// @description Get all books
// @access Public
router.get('/', (req, res) => {
Book.find()
.then(books => res.json(books))
.catch(err => res.status(404).json({ nobooksfound: 'No Books found' }));
});
// @route GET api/books/:id
// @description Get single book by id
// @access Public
router.get('/:id', (req, res) => {
Book.findById(req.params.id)
.then(book => res.json(book))
.catch(err => res.status(404).json({ nobookfound: 'No Book found' }));
});
// @route GET api/books
// @description add/save book
// @access Public
router.post('/', (req, res) => {
Book.create(req.body)
.then(book => res.json({ msg: 'Book added successfully' }))
.catch(err => res.status(400).json({ error: 'Unable to add this book' }));
});
// @route GET api/books/:id
// @description Update book
// @access Public
router.put('/:id', (req, res) => {
Book.findByIdAndUpdate(req.params.id, req.body)
.then(book => res.json({ msg: 'Updated successfully' }))
.catch(err =>
res.status(400).json({ error: 'Unable to update the Database' })
);
});
// @route GET api/books/:id
// @description Delete book by id
// @access Public
router.delete('/:id', (req, res) => {
Book.findByIdAndRemove(req.params.id, req.body)
.then(book => res.json({ mgs: 'Book entry deleted successfully' }))
.catch(err => res.status(404).json({ error: 'No such a book' }));
});
module.exports = router;
```
- We can test the apis via postman.
#### Now Time To Configure Our Frontend
- We’ll use Create React App to generate our initial file setup.
- just go to another directory. `npx create-react-app askoverflow`
- test react app. `npm start`
- Add some frontend dependencies with code. (available in public/index.html). It includes font-awesome and bootstrap dependencies.
- Frontend tasks and features
- Add, create or save a new book
- Show all the books we have stored in the database
- Show a single book
- Update a book
- Delete a book
- Add the following dependencies. Axios is a lightweight HTTP client based similar to a Fetch API. Axios is a promise-based async/await library for readable asynchronous code. We can easily integrate with React, and it is effortless to use in any front-end framework.
```
npm install --save react-router-dom
npm install --save axios
```
- Make components and make ready the frontend part of the project separately.
#### Now we will connect the backend with frontend
- we need to install cors in our back-end (server-side) project. run `npm install cors` in backend project.
- now start the `npm start` in frontend and `npm run app` in the backend. It should Work!!