MEA(R)N Stack Web Development Laboratory -

Lab Master (303105386)

2024-25

MEA(R)N Stack Web Development

Laboratory
(303105386)
Lab Manual

Department of Information Technology

Parul Institute of Engineering and Technology

Faculty of Engineering and Technology

Parul University

Session 2024-25

Published by: Submitted By:

Department of Information technology Name: Mynam Rajendra
Faculty of Engineering and Technology Enrolment No: 2203031240881
Parul University Roll No: 43
Class-Div-Batch: 6B9-2

• Laboratory Manual is for Internal Circulation only

PAGE | 1
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

INDEX
Date of Date of Marks
Sr. Perfor Assess Examiner
Experiment Title out 0f
No Page No. mance ment Sign
10
Practical Set – 1 To From
1 1.1. Introduction to MEAN Stack

2 1.2. Setting Up the Development Environment

1.3. Overview of MongoDB, Express.js, Angular,

3
and Node.js

4 2.1. Creating and Configuring MongoDB

5 2.2. Creating and Configuring Express.js

6 2.3. Building RESTful APIs with Express.js

7 3.1. Introduction to Angular

8 3.2. Building Basic UI Components with Angular

3.3. Creating a Single-Page Application (SPA) with
9
Angular
10 4.1. Introduction to Node.js

11 4.2. Creating and Configuring Node.js

4.3. Building Server-Side Applications with

12
Node.js

5.1. Integrating All Components to Build a

13
Full-Stack Application

14 5.2. Testing and Debugging the Application

5.3. Deploying the Application on a Cloud

15
Platform

PAGE | 2
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

CERTIFICATE
This is to certify that

Mr./Ms Mynam Rajendra with enrolment no 2203031240881 has successfully completed

his/herlaboratory experiments in the MEA(R)N Stack Web Development (303105385) from
the department of Information Technology during the academic year 2024-25.

Date of Submission:......................... Staff In charge:................................

Head of Department:...........................................

PAGE | 3
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 1

Objective(s):

1.1. Introduction to MEAN Stack

Outcome:
Have a comprehensive understanding of the technologies and frameworks that make up the MEAN stack,
including MongoDB, Expíess.js, AngularJS, and Node.js.

Problem Statement:

Write a detailed explanation of the MEAN stack, including its components, advantages, and use cases.
Highlight the purpose of each component and provide examples of where the stack is most effectively
applied.

Background Study:

1.1 Introduction to MEAN Stack

The MEAN stack is a JavaScript-based technology stack for building dynamic web applications. It includes:

● MongoDB: NoSQL database for JSON-like documents.

● Express.js: Framework for handling HTTP requests/responses.
● Angular: Frontend framework for dynamic user interfaces.
● Node.js: Runtime for server-side JavaScript execution.

Advantages:

● Full-stack JavaScript.
● Open-source with strong community support.
● Scalable and high-performance.

Use Cases:

● Single-page applications (SPAs).

● Real-time collaboration tools.
● eCommerce platforms.

Code / Configuration (Student work area):

NA

PAGE | 4
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Output (Student work area):

Introduction to MEAN Stack

The MEAN stack is a popular, JavaScript-based technology stack used to develop dynamic and interactive web
applications. It consists of four key components that together provide a complete solution for full-stack
development:

1. MongoDB
○ A NoSQL database used to store data in a JSON-like format.
○ Flexible schema design makes it ideal for modern applications.
2. Express.js
○ A lightweight web application framework for Node.js.
○ Manages server-side logic, routes, and middleware for HTTP requests and responses.
3. Angular
○ A powerful frontend framework developed by Google.
○ Used for creating dynamic, single-page applications (SPAs) with robust user interfaces.
4. Node.js
○ A server-side runtime environment for running JavaScript on the server.
○ Known for its event-driven, non-blocking I/O model, enabling high-performance applications.

Advantages of the MEAN Stack

● Full-stack JavaScript: Uniform language for both client and server, reducing the need for context
switching.
● Open-source: Each component is free to use and benefits from extensive community support.
● Scalability: Suitable for applications that need to handle a growing user base.
● High Performance: Node.js ensures efficient handling of concurrent requests through its non-blocking
architecture.
● Ease of Development: Seamless data flow between components due to JSON usage throughout the
stack.

Use Cases of the MEAN Stack

1. Single-page Applications (SPAs)

○ Examples: Dashboards, online forms, and data visualization tools.
2. Real-time Collaboration Tools
○ Examples: Chat applications, live document editing (e.g., Google Docs).
3. eCommerce Platforms
○ Examples: Online stores, marketplaces, and product management systems.

PAGE | 5
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Question Bank:

1. Define the MEAN stack. What are its core components, and why is it popular for web development?

2. Explain the advantages of using the MEAN stack over traditional server-side development
frameworks.

3. How does the MEAN stack follow the full-stack JavaScript development approach?

4. Discuss the typical architecture of a MEAN stack application and how its components interact with
each other.

PAGE | 6
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 2

Objective(s):

1.2. Setting Up the Development Environment

Outcome:
Have a comprehensive understanding of the technologies and frameworks that make up the MEAN stack,
including MongoDB, Expíess.js, AngularJS, and Node.js.

Problem Statement:

Explain the steps to set up the MEAN stack. Include instructions for installing Node.js, MongoDB, and Angular
CLI, and demonstrate how to set up a basic Express.js application with code examples.

Background Study:

Steps to Set Up MEAN Stack

1. Install Node.js
○ Download from Node.js Official Website.
○ https://nodejs.org/
○ Download any LTS Version.
○ Verify installation: node -v and npm -v
2. Install MongoDB
○ Download MongoDB from MongoDB Community Server.
○ https://www.mongodb.com/try/download/community
○ Also download MongoDB Compass GUI and MongoDB shell.
○ Start MongoDB service and use mongo shell for database operations.
○ Verify Installation with mongod command or mongosh command.
3. Install Angular CLI
○ Command: npm install -g @angular/cli.
○ Verify installation: ng version.
4. Set Up Express.js
○ Install Express: npm install express --save.
○ Create a basic Express app:
i. Create a directory
ii. Initialize with npm init -y
iii. create a js file call it hello.js-

PAGE | 7
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

hello.js–
const express = require('express')

const app = express()

const port = 3000

app.get('/', (req, res) => {

res.send('Hello World!')

})

app.listen(port, () => {

console.log(`Example app listening on port ${port}`)

})

PAGE | 8
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Output (Student work area):

Steps to Set Up MEAN Stack

5. Install Node.js
○ Download from Node.js Official Website.
○ https://nodejs.org/

○ Download any LTS Version.

○ Verify installation: node -v and npm -v.

○ <- Your Node installed version will be shown here.

6. Install MongoDB
○ Download MongoDB from MongoDB Community Server.
○ https://www.mongodb.com/try/download/community

○ Also download MongoDB Compass GUI and MongoDB shell.

PAGE | 9
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

○
○ Start MongoDB service and use mongo shell for database operations.
○ Verify Installation with mongod command or mongosh command.
7. Install Angular CLI
○ Command: npm install -g @angular/cli.
○ Verify installation: ng version.
8. Set Up Express.js
○ Install Express: npm install express --save.
○ Create a basic Express app:
i. Create a directory
ii. Initialize with npm init -y
iii. create a js file call it hello.js-

PAGE | 10
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Question Bank:

1. Outline the steps required to set up the MEAN stack development environment on your system.

2. What is Node.js, and how is it installed? Include the significance of Node Package Manager
(NPM).

3. Explain how to install and configure MongoDB for a MEAN stack project.

4. Describe how you would test whether your MEAN stack environment has been correctly set up.

PAGE | 11
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 3

Objective(s):

1.3. Overview of MongoDB, Express.js, Angular, and Node.js

Outcome:
Have a comprehensive understanding of the technologies and frameworks that make up the MEAN stack,
including MongoDB, Expíess.js, AngularJS, and Node.js.

Problem Statement:

Describe the components of the MEAN stack, focusing on the roles of MongoDB, Express.js, Angular, and
Node.js. Include key features of each component and basic commands or functionalities where applicable.
Background Study:

MongoDB

● A NoSQL database for unstructured data.

● Data is stored as documents in collections.
● Key features:
○ Schema-less design.
○ High availability with replication.
○ Scalability with sharding.
● Quick Commands:
○ Create a database: use myDatabase.
○ Insert data: db.collection.insertOne({ key: value }).
○ Fetch data: db.collection.find().
● Official Docs: MongoDB Documentation : https://www.mongodb.com/docs/

Express.js

● A lightweight framework for building APIs and web applications.

● Middleware support for handling requests.

Angular

● A framework for building dynamic web applications using TypeScript.

● Two-way data binding and dependency injection.

Node.js

● A runtime for executing JavaScript server-side.

● Non-blocking, event-driven architecture.

PAGE | 12
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

Node.js

● A runtime for executing JavaScript server-side.

● Non-blocking, event-driven architecture.
● Example:

const http = require('http');

const server = http.createServer((req, res) => {

res.write('Hello, Node.js!');

res.end();

});

server.listen(3000, () => console.log('Server running on port 3000'));

Angular

● A framework for building dynamic web applications using TypeScript.

● Two-way data binding and dependency injection.
● Example:

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

template: `<h1>Hello, Angular!</h1>`

})

export class AppComponent {}

Express.js

● A lightweight framework for building APIs and web applications.

● Middleware support for handling requests. eg-

const express = require('express');

const app = express();

app.use(express.json());

