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

• 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

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