InterviewBee

Mern-Starter Guide

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

 // 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.

 "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.

 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.
```
 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.

 // 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!!