app.post('/data', (req, res) => res.send(req.body));

PAGE | 13
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Output (Student work area):

Node.js Output

When you run the Node.js example, visiting http://localhost:3000 in your browser will
display:

Hello, Node.js!

Angular Output

After running the Angular application, the web page at the root URL will display:

Hello, Angular!

Question Bank:

1. Explain the role of each MEAN stack component (MongoDB, Express.js, Angular, and Node.js) in
building a web application.

2. What are the main features of MongoDB that make it suitable for MEAN stack applications?

3. Discuss how Express.js simplifies back-end development in the MEAN stack.

4. Compare Angular and Node.js in terms of their roles in the MEAN stack.

PAGE | 14
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 4

Objective(s):

2.1. Creating and Configuring MongoDB

Outcome:
Have a comprehensive understanding of the technologies and frameworks that make up the MEAN stack,
including MongoDB, Expíess.js, AngularJS, and Node.js.

Problem Statement:

Explain the steps involved in setting up and configuring MongoDB, including installation, starting the service,
configuring the database, enabling authentication, and basic shell commands for database operations.
Provide configuration examples and demonstrate basic CRUD commands.

Background Study:

Step 1: Install MongoDB

Follow the installation instructions from the MongoDB Installation Guide based on your operating system.

Step 2: Starting MongoDB

1. On Windows: Run mongod.exe from the MongoDB installation bin folder.

Step 3: Configuring MongoDB

● Configuration File: Locate or create mongod.conf to define parameters like storage path, bind IP
address, and port.
Example:

storage:

dbPath: /data/db

net:

bindIp: 127.0.0.1

port: 27017

Authentication Setup: Create an admin user to enable authentication.

use admin

PAGE | 15
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

db.createUser({

user: "admin",

pwd: "password123",

roles: [{ role: "userAdminAnyDatabase", db: "admin" }]

})

Using MongoDB Shell Commands

● Create a database:

use myDatabase

● Create a collection and insert data:

db.users.insertOne({ name: "John", age: 25 })

● Query data:

db.users.find()

PAGE | 16
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

mongod.exe --config "C:\Program Files\MongoDB\Server\G.0\bin\mongod.conf"

YAML format
storage:
dbPath: /data/db
net:
bindIp: 127.0.0.1
port: 27017

Enabling Authentication - MongoDB Shell Commands

use admin
db.createUser({
user: "admin",
pwd: "password123",
roles: [{ role: "userAdminAnyDatabase", db: "admin" }]
})

MongoDB Shell Commands for CRUD

Create a database
use myDatabase

Insert a document into a collection

db.users.insertOne({ name: "John", age: 25 })

Query the inserted document

db.users.find()
Output (Student work area):

[
{
"_id": ObjectId("65001a3cd53a3a0b28f1247c"),
"name": "John",
"age": 25
}
]

PAGE | 17
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Question Bank:

1. Explain the steps to install and configure MongoDB on a local machine. What are the basic
commands to start and stop the MongoDB server?

2. Describe the procedure for creating a database and collections in MongoDB. Provide an example.

3. What is a replica set in MongoDB, and how does it improve data reliability and availability?

4. Discuss how MongoDB’s configuration file can be used to customize server settings.

PAGE | 18
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 5

Objective(s):

2.2. Creating and Configuring Express.js

Outcome:
Have a comprehensive understanding of the technologies and frameworks that make up the MEAN stack,
including MongoDB, Expíess.js, AngularJS, and Node.js.

Problem Statement:

Explain the steps to set up a Node.js project using Express.js. Include initializing the project, creating a basic
server, and configuring middleware for static files and logging requests. Provide the necessary code snippets
and expected output.

Background Study:

Step 1: Setting Up a Project

● Initialize a Node.js Project: Create a directory for the project, navigate into it, and initialize the project
using npm init -y.
● Install Express.js: Install Express as a dependency for the project.

Step 2: Create a Basic Express Server

● Create a file named app.js.

● Write a basic server to handle requests and send a response.
● Start the server and confirm it's running.

Step 3: Configure Middleware

● Static Files: Set up middleware to serve static files from the public directory.
● Custom Middleware: Add custom middleware to log details of incoming requests.

PAGE | 19
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

Step 1: Initialize a Node.js Project

mkdir express-app
cd express-app
npm init -y

Install Express.js
npm install express

// Step 2: Create a Basic Express Server (app.js)

const express = require('express');
const app = express();

// Enable JSON parsing

app.use(express.json());

// Basic GET route

app.get('/', (req, res) => {
res.send('Welcome to Express.js!');
});

const PORT = 3000;

app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});

// Step 3: Configure Middleware

// Serve static files from 'public' directory
app.use(express.static('public'));

// Custom middleware for logging

app.use((req, res, next) => {
console.log(`Request Method: ${req.method}, URL: ${req.url}`);
next();
});

