Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner (Part 4)

July 11, 2019

Okay, after installing modules for Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, now we are going to the fourth part. Cool! now it is going to be  a little bit challenging now..

Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner (part 4)

As we already install all the needed module and did a litte configuration, now we are going to configure the main file to run the configuration of the project. So, first let's create this file name it app.js. The structure folder can be seen below

Inside the app.js, write these codes

const express = require('express');
const mongoose = require('mongoose');
require('dotenv/config');
const app = express();
const bodyparser = require('body-parser');
const path = require('path');

//view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// allow to use body parser
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({ extended: false }));

//routes 
app.get('/', async (req, res) => {
    res.send('<h1>App notes this is the first page</h1>');
});

//load routes
const notes_route = require('./routes/notes');

//middleware
app.use('/notes', notes_route);

//connect database
mongoose.connect(process.env.MYCONNECTION,
    { useNewUrlParser: true },
    () => console.log('yeay connected!'));

//this is to listen the port
const port = 5000;
app.listen(port, function () {
    console.log('the server runs at ' + port);
});


So, here are the explanation:

Set the Modules

const express = require('express');
const mongoose = require('mongoose');
require('dotenv/config');
const bodyparser = require('body-parser');
const app = express();
const path = require('path');
in this block of code we include all required modules for this project. These module are stored in node_modules folder.
const app = express()

This means that we will store the express function to a constant variable named app. The express() function is a top-level function exported by the express module.
const body-parser = require('body-parser')

body-parser extract the entire body portion of an incoming request stream (from html) and exposes it on req.body. The body-parser module parses the JSON, buffer, string and URL encoded data submitted using HTTP POST request. So, It is needed when we want to retrieve data from the html.
const path = require('path')

This path module provides a way of working with directories and file paths. Where we will use it to set the directories for the-view-folder and stored-asset-folder

Set the View Directory and Engine

app.set('views', path.join(__dirname, 'views'));

In the view directory, we will use module path. The path.join() method joins the specified path segments into one path. So this code means that we set the 'views' directory to folder 'views'.
app.set('view engine', 'ejs')

And we use ejs templating as the view engine for the project.

Set the route

Here the only route that I will use ONLY to access the homepage using only the address / . For the rest route I use middleware to define the routes. There is the difference between route and middleware. But now let's see how I define the route
app.get('/', async (req, res) => {
res.send('<h1>App notes this is the first page</h1>');
});
it means if the route is / , for instance localhost:5000/ so we will render/send "App notes. this is the first page" to the browser and it is written using tag h1.


Set the Middleware

Middleware allows you to define a stack of actions that you should flow through. Express servers themselves are a stack of middlewares. So with middleware, we do not have to declare like routes above. With this middleware we can simply access the external file (like router file) using the app.use() property.
First we have to load the route
const notes_route = require('./routes/notes');
then we declare the middleware

app.use('/notes', notes_route);

so, every time we access /notes or notes/something, we will be redirected to the external router file where the file consists of routes.

Connect the database

//connect database
mongoose.connect(process.env.MYCONNECTION,
{ useNewUrlParser: true },
() => console.log('yeay connected!'));
we are using the mongoose module to connect our database. So, what does process.env.Myconnection means ? It's a process from file called .env. And inside this file I already set a variable containing the configuration for the database.

How to make .env file?

Just make a file named .env then we put our code like this (I will give you my connection so you may don't have to make it by yourself, however if you want to learn how to set up the database you can follow the next step)
MYCONNECTION=mongodb+srv://zenhuzaini:test123@cluster0-xjc4h.mongodb.net/test?retryWrites=true&w=majority

here is the folder structure for this simple note app project
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Express, Mongodb and Bootstrap For Beginner
Folder Structure for Note app using Node js

Provide the listen port for the node project

we use the listen() method in order to be able to listen to the port.
const port = 5000;
app.listen(port, function () {
console.log('the server runs at ' + port);
});
In the next tutorial we are going to learn about how to use MongoDB Atlas for this project as well as to create a model for our simple node app using Node js.

Next Tutorial Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner (Part 5)

Table Content

title Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 1 Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 2 Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 3 Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 4 Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 5 Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 6 Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 7 Link

Tag :
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Express, Mongodb and Bootstrap For Beginner

Share this

Related Posts

Previous
Next Post »