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 ExampleExample:
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.
Similar Reads
qs - NPM
qs is a popular npm package used for serializing JavaScript objects into query strings. It provides an easy way to handle query parameters in web applications by converting object data into a format that can be appended to URLs for HTTP requests. Prerequisites:Node.js and npm JavaScriptFeatures of n
2 min read
Angular ng serve
When Creating an Angular Application, it is very important to have a robust and efficient development environment. Angular CLI provides several commands to make the development process easy.One of the most used commands is ng serve. This command allows you to build and serve the application locally.
5 min read
Node.js Web Server
A NodeJS web server is a server built using NodeJS to handle HTTP requests and responses. Unlike traditional web servers like Apache or Nginx, which are primarily designed to give static content, NodeJS web servers can handle both static and dynamic content while supporting real-time communication.
6 min read
Next.js Custom Server
Next.js Custom Server allows advanced customization by overriding default behavior. It enables tailored server-side logic, middleware integration, and API route handling, offering flexibility beyond standard Next.js configurations.Next.js Custom ServerA custom server in Next.js is a Node.js script t
2 min read
How to Run Node Server?
A Node server runs JavaScript outside the browser to handle web requests. It listens for incoming requests, processes them, and sends responses. Unlike traditional servers, it handles multiple requests at once without waiting for each to finish.Some of the key features of the Node Server are:Non-Blo
3 min read
Server Actions in Next.js
Server actions in Next.js refer to the functionalities and processes that occur on the server side of a Next.js application. It enables efficient, secure handling of server-side operations like data fetching, form processing, and database interactions, enhancing application security and performance
4 min read
Minimal Web Server Using Netcat
Netcat is a networking utility that can be used to complete various tasks over TCP and UDP. It can be used to send TCP and UDP packets, also it can listen on the ports, specified for UDP and TCP. This utility is well-known for its versatility, as its application ranges from setting up simple chat se
7 min read
Serving a TensorFlow Model
TensorFlow Serving stands as a versatile and high-performance system tailored for serving machine learning models in production settings. Its primary objective is to simplify the deployment of novel algorithms and experiments while maintaining consistent server architecture and APIs. While it seamle
11 min read
How To Start Next.js Server?
Next.js is a React framework created by Vercel that helps developers build server-side rendered and static web applications. Starting a Next.js server is a simple process that allows you to see your application running in a local development environment or a production environment. PrerequisitesNode
2 min read
Node.js server.close() Method
The server.close() is an inbuilt application programming interface of class Socket within tls module which is used to stop the server from accepting the new client request. Syntax: const server.close() Parameters: This method does not accept any parameter. Return Value: This method return nothing bu
3 min read