Run the server

node app.js

PAGE | 20
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Output (Student work area):

When the server starts:

Server running on http://localhost:3000

On visiting http://localhost:3000 in a browser:

Welcome to Express.js!

Log from custom middleware for the GET request to /:

Request Method: GET, URL: /

Question Bank:
1. How do you create a basic Express.js application? Provide a step-by-step explanation.
2. Explain the purpose of middleware in Express.js. Provide an example of using custom middleware.
3. What is the significance of the app.listen() method in an Express.js application? How do you
configure the server to listen on a specific port?
4. Describe how static files (like CSS, images, or JavaScript) can be served using Express.js.

PAGE | 21
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 6

Objective(s):

2.3. Building RESTful APIs with Express.js

Outcome:

Build full-stack web applications.

Problem Statement:

What is the principle of statelessness in REST APIs, and why is it important? List and describe the HTTP
methods used in RESTful APIs. How would you implement basic CRUD operations in Express.js for managing
user data? How can you connect an Express.js application to MongoDB, and what role does Mongoose play?

Background Study:

Step 1: Understand REST Principles

● Stateless: Each request contains all the information needed to process it, and the server doesn't
store any client state.
● Resource-Based: Resources are identified by URIs, and the actions performed on these resources are
defined using HTTP methods.

HTTP Methods

● GET: Retrieve data from the server.

● POST: Create new data on the server.
● PUT/PATCH: Update existing data on the server.
● DELETE: Remove data from the server.

Step 2: Create Routes in Express.js

● Create an API to manage users with basic CRUD operations (Create, Read, Update, Delete).
● Use HTTP methods and corresponding routes to handle requests for user data, including:
○ GET /users: Retrieve all users.
○ GET /users/:id: Retrieve a user by their ID.
○ POST /users: Create a new user.
○ PUT /users/:id: Update a user's information.
○ DELETE /users/:id: Delete a user by their ID.

PAGE | 22
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Step 3: Connect to MongoDB

● Install the MongoDB Driver (mongoose).

● Create a Mongoose model to interact with MongoDB and store user data.
● Modify the routes to store data in the MongoDB database instead of an in-memory array.

Code / Configuration (Student work area):

Install Mongoose to interact with MongoDB

npm install mongoose

// Connect to MongoDB
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/myDatabase', {
useNewUrlParser: true });

// Define a Mongoose Schema

const UserSchema = new mongoose.Schema({
name: String,
email: String
});

// Create a Mongoose Model for the User

const User = mongoose.model('User', UserSchema);

// Express route to POST a new user

app.post('/users', async (req, res) => {
const user = new User(req.body);
await user.save();
res.status(201).json(user);
});

PAGE | 23
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Output (Student work area):

On making a GET request to /users

[
{ "id": 1, "name": "John Doe", "email": "john@example.com" },
{ "id": 2, "name": "Jane Doe", "email": "jane@example.com" }
]

On making a POST request to /users with the user data

{
"name": "Alice",
"email": "alice@example.com"
}

{
"id": 3,
"name": "Alice",
"email": "alice@example.com"
}

Question Bank:
1. Define RESTful APIs. What are the key principles of a RESTful architecture?
2. Explain how to create a RESTful API in Express.js to handle basic CRUD operations. Provide code
examples for one operation.
3. Discuss how request and response objects are handled in Express.js for a RESTful API.
4. What is the role of HTTP methods (GET, POST, PUT, DELETE) in RESTful APIs? How are they
mapped in Express.js routes?

PAGE | 24
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 7

Objective(s):

3.1. Introduction to Angular

Outcome:

Build full-stack web applications.

Problem Statement:

What is Angular, and what are its key features?How do you set up an Angular project and serve it locally?

Background Study:

What is Angular?

Angular is a TypeScript-based open-source framework used for developing dynamic and responsive web
applications. It is ideal for creating single-page applications (SPAs) and provides tools for efficient data binding,
modular development, and routing.

Key Features

● Two-Way Data Binding: Syncs data between the UI and the component.
● Dependency Injection: Efficiently manages service dependencies across the app.
● Directives: Special markers like *ngIf and *ngFor for dynamic behavior.
● Routing: Enables navigation between components without reloading the page.

Setting Up Angular

1. Install Angular CLI

Run:
npm install -g @angular/cli
2. Create a new Angular project
Run:
ng new my-angular-app
3. Serve the project
Navigate to the project folder and run:
cd my-angular-app
ng serve

PAGE | 25
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Folder Structure Overview

● src/app: Contains application components, modules, and services.

● src/assets: Stores static files like images and stylesheets.
● angular.json: Configures the Angular build process.

Instruction/Configuration (Student work area):

Install Angular CLI

npm install -g @angular/cli

Create a new Angular project

ng new my-angular-app

Navigate to the project folder

cd my-angular-app

