Department of Artificial Intelligence
Web Programming with MEAN
UNIT:2
Faculty: AVINASH PAL LIDLAAN
UNIT:2 SYLLABUS
Building a Node Web Application
Creating and setting up a MEAN project: Creating an Express project, modifying Express for MVC,
Importing Bootstrap for quick, responsive layouts and making it live on Heroku.
Building a static site with Node and Express: Defining the routes in Express, building basic controllers,
creating some views, adding the rest of the views, and taking the data out of the views
and making them smarter.
INDEX
[Link] and install an Express project.
[Link] Express for MVC.
[Link] Bootstrap for quick.
[Link] layouts.
[Link] it live on Heroku.
[Link] the routes in Express and building basic controllers.
[Link] some views and adding the rest of the views.
8. Taking the data out of the views and making them smarter.
BUILDING A NODE WEB APPLICATION
Building a Node web application involves creating a server-side program using [Link] that listens to HTTP requests,
handles routing logic (typically using [Link]), serves dynamic or static content, and integrates with data sources
such as MongoDB. It serves as the foundation of modern full-stack JavaScript applications in the MEAN stack.
Core Concepts:
•[Link] provides an event-driven, non-blocking runtime for server logic.
•[Link] simplifies routing, middleware management, and view rendering.
•MVC architecture organizes the app into models, views, and controllers.
•Dynamic rendering can be done via Pug or EJS (template engines).
•Static content is served using Express middleware.
BUILDING A NODE WEB APPLICATION
Step Description
Creates [Link] to manage dependencies and
npm init
metadata
npm install express Installs Express for routing and middleware
Sets up a minimal server that responds to homepage
[Link]
requests
node [Link] Runs the server so it can handle requests
localhost:3000 Run app and check server output
BUILDING A NODE WEB APPLICATION
Loc8r App Example:
The process begins with setting up a Node application that serves content using Express and uses MongoDB to store
location and review data.
Core Steps:
Initialize a Node Project:
mkdir loc8r
cd loc8r
npm init –y
Install Dependencies:
npm install express
BUILDING A NODE WEB APPLICATION
Create a Basic Server ([Link]):
const express = require('express');
const app = express();
const port = 3000;
[Link]('/', (req, res) => {
[Link]('Welcome to Loc8r!');
});
[Link](port, () => {
[Link](`Server is running at [Link]
});
Run the Server:
node [Link]
BUILDING A NODE WEB APPLICATION
• Node + Express = powerful foundation for web apps.
• Encourages modularity, reusability, and API-first development.
• Scales seamlessly from simple websites to RESTful or real-time apps.
• Used as the backbone of MEAN stack development.
Why Use Node for Web Apps?
• Non-blocking I/O and event-driven architecture.
• Same language (JavaScript) across front-end and back-end.
• Great for real-time and RESTful API-based apps.
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
Creating and installing an Express project involves initializing a [Link] project and adding [Link], a fast,
unopinionated web application framework, to handle HTTP requests, routing, and middleware. It is the foundational
step in building the server-side logic for a MEAN stack web application.
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
Core Steps:
1. Initialize [Link] Project
•npm install -g express-generator
•cd myapp
•npm init -y
Creates a [Link] file that manages dependencies.
2. Install Express
•npm install express --save
Adds Express to your project and logs it as a dependency.
•npm audit fix --force # repeat until 0 vulnerabilities
•npm install -g nodemon
•nodemon
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
3. Folder Structure (Auto-Generated)
myHomeApp/
├── [Link] # Main app file
├── bin/www # Server startup
├── public/ # Static assets (CSS, JS)
├── routes/[Link] # Route definitions
├── views/ # Jade view files
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
.4. Create Basic Server ([Link])
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const indexRouter = require('./routes/index');
const app = express();
[Link]('views', [Link](__dirname, 'views'));
[Link]('view engine', 'jade');
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
.4. Create Basic Server ([Link])
[Link](logger('dev'));
[Link]([Link]());
[Link]([Link]({ extended: false }));
[Link](cookieParser());
[Link]([Link]([Link](__dirname, 'public')));
[Link]('/', indexRouter);
[Link](function (req, res, next) {
[Link](404).render('error', { title: '404 - Not Found' });
}); [Link] = app;
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
5. Set Up Controller
•mkdir controllers
controllers/[Link]
[Link] = (req, res) => {
[Link]('index', {
title: 'Home Page',
message: 'Welcome to the Express Home Page!',
bodyClass: 'home-bg'
});
};
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
6. Define Routes
routes/[Link]
const express = require('express');
const router = [Link]();
const mainController = require('../controllers/main');
[Link]('/', [Link]);
[Link] = router;
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
7. Add Bootstrap + Custom CSS
Create Bootstrap folder:
•mkdir -p public/bootstrap/css
Download and place:
•public/bootstrap/css/[Link]
Edit public/stylesheets/[Link]:
[Link]-bg {
background-color: # 0568bb;
}
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
8: Create Views
views/[Link]
doctype html
html
head
meta(name='viewport', content='width=device-width, initial-scale=1.0')
title= title
link(rel='stylesheet', href='/bootstrap/css/[Link]')
link(rel='stylesheet', href='/stylesheets/[Link]')
body(class=bodyClass)
.container
block content
script(src='/javascripts/[Link]')
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
8: Create Views
views/[Link]
extends layout
block content
[Link]-primary= title
[Link]-center= message
views/[Link]
extends layout
block content
[Link]-danger= title
[Link]-error The page you are looking for does not exist.
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
9: Run the App
nodemon
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
BUILDING A NODE WEB APPLICATION
1. CREATING AND INSTALL EXPRESS PROJECT
Loc8r project is initialized by:
•Creating an Express server using [Link]
•Adding route files and controllers for modular architecture
•Serving content using Express' built-in methods
This becomes the foundation of the full-stack Loc8r app.
BUILDING A NODE WEB APPLICATION
2. MODIFYING EXPRESS FOR MVC
Modifying Express for MVC means restructuring an Express-based [Link] application using the Model–View–
Controller design pattern. This promotes code modularity by separating data (Model), user interface (View), and
control logic (Controller). It makes the code easier to test, maintain, and scale in larger MEAN applications.
MVC Structure Overview in Express:
Layer Role Folder
Model Defines data schemas and interacts with database app_api/models/
View Handles UI presentation (Pug or Angular) app_server/views/
Controller Contains logic to process requests and return views app_server/controllers/
Router Maps URL paths to controller functions app_server/routes/
BUILDING A NODE WEB APPLICATION
2. MODIFYING EXPRESS FOR MVC
Example – Loc8r App Step-by-Step Breakdown:
1. Create Folder Structure:
/[Link]
/app_server/
├── controllers/
│ └── [Link]
├── routes/
│ └── [Link]
└── views/
└── [Link]
BUILDING A NODE WEB APPLICATION
2. MODIFYING EXPRESS FOR MVC
2. Create Controller – [Link]
// app_server/controllers/[Link]
[Link] = (req, res) => {
[Link]('index', { title: 'Loc8r' });
};
This controller handles the logic for the homepage route.
BUILDING A NODE WEB APPLICATION
2. MODIFYING EXPRESS FOR MVC
3. Create Route File – [Link]
// app_server/routes/[Link]
const express = require('express');
const router = [Link]();
const ctrlMain = require('../controllers/main');
[Link]('/', [Link]);
[Link] = router;
The router maps the URL / to the homepage function in [Link].
BUILDING A NODE WEB APPLICATION
2. MODIFYING EXPRESS FOR MVC
4. Update [Link] to Use Routes:
// [Link]
const express = require('express'); // View engine setup
const path = require('path'); [Link]('views', [Link](__dirname, 'views'));
const cookieParser = require('cookie-parser'); [Link]('view engine', 'jade');
const logger = require('morgan');
const indexRouter = require('./routes/index');
const app = express();
BUILDING A NODE WEB APPLICATION
2. MODIFYING EXPRESS FOR MVC
4. Update [Link] to Use Routes:
// [Link] // Routes
[Link]('/', indexRouter);
// Middleware
[Link](logger('dev'));
// Error handler
[Link]([Link]());
[Link](function (req, res, next) {
[Link]([Link]({ extended: false }));
[Link](404).render('error', { title: '404 - Not Found' });
[Link](cookieParser());
});
[Link]([Link]([Link](__dirname, 'public')));
[Link] = app;
BUILDING A NODE WEB APPLICATION
2. MODIFYING EXPRESS FOR MVC
5. Create View – [Link]
doctype html
html
head
title= title
body
h1 Welcome to #{title}
p This page uses the MVC structure.
BUILDING A NODE WEB APPLICATION
2. MODIFYING EXPRESS FOR MVC
Concept Description
MVC in Express Separates routing, logic, and views for better structure
Controller Handles request and passes data to the view
Router Directs request to proper controller
View Presents content dynamically (e.g., Pug or EJS)
Benefit Code is modular, scalable, and easier to maintain
BUILDING A NODE WEB APPLICATION
3. IMPORTING BOOTSTRAP FOR QUICK