COMP3322A Modern Technologies on World Wide Web NPM & Installation of Node.js Environment

Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

COMP3322A Modern Technologies on World Wide Web

NPM & Installation of Node.js Environment

Overview of NPM

Node Package Manager (NPM) is the default package manager for Node.js. It provides two main functionalities:

( 1) Provide online repository for Node.js packages/modules, making it easy for programmers to publish and share source code of Node.js libraries. NPM consists of a command line client that interacts with the registry.

(2)  Provide  command  line  utility  to  simplify  installation,  updating  and  uninstallation  of Node.js packages, as well as do version management and dependency management of Node.js packages.

NPM is automatically included when Node.js is installed.

More details about npm is at https://www.npmjs.com.

Install Node.js Environment

We can install the Node.js runtime environment using the following steps.

Step 1: Go to https://nodejs.org/en/ and download Node.js installation package ( 16. 17. 1 LTS is recommended for most users). Run the installer and install Node.js into a folder at your choice. If you are using Mac OS or Windows OS, you may just follow the auto-installation program and install Node.js to the default location. If you are using Linux or AIX, you can download the       binary       and       set       up       the       environment       following       this       guide: https://github.com/nodejs/help/wiki/Installation.

Step 2: Create a folder to hold your app; you can name the folder “test” . Open a terminal, change path to the “test” folder, and type in the following command to install the Express generator  (which  is  application  generator  tool  to  quickly  create  an  Express  application skeleton):

cd test

npx express-generator

If you are using Mac OS or Linux, you may need to add sudo before “npm”:

cd test

sudo npx express-generator

Then in the “test” folder, you will see that some files have been automatically created by the Express framework, in the following directory structure:

app.js

package.json

./bin

./public

./routes

./views

Here, app.js is the main app file. package.json is a JSON file describing the app and its dependencies. ./bin contains default project files. We can place static files to be served by the web app in ./public. We will introduce the folders ./routes and ./views in a later handout.

Step 3: In the “test” directory, use the following NPM command to install all the dependencies (modules) that the project needs as specified in package.json, as follows:

npm install

Once the  above  installation  is  done  (you  can  ignore  the  npm warnings),  you  should  see

a ./node  modules folder that contains these modules.

Step 4: Open app.js in a text editor and change its content to the following (the basic Express app example in the lecture slides):

var express = require('express');

var app = express();

app.get('/', function (req, res) {

res.send('Hello World');

})

var server = app.listen(8081, function () {

var host = server.address().address;

var port = server.address().port;

console.log("Example app listening at http://%s:%s", host, port);

})

Then you can start the Express app in the terminal by typing the following command in the “test” directory:


node app.js


The web server will then be up running at the given port (8081).

Step  5:  Launch  a  web  browser  and  check  out  the  web  page  at  http://127.0.0. 1:8081/  or http://localhost:8081/. You should see a page as shown in the following figure.

 

Run the Examples in Lecture Slides

We    have    provided    source    code    of   examples    from    the    set    of   lecture    slides 8_NODEJS_I_COMP3322A_f2022.pdf in nodejs_examples_1.zip. Please try them out using the Node.js  environment you  have just  installed,  to  acquire  a  good understanding  of the working of Node.js and Express.js.

Example 1: This is the simple Node.js web server app created by main.js. Go to example1 directory and run the server, as follows:

cd exampe1

node main js

Then the server is up running at port 8081 on your computer. Launch a browser and access the URL http://127.0.0. 1:8081 to check the page out.

Note: you should always use control+C to kill an already running server app before you start the server again after making modifications), when you run the following examples.

Example  2:  This  is the  Express.js web  server  app,  serving the  same  functionality  as the Node.js web server app in Example 1. You can reuse the Express project directory you created just now, i.e., “test” . Copy app.js in our given example2 folder to the “test” project directory, overwriting the previous app.js. Then in the project directory, run the app as follows:

node app js

Then the server is up running at port 8081 on your computer. Launch a browser and access the URL http://127.0.0. 1:8081/ to check the page out.

Example 3: This is the Express.js web server app to serve static files. Copy app.js in our given example3 folder to the “test” project directory, overwriting the previous app.js. Copy some static  files into the public directory,  e.g., copy puppy.jpg into public/images. Then in the project directory, run the app as follows:

node app js

Then the server is up running at port 8081 on your computer. Launch a browser and access the URL http://127.0.0. 1:8081/images/puppy.jpg to check the image out.

Example 4: This is the Express.js web server app to serve static files and handle form data sent  by  HTTP  GET  requests.  Copy  app.js  in  our  given  example4 folder  to  your project directory, overwriting the previous app.js, and copy login.html in our given example4 folder to the “public” folder of the project directory. Then in the project directory, run the app by command “node app.js” .

Then the server is up running at port 8081 on your computer. Launch a browser and access the URL http://127.0.0. 1:8081/login.html to check the page out, fill in the form and then click “Submit” to view the generated page.

Example 5: This is the Express.js web server app to serve static files and handle form data sent by HTTP POST requests. Copy app.js and login.html in our given example5 folder to your project directories, overwriting the previous app.js and login.html. Then in the project directory, run the app by command “node app.js” .

Then the server is up running at port 8081 on your computer. Launch a browser and access the

URL http://127.0.0. 1:8081/login.html to check the page out, fill in the form and then click “Submit” to see the generated page.

Example 6: This is the Express.js web server app with cookie management. Copy app.js in the given example6 folder to your project folder, overwriting the previous app.js. You can reuse the previous login.html. Then in the project directory, run the app by command “node app.js” .

Then the server is up running at port 8081 on your computer. Launch a browser and access the

URL http://127.0.0. 1:8081/ . Fill in the login form (with username and password listed in lines 5-6 of app.js); after successful login, try loading the page of http://127.0.0. 1:8081/ again to see that the same after-login page is displayed; click “log out” and see the login form again.

Example 7: This is the Express.js web server app with session management. Copy app.js in our  given  example7  folder  to  your  project  folder,  overwriting  the  previous  app.js.  Keep login.html from Example 6 in the “public” folder.                                                                           The  "express-session"  module  has  not  been  installed  in  your  project  directory,  since  its dependency is not specified in the default package.json. Run the following command to install the module:


npm install express-session


Then in the project directory, run the app by command “node app.js” . The server is up running at port 8081 on your computer. Launch a browser and access the URL http://127.0.0. 1:8081/  to check the pages out. You should see similar web pages as in Example 6, except that session is used instead of cookie for managing user states.


2022-12-11