Serve the Angular project

ng serve

Output (Student work area):

Upon running ng serve, you should see output similar to:

** Angular Live Development Server is listening on localhost:4200, open
your browser on http://localhost:4200/ **

Question Bank:
1. What is Angular, and how does it differ from AngularJS?
2. Explain the core features of Angular that make it suitable for building modern web applications.
3. What is TypeScript, and why is it used in Angular development?
4. Discuss the architecture of an Angular application. How do components, modules, and services
interact?

PAGE | 26
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 8

Objective(s):

3.2. Building Basic UI Components with Angular

Outcome:

Build full-stack web applications.

Problem Statement:

How do you create and include a new component in an Angular project?What are the steps for using *ngIf
and *ngFor directives in Angular?How do you capture user interactions using event binding in Angular?

Background Study:

Step 1: Creating a Component

● Use Angular CLI to generate a new component. This will create multiple files: the component logic file,
the template (UI structure), the styles, and a test file.
● Update the component logic and template.
● Add the component to the main module file and include it in the HTML of the application.

Step 2: Using Directives

● *ngIf: A directive for conditional rendering. It will display the element only if the condition is true.
● *ngFor: A directive for iteration. It allows you to loop through an array and display its items.

Step 3: Event Binding

● Event binding allows you to capture user interactions, such as clicks, by binding a method to the
event.
● When the event occurs, the associated method will be triggered and can update the component's
properties.

PAGE | 27
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

Generate a new component using Angular CLI

ng generate component my-component

// Update my-component.component.ts (component logic)

export class MyComponent {
message = "Hello from MyComponent!";
items = ["Item 1", "Item 2", "Item 3"];

changeMessage() {
this.message = "You clicked the button!";
}
}

<!-- Update my-component.component.html (UI structure) -->

<h1>{{ message }}</h1>
<p *ngIf="message">The message is: {{ message }}</p>

<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>

<!-- Event binding -->

<button (click)="changeMessage()">Click Me</button>

// Update app.module.ts to declare the new component

import { MyComponent } from './my-component/my-component.component';

@NgModule({
declarations: [
MyComponent
],
})
export class AppModule { }

<!-- Include the new component in app.component.html -->

<app-my-component></app-my-component>

PAGE | 28
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Output (Student work area):

Upon running the Angular application, the following will happen:

● The message will be displayed in an <h1> tag, initially showing "Hello from MyComponent!".
● The list of items will appear in an unordered list.
● When the "Click Me" button is clicked, the message will change to "You clicked the button!".

Question Bank:
1. What are components in Angular, and how are they created? Provide an example.
2. Explain the concept of data binding in Angular. What are the different types of data binding?
3. What is a directive in Angular? Discuss the difference between structural and attribute directives.
4. How do you use Angular to handle user events such as button clicks? Provide an example.

PAGE | 29
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 9

Objective(s):

3.3. Creating a Single-Page Application (SPA) with Angular

Outcome:

Build full-stack web applications.

Problem Statement:

How do you configure routing in an Angular application?How can you create and use components for specific
routes in Angular?How can you pass data between routes using route parameters?What is lazy loading in
Angular, and how do you configure it?

Background Study:

Step 1: Configuring Angular Router

● Generate the routing module for the app and define the routes in the module.
● Add the <router-outlet> directive in the main HTML file to display the routed components.

Step 2: Creating Components for Routes

● Generate the components for each route (e.g., Home and About) and define the content for each
component's HTML.

Step 3: Passing Data Between Routes

● Update routes to include route parameters.

● Access route parameters in the component to dynamically display or process data.

Step 4: Lazy Loading for Optimization

● Create a feature module for lazy loading.

● Configure the lazy loading of the feature module in the routing module.

PAGE | 30
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

Generate routing module

ng generate module app-routing --flat --module=app

// Define routes in app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [

{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

<!-- Add <router-outlet> in app.component.html -->

<nav>
<a routerLink="/">Home</a> | <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

Generate components for Home and About routes

ng generate component home
ng generate component about

<!-- Define content for home.component.html -->

<h2>Welcome to the Home Page</h2>

<!-- Define content for about.component.html -->

<h2>About Us</h2>

// Access route parameters in details.component.ts

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

PAGE | 31
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
console.log('Route Parameter:', id);
}

Create feature module for lazy loading

ng generate module feature --route feature --module app

// Configure lazy loading in app-routing.module.ts

const routes: Routes = [
{ path: 'feature', loadChildren: () =>
import('./feature/feature.module').then(m => m.FeatureModule) }
];

Output (Student work area):

1. The application will display the home and about pages as per the defined routes when
you navigate between them.
2. When visiting the route with parameters (e.g., /details/1), the route parameter will
be logged to the console.
3. The feature module will be lazy-loaded when the user navigates to the /feature
route, improving performance by loading the module only when required.

