NPM Serve - Coding

The command npm serve is not a built-in part of npm. In reality, it is just another way of calling the package serve that can be found on npm.

Serve is used for quickly setting up local servers to host static web projects that are in development. Basically, it turns the current working directory into a virtual server where you can open HTML, CSS, JavaScript files and other static assets in a browser.

Prerequisites:

Installation

There are two ways to install serve:

Global installation: This lets you use serve from any directory in your terminal. Just run the following command:

npm install --global serve

Local installation (project-specific): For the sake of keeping dependencies localized, only install serve in your project’s folder. For this open your terminal and navigate to the root directory of your project:

npm install serve

After the installation the development server can be initiated by running serve in the project directory, the directory where the HTML file located. Normally, serve uses port 5000 as default but to verify this you can check either the output or browser address bar.

Specifying a Directory:

You can designate the directory that will be served if your HTML file is located inside a subdirectory of your project-

serve my-folder/

Features of npm serve

Easy setup: npm install -g serve is all you need to do before serving your files
Customizable port: When you are working with multiple projects simultaneously then you can assign a unique custom port number to each one.
Zero-configuration: npm serve does not requires configuration files. It will use your current working directory as the static file root, you can also provide a path to another folder if needed.
HTTPS support: It even has SSL/TLS support built-in, so you can do everything over an encrypted tunnel (self-signed certificates are supported).

Example

In this example we will see the basic usage of serve.

Step 1: Create an HTML file named index.html in your project directory with some content, for example-

Folder Example

Example:

HTML

<!--index.html-->

<!DOCTYPE html>
<html>

<head>
    <title>My Local Project</title>
</head>

<body>
    <h1>Hello from my local server!</h1>
</body>

</html>

Step 2: Install serve only within your project’s directory

npm install serve

Step 3: Open your terminal in the project directory and run-

serve

Output:

Note: If you see this kind of error in terminal

For security reasons, PowerShell scripting is not allowed on your system this is what mean by this error message.

Steps to enable script execution on your system (Recommended for Personal Use)

Step 1: Open PowerShell as Administrator:

Search Windows Powershell, right click on it and choose to open Windows Powershell with run as administrator.

Since we are changing security setting so we need to run it as administrator.

Step 2: Set the Execution Policy:

Type the following command and press Enter:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

It sets the execution policy so that remote signed scripts (those with a digital signature from a trusted publisher) can run without being blocked. For confirmation if ask press Y and hit enter.

Step 3: Test npm serve Again:

Close any regular PowerShell windows (the ones not running as administrators), then open a new one.

Try running npm serve again – if it is signed, it should now work.

Reffered: https://www.geeksforgeeks.org

Node.js

Related
NPM Bootstrap
How to Use Node.js for Backend Web Development in 2024?
NPM Version
Remove NPM - npm uninstall
How to Clear the NPM Cache on Linux, macOS, and Windows ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17