Last Updated : 14 May, 2024
Summarize
Comments
Improve
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 serveLocal 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 serveAfter 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:
<!--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 CurrentUserIt 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.
Improve