Question Bank:
1. What is a Single-Page Application (SPA), and how does Angular facilitate SPA development?
2. Explain the role of the Angular Router in building SPAs. How do you configure routes in an Angular
application?
3. What are lazy loading and route guards in Angular? How do they enhance SPA performance and
security?
4. Describe the lifecycle of an Angular component in the context of an SPA. Why is understanding the
lifecycle important?

PAGE | 32
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 10

Objective(s):

4.1. Introduction to Node.js

Outcome:
Build full-stack web applications.

Problem Statement:

What is Node.js and what are its key features?What are some common use cases of Node.js?How does
Node.js handle asynchronous and non-blocking I/O operations?

Background Study:

What is Node.js?

Node.js is an open-source, cross-platform JavaScript runtime environment that enables developers to execute
JavaScript code on the server side. Built on Chrome's V8 JavaScript engine, Node.js allows for the
development of scalable and high-performance network applications.

Key Features:

● Asynchronous and Event-Driven: Node.js operates on a single-threaded event loop, handling multiple
operations concurrently without blocking the execution thread.

● Non-Blocking I/O: It uses non-blocking I/O calls, allowing for the handling of numerous operations
simultaneously, which is ideal for I/O-intensive applications.

● Scalability: Node.js is designed to build scalable network applications, capable of handling a large
number of simultaneous connections with high throughput.

Use Cases:

● Web Servers: Creating fast and scalable web servers.

● Real-Time Applications: Developing applications like chat systems and live updates.
● API Servers: Building RESTful APIs for web and mobile applications.

Resources:

● Introduction to Node.js - Node.js Official Documentation

● https://nodejs.org/en/learn/getting-started/introduction-to-nodejs

PAGE | 33
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

// Simple Node.js web server using HTTP module

const http = require('http');

const server = http.createServer((req, res) => {

res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!\n');
});

const PORT = 3000;

server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});

Output (Student work area):

When you run the above code and visit http://localhost:3000/

Response:

Hello, World!.

This demonstrates Node.js handling requests asynchronously and non-blocking, allowing the
server to process multiple requests concurrently without blocking the event loop.

Question Bank:

1. What is Node.js, and how does it differ from traditional server-side platforms?
2. Explain the non-blocking I/O model in Node.js and its advantages.
3. What is the Node.js runtime environment, and why is it suitable for building scalable applications?
4. Discuss the role of the Node.js Event Loop. How does it handle asynchronous operations?

PAGE | 34
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 11

Objective(s):

4.2. Creating and Configuring Node.js

Outcome:
Build full-stack web applications.

Problem Statement:

How do you install Node.js and verify its installation?What are the steps to set up a new Node.js project and
install dependencies?How do you create a simple Express server in Node.js?

Background Study:

Installation:

1. Download Node.js:
○ Visit the Node.js Official Website and download the installer suitable for your operating
system.
2. Verify Installation:
○ Open a terminal or command prompt and run:

node -v

npm -v

○ This will display the installed versions of Node.js and npm (Node Package Manager).

Setting Up a Node.js Project:

1. Initialize a New Project:

○ Create a new directory for your project and navigate into it:

mkdir my-node-app

cd my-node-app

○ Initialize the project:

npm init -y

PAGE | 35
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

2. Install Dependencies:
○ For example, to install the Express.js framework:

npm install express

Creating a Basic Server:

1. Create an app.js File:

○ In the project directory, create a file named app.js.
○ This code sets up a simple Express server that responds with "Hello, World!" when accessed
at the root URL.
2. Run the Server:
○ Start the server by running:

node app.js

○ Access http://localhost:3000 in your browser to see the response.

PAGE | 36
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

// app.js file for a basic Express server

const express = require('express');

const app = express();

app.get('/', (req, res) => {

res.send('Hello, World!');
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

Output (Student work area):

After running the above code (node app.js), you should see the following output in the
terminal:

Server is running on port 3000

When you visit http://localhost:3000 in a browser, it will display:

Hello, World!

Question Bank:

1. How do you install Node.js on your system, and what tools are included with the installation?
2. What is the purpose of the package.json file in a Node.js project? How do you create and
configure it?
3. Explain how to use require and import to load modules in Node.js. What is the difference
between CommonJS and ES modules?
4. Discuss how environment variables can be configured and used in a Node.js application.

PAGE | 37
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 12

Objective(s):

4.3. Building Server-Side Applications with Node.js

Outcome:
Build full-stack web applications.

Problem Statement:

How do you create RESTful APIs in Node.js?How do you define routes to handle GET and POST requests in a
Node.js application?What is the process for handling request data and connecting to a MongoDB database in
a Node.js project?How do you implement CRUD operations (Create, Read, Update, Delete) in a RESTful API
with MongoDB?

Background Study:

Creating RESTful APIs: You define routes to handle different HTTP methods such as GET and POST requests.
Each route is responsible for processing the incoming request and sending the appropriate response.

Handling Request Data: To handle request bodies (especially for POST requests), you use middleware like
body-parser to parse the incoming data.

Connecting to a Database: You can connect your Node.js application to a database such as MongoDB using a
package like mongoose. It allows you to define a connection string and handle any errors that occur during
the connection process.

Creating Models: Models are used to represent the data in your application. A schema is defined using
mongoose.Schema, and then a model is created using mongoose.model.

Implementing CRUD Operations:

● Create: You create new records by sending POST requests.

● Read: You retrieve data using GET requests.
● Update: You modify existing records using PUT requests.
● Delete: You delete records using DELETE requests.

PAGE | 38
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

// Define Routes for GET and POST requests

// GET request
app.get('/api/data', (req, res) => {
res.json({ message: 'GET request received' });
});

// POST request
app.post('/api/data', (req, res) => {
res.json({ message: 'POST request received' });
});

// Handling Request Data (using body-parser)

const bodyParser = require('body-parser');

app.use(bodyParser.json());

// Connecting to MongoDB

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser:
true, useUnifiedTopology: true })
.then(() => console.log('Connected to MongoDB'))
.catch(err => console.error('Could not connect to MongoDB:', err));

// Creating Models

const Schema = mongoose.Schema;

const dataSchema = new Schema({
name: String,
value: Number
});
const Data = mongoose.model('Data', dataSchema);

// CRUD Operations
// Create
app.post('/api/data', (req, res) => {
const newData = new Data(req.body);
newData.save()
.then(() => res.status(201).json(newData))
.catch(err => res.status(400).json('Error: ' + err));
});

PAGE | 39
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

// Read
app.get('/api/data', (req, res) => {
Data.find()
.then(data => res.json(data))
.catch(err => res.status(400).json('Error: ' + err));
});

// Update
app.put('/api/data/:id', (req, res) => {
Data.findByIdAndUpdate(req.params.id, req.body, { new: true })
.then(updatedData => res.json(updatedData))
.catch(err => res.status(400).json('Error: ' + err));
});

// Delete
app.delete('/api/data/:id', (req, res) => {
Data.findByIdAndDelete(req.params.id)
.then(() => res.json('Data deleted'))
.catch(err => res.status(400).json('Error: ' + err));
});

Output (Student work area):

GET /api/data:
{ "message": "GET request received" }

POST /api/data: Example request body: { "name": "Sample", "value": 42 } Response:

{ "message": "POST request received" }

Create Data (POST /api/data with data): Example request body: { "name": "New Data",
"value": 100 } Response:
{
"_id": "some-id",
"name": "New Data",
"value": 100
}

Read Data (GET /api/data): Response:

[ { "_id": "some-id", "name": "New Data", "value": 100 }, {
"_id": "other-id", "name": "Another Data", "value": 200 }]

PAGE | 40
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Update Data (PUT /api/data/:id with updated data): Example request body: { "name":
"Updated Data", "value": 200 } Response:
{
"_id": "some-id",
"name": "Updated Data",
"value": 200
}

Delete Data (DELETE /api/data/:id): Response:

"Data deleted"

Question Bank:

1. Describe the steps to create a basic HTTP server in Node.js using the http module. Provide an
example.
2. What is middleware in Node.js, and how does it enhance server-side functionality?
3. Explain the role of the fs module in building server-side applications. Provide an example of reading
and writing files.
4. How can you handle routing in a Node.js application? Compare using the core http module vs. using
a framework like Express.js.

PAGE | 41
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 13

Objective(s):
5.1. Integrating All Components to Build a Full-Stack Application

Outcome:
Build full-stack web applications.

Problem Statement:

What are the key tasks involved in integrating the frontend, backend, and database in a full-stack
application?How do you handle API calls from the Angular frontend to a Node.js backend using Angular's
HttpClient?How do you structure a Node.js backend with MongoDB to ensure proper data management?

Background Study:

Integration Tasks:

● Frontend (Angular): Build a user-friendly UI and implement necessary API calls using Angular's
HttpClient.
● Backend (Node.js/Express): Develop RESTful APIs, connect to MongoDB, and manage server-side logic.
● Database (MongoDB): Store and retrieve data efficiently, ensuring proper schema design.
● Communication: Ensure seamless communication between frontend and backend using consistent
endpoints.

PAGE | 42
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

// Angular service to make an API call to the backend
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class ApiService {
private apiUrl = 'http://localhost:3000/api/data'; // Node.js API
endpoint

constructor(private http: HttpClient) { }

getData(): Observable<any> {
return this.http.get(this.apiUrl); // GET request
}

postData(data: any): Observable<any> {

return this.http.post(this.apiUrl, data); // POST request
}
}

// Node.js backend with Express

