Skip to main content

Lab-1-2

(4% of the course mark)

NPM and Express.js Lab​

  • In this lab, participants will delve into the world of web development with NPM (Node Package Manager), tool for managing dependencies and sharing code within the JavaScript ecosystem and Express.js, web application framework for Node.js. Through hands-on exercises, learners will explore how to rapidly build robust and scalable web applications using NPM and Express.js. Topics covered include setting up a basic Express.js application using NPM, defining routes, and handling HTTP requests and responses.

Lab objectives​

  • Understand the role and benefits of NPM and Express.js in web development.

  • Set up a basic Express.js application.

  • Define routes to handle different HTTP requests and responses.

NPM Registry​

  1. Open your browser and navigate to https://www.npmjs.com.

  2. On the package search bar enter express and click on Search.

submission

  1. Click on the express link to see more information about Express.js package.

  2. On the Express.js NPM page, take a screenshot of the following:

  • How to install this package and name it install.png.

  • Where is the repository of this package and name it repository.png.

  • Where is the homepage of this package and name it homepage.png.

  • How much weekly downloads this package has and name it weekly-downloads.png.

  • What is the latest version of this package has and name it version.png.

  • When was this package last published and name it last-publish.png.

info

NPM (Node Package Manager) is the default package manager for Node.js and the world's largest software registry, containing over two million packages of open-source JavaScript code. It consists of a command-line interface (CLI) for installing, managing, and sharing dependencies, and an online registry.

Create an Express.js app​

  1. Open VSCode and create a folder named Express-App.

  2. Open the terminal and change the directory to Express-App.

  3. Initialize the app by typing the command below:

npm init -y
  1. Install Express.js by typing the command below:
npm install express
  1. Create a file named index.js and enter the following code:
const express = require("express");
const app = express();
const port = 3000;
const APP_NAME = "Express-App";

app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(port, () => {
  console.log(`${APP_NAME} listening on port ${port}`);
});

  1. Save the changes.

  2. On the terminal enter the command below and press enter.

node index.js

  1. Open your browser and enter the url: http://localhost:3000

  2. Take a screenshot and name it hello-world.png.

  3. Press ctrl-c to terminate the app.

Add JSON route​

  1. Make changes to the file index.js and a new route by adding the code below.
app.get("/json", (req, res) => {
  const userObject = { firstName: "Elon", lastName: "Musk" };
  res.send(userObject);
});

  1. Save the changes.

  2. On the terminal enter the command below and press enter.

node index.js

  1. Open your browser and enter the url: http://localhost:3000/json

  2. Take a screenshot and name it json.png.

  3. Press ctrl-c to terminate the app.

Add HTML route​

  1. Make changes to the file index.js and a new route by adding the code below.
app.get("/html", (req, res) => {
  const htmlObject = ` 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="Simple HTML" />
    <title>Simple HTML</title>
  </head> 
  <body>
    <h1>Simple HTML</h1> 
  </body>
</html>`;

  res.send(htmlObject);
});

  1. Save the changes.

  2. On the terminal enter the command below and press enter.

node index.js

  1. Open your browser and enter the url: http://localhost:3000/html

  2. Take a screenshot and name it html.png.

  3. Press ctrl-c to terminate the app.

Using sakura.css and normalize.css​

  1. Open VSCode and create a folder named app.

  2. Download the files sakura.css and normalize.css to the app folder. Make sure to rename then to sakura.css and normalize.css.

  3. Copy hello-world.png, json.png, and html.png to the app folder.

  4. On the app folder create a file named: lab-1-2.html and copy the HTML code below.

<!-- 
Developer: 
Purpose: 
-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Update title -->
    <title></title>
    <!-- Reset styles using normalize -->
    <link rel="stylesheet" href="./normalize.css" />
    <!-- Classless css  -->
    <link rel="stylesheet" href="./sakura.css" />
  </head>
  <body>
    <!-- Enter the HTML codes to display the captured screen shots -->
  </body>
</html>
  1. For each screenshot implement the HTML codes to display a title, short description, and screenshot image.

Submission​

  1. Create a folder named submit.

  2. On the Express-App delete the node_modules folder.

  3. Copy the Express-App and app folders to the submit folder.

  4. Create a zip file of the submit folder.

  5. Navigate back to where the lab was originally downloaded, there should be a Submissions section (see below) where the zip file can be uploaded.

submission