This session will build a strong foundation in handling HTTP POST and GET requests, working with form data, and understanding the importance of routes in an Express.js application. Students will gain hands-on experience through practical examples and exercises, preparing them for more advanced topics in server-side development.
The background of node (the server-side wrapper for JavaScript), NPMjs.com, and NPM Application Development.
Node.js: A C++ Wrapper around the Chromium JavaScript Interpreter
Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to execute JavaScript code outside of a web browser. It is built on the V8 JavaScript engine, which is developed by Google and used in the Chrome browser.
Node.js provides a runtime environment for executing JavaScript code on the server-side, enabling developers to build scalable and high-performance applications.
At its core, Node.js is a C++ wrapper around the V8 JavaScript engine. The V8 engine is written in C++ and is responsible for executing JavaScript code efficiently. It compiles JavaScript code into machine code, rather than interpreting it as bytecode, which results in faster execution. Node.js leverages the capabilities of the V8 engine to provide a powerful and efficient runtime environment for JavaScript.
The V8 engine itself is designed to be embedded into C++ applications, and Node.js takes advantage of this by providing a C++ wrapper around the V8 engine. This allows developers to interact with the V8 engine and execute JavaScript code from their C++ applications. Node.js provides a set of C++ APIs that enable developers to work with JavaScript objects, handle memory allocation, and interact with the event loop.
The C++ wrapper provided by Node.js allows developers to extend the functionality of JavaScript by writing native C++ modules. These modules can be used to perform computationally intensive tasks, access system resources, interact with databases, and more. By combining the power of JavaScript with the flexibility and performance of C++, developers can build robust and efficient applications using Node.js.
The Browser Object Model (BOM) and the Console Object Model (COM)
In the context of JavaScript, the Browser Object Model (BOM) refers to the set of APIs provided by web browsers that allow JavaScript code to interact with the browser window, document, and other browser-specific features. The BOM provides methods and properties to manipulate the browser's history, handle user input, modify the DOM, and perform other browser-related tasks.
On the other hand, the Console Object Model (COM) refers to the set of APIs provided by Node.js for interacting with the command-line environment. The COM allows JavaScript code running in a server command-line process to access system resources, read and write files, handle network requests, and perform other server-side tasks.
While the BOM and COM serve similar purposes of providing APIs for JavaScript code to interact with the environment, they are specific to their respective contexts. The BOM is available in web browsers, while the COM is available in the Node.js runtime environment.
Visual Studio Code and the Electron Package
Visual Studio Code, a popular code editor developed by Microsoft, is an example of an application that was built using the Electron package from npm. Electron is a framework that allows developers to build cross-platform desktop applications using web technologies such as JavaScript, HTML, and CSS.
Electron leverages the power of the Chromium browser, which includes the V8 JavaScript engine, to provide a runtime environment for running web applications as desktop applications. It combines the capabilities of Node.js and Chromium to enable developers to build desktop applications using familiar web technologies.
The Electron package, available on npm, provides the necessary tools and APIs for building Electron applications. It allows developers to create application windows, handle user interactions, access system resources, and package the application for distribution on different operating systems.
By utilizing the Electron package, the Visual Studio Code team was able to leverage their web development skills and build a powerful, cross-platform code editor. The Electron framework, with its integration of Node.js and the Chromium JavaScript interpreter, provides the necessary foundation for running web applications as desktop applications.
In conclusion, Node.js is a C++ wrapper around the Chromium JavaScript interpreter, allowing developers to execute JavaScript code on the server-side.
The Browser Object Model (BOM) provides APIs for JavaScript code to interact with web browsers.
The Console Object Model (COM) provides APIs for JavaScript code to interact with the command-line environment in Node.js.
Visual Studio Code is an example of an application built using the Electron package, which combines Node.js and Chromium to enable the development of cross-platform desktop applications.
The npm Registry, hosted on npmjs.com, is a public collection of packages of open-source code for Node.js, front-end web apps, mobile apps, robots, routers, and other needs of the JavaScript community.
We will be getting our Node packages such as express.js from NPMJS.com.
You will use npm install at the command line to install these packages into your node_modules local repository.
Handin Activities for your Lab Work Submission:
Lab exercises to learn how to set up various formats of NPM Web Applications
Note: In Visual Studio Code, the Project is the Directory.
Start by making a new directory and then running npm init to create package.json
Basic Terminal Shell Commands for Working with Node.js and npm
Welcome to today's lecture on the basic terminal shell commands necessary for working with Node.js and npm. This session will cover the fundamental commands you need to create and manage Node.js projects efficiently.
#### 1. **Navigating the File System**
Understanding how to navigate the file system is crucial when working with Node.js projects. Here are some basic commands:
- **`mkdir`**: Creates a new directory.
```bash
mkdir projectdirectory
```
- **`cd`**: Changes the current directory.
```bash
cd projectdirectory
```
- **`dir` (Windows) / `ls` (Unix/Linux/MacOS)**: Lists the contents of a directory.
```bash
dir
```
#### 2. **Setting Up a Node.js Project**
Once you have navigated to your project directory, the next step is to set up your Node.js project.
- **`npm init`**: Initializes a new Node.js project and creates a `package.json` file.
```bash
npm init
```
During the initialization process, you will be prompted to provide information about your project, such as the name, version, description, entry point, test command, git repository, keywords, author, and license. You can press `Enter` to accept the default values or type your own.
#### 3. **Installing npm Packages**
To add functionality to your Node.js project, you'll need to install npm packages.
- **`npm install <package-name>`**: Installs a package and adds it to your `package.json` file.
```bash
npm install express
```
- **`npm install`**: Installs all dependencies listed in the `package.json` file.
```bash
npm install
```
#### 4. **Running Your Node.js Application**
To run your Node.js application, you typically use the `node` command followed by the entry point of your application.
If you've specified a different entry point in your `package.json` file, use that file name instead of `server.js`.
#### 5. **Managing npm Packages**
As you work on your project, you might need to update or uninstall packages.
- **`npm update`**: Updates all packages to their latest version based on the version ranges specified in `package.json`.
```bash
npm update
```
- **`npm uninstall <package-name>`**: Uninstalls a package and removes it from `package.json`.
```bash
npm uninstall express
```
#### 6. **Viewing npm Package Information**
Sometimes, you need to view detailed information about installed packages or those you intend to install.
- **`npm list`**: Lists installed packages in the current project.
```bash
npm list
```
- **`npm info <package-name>`**: Shows detailed information about a package.
```bash
npm info express
```
#### 7. **Working with Package Scripts**
You can define custom scripts in your `package.json` file to automate tasks. These scripts can be run using the `npm run` command.
- **Adding a Script**: In your `package.json`, you can define scripts under the "scripts" section.
```json
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
```
- **Running a Script**: Use the `npm run` command followed by the script name.
```bash
npm run start
```
#### 8. **Commonly Used npm Commands**
Here are some additional npm commands that are frequently used:
- **`npm init -y`**: Initializes a new project with default values.
```bash
npm init -y
```
Understanding these basic terminal shell commands is essential for working effectively with Node.js and npm. Here’s a quick recap:
- Navigate and manage directories (`mkdir`, `cd`, `dir`/`ls`).
- Initialize and manage Node.js projects (`npm init`, `npm install`).
- Run applications (`node <file-name>`).
- Manage npm packages (`npm update`, `npm uninstall`).
- View package information (`npm list`, `npm info`).
- Work with package scripts (`npm run <script>`).
By mastering these commands, you'll be well-equipped to handle the setup, development, and management of your Node.js projects.
First of 5 Activity Evolutions for Lab 1 Hand In:
Setting up routes in the Express.js webserver:
Prerequisites:
Setting up and operating an Express JS Web Server.
Step 1: Make a VSC Project.
In this lab, you'll learn how to set up an Express.js server, handle GET and POST requests, and send data to the server using URL route parameters and HTML forms.
We will also learn how to use Postman to test your endpoints.
Prerequisites
Node.js and npm installed on your computer.
Basic knowledge of JavaScript and HTML.
Text editor or IDE (e.g., VS Code).
Setup
Step 1: Initialize a New Node.js Project
Create a new directory for your project and navigate into it:
mkdir express-lab
cd express-lab
Initialize a new Node.js project: To initialize your project with a Package.json file.
npm init -y
Step 2: Install Express.js
Install the Express.js package:
npm install express
Step 3: Set Up the Express.js Server
Create a file named server.js in your project directory.
Open server.js in your text editor and add the following code to set up a basic Express.js server:
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json()); // Middleware to parse JSON bodies
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Run your server:
nodemon server.js
Open your browser and go to http://localhost:3000. You should see "Hello, World!".
DONE
Now amp up the code so that it reports on the number of hits to each route output to a table on the html page
To display the number of hits to each route in a table on the HTML page, we'll need to modify our server to send an HTML response that includes a table. We'll generate this HTML dynamically based on the hit counters.
Here's the updated code:
const express = require('express');
const app = express();
const port = 3000;
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (