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