const express = require('express');
const app = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

// Middleware
app.use(bodyParser.json());

// Database Connection
mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser:
true, useUnifiedTopology: true })
.then(() => console.log('Connected to MongoDB'))
.catch(err => console.error('Could not connect to MongoDB:', err));

// Sample Route to fetch data

app.get('/api/data', (req, res) => {
res.json({ message: 'GET request received' });
});

PAGE | 43
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

// Route to post data

app.post('/api/data', (req, res) => {
const data = req.body; // Getting data from frontend
res.json({ message: 'POST request received', data });
});

const PORT = 3000;

app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

// MongoDB Schema for storing data

const mongoose = require('mongoose');

const dataSchema = new mongoose.Schema({

name: String,
value: Number
});

const Data = mongoose.model('Data', dataSchema);

Output (Student work area):

{
"message": "GET request received"
}

{ "name": "Sample", "value": 123 }

{
"message": "POST request received",
"data": { "name": "Sample", "value": 123 }
}

PAGE | 44
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Question Bank:

1. What are the steps involved in integrating the MEAN stack components to build a full-stack
application?
2. How does the front-end (Angular) communicate with the back-end (Node.js and Express.js) in a
MEAN stack application?
3. Explain how to configure MongoDB to store and retrieve data for a full-stack application. Provide an
example.
4. What is the role of APIs in connecting the front-end and back-end of a full-stack application?

PAGE | 45
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 14

Objective(s):

5.2. Testing and Debugging the Application

Outcome:
Build full-stack web applications.

Problem Statement:

What tools are recommended for testing the frontend and backend of an Angular application?How can you
debug and log errors in both the frontend and backend of a full-stack application?What are the best
practices for backend API testing and error monitoring?

Background Study:

Recommended Tools and Techniques:

● Frontend Testing:
○ Use Karma and Jasmine for Angular unit tests.
○ Use Protractor for end-to-end (E2E) testing.
● Backend Testing:
○ Use Mocha and Chai for testing APIs and server-side logic.
○ Test API endpoints using Postman or Swagger.
● Debugging Tools:
○ Browser DevTools for frontend debugging.
○ console.log() or Node.js Debugger for backend debugging.
● Error Logging:
○ Use tools like Sentry or Winston for error monitoring.
○ Winston: This is a versatile logging library for Node.js that helps log errors, warnings, and
other information, which can be stored in various formats (like files or databases).

PAGE | 46
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

// logging errors with Winston in a Node.js application

const winston = require('winston');

const logger = winston.createLogger({

level: 'error',
transports: [
new winston.transports.Console(),
new winston.transports.File({ filename: 'error.log' })
]
});

// Example of logging an error

logger.error('This is an error message');

Output (Student work area):

Console Output:
error: This is an error message

File Output (error.log):

error: This is an error message

Question Bank:

1. Why is testing important in full-stack application development? Explain the difference between unit
testing and integration testing.
2. What tools and libraries are commonly used for testing MEAN stack applications? Provide examples
for both front-end and back-end testing.
3. Describe how you can debug a Node.js server application. What tools or techniques can you use?
4. What are some common errors in MEAN stack applications, and how can they be identified and
resolved?

PAGE | 47
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

EXPERIMENT NO. 15

Objective(s):

5.3. Deploying the Application on a Cloud Platform

Outcome:
Build full-stack web applications.

Problem Statement:

What are the popular deployment options for hosting web applications?How can you deploy a Node.js
application to Vercel?What configurations are required for deploying a web application on Vercel?

Background Study:

Deployment Options:

1. Heroku
2. AWS (Amazon Web Services)
3. Microsoft Azure
4. Google Cloud Platform
5. Vercel
6. Netlify
7. DigitalOcean
8. Railway
9. Render
○

PAGE | 48
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Code / Configuration (Student work area):

Vercel Example:
Create a vercel.json file in your project root to define the deployment
settings:

{
"version": 2,
"builds": [
{
"src": "app.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "app.js"
}
]
}

const express = require('express');

const app = express();

app.get('/', (req, res) => {

res.send('Hello from Vercel!');
});

app.listen(3000, () => {
console.log('Server is running on port 3000');
});

PAGE | 49
 COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY
MEA(R)N Stack Web Development Laboratory -
Lab (303105386)
Enrollment N0 : 2203031240881

Output (Student work area):

https://your-app-name.vercel.app/

Hello from Vercel!

Question Bank:

1. Explain the process of deploying a MEAN stack application on a cloud platform like AWS, Azure, or
Google Cloud.
2. What is a container, and how can Docker be used to simplify the deployment process?
3. Discuss the benefits of using cloud-based databases like MongoDB Atlas for deployment.
4. What steps are involved in configuring a production-ready MEAN stack application, including
environment variables, SSL, and performance optimization?

PAGE | 50