Apps Artificial Intelligence CSS DevOps Go JavaScript Laravel Linux MongoDB MySQL PHP Python Rust Svelte Vue

Create a Simple Static Web Server with `http-server`

1 min read .
Updated on
Create a Simple Static Web Server with `http-server`

When you need to test static HTML, CSS, JavaScript, images, or a generated site locally, the Node.js package http-server provides a small command-line server with minimal setup.

Run It Without a Global Install

If Node.js and npm are already installed, you can run the package with npx:

npx http-server .

The final . means “serve the current directory.” The command prints the local addresses and port it is using.

A global installation also works:

npm install -g http-server
http-server .

Using npx avoids requiring a machine-wide package installation for occasional use.

Choose a Port

npx http-server . -p 3000

Open the Browser Automatically

npx http-server . -o

Enable CORS Headers

For development scenarios that intentionally require cross-origin access:

npx http-server . --cors

Do not enable permissive CORS automatically in production; configure origins according to your application’s security requirements.

Disable or Adjust Caching During Development

http-server supports cache-related options. Check the installed version’s help for the exact flags:

npx http-server --help

This is preferable to relying on remembered flags because CLI options can evolve between versions.

Development Tool, Not a Production Architecture

http-server is convenient for local static-file testing and simple internal previews. A production deployment normally needs deliberate TLS, caching, compression, headers, logging, access controls, monitoring, and deployment practices supplied by a production web server or hosting platform.

Conclusion

Use http-server when you need a quick local HTTP origin instead of opening files directly from disk. npx http-server . is enough for most temporary development workflows, with optional flags for ports, browser opening, and CORS.

JavaScript

Related Posts

Understanding the Differences Between pnpm, Yarn, npm, and Bun
Updated on
Understanding the Differences Between pnpm, Yarn, npm, and Bun
JavaScript projects commonly use npm, Yarn, pnpm, or Bun to install dependencies and run package scripts. They all work with the npm package ecosystem, but they differ in installation strategy, lockfiles, workspace tooling, runtime integration, and compatibility details. npm npm ships with Node.js and is the most universal default. It supports lockfiles, workspaces, package scripts, and the standard npm registry with minimal setup. Copy npm install npm run build Choose npm when you want the conventional Node.js toolchain and broad compatibility without adding another package manager.
JavaScript
Split a JavaScript Array into Chunks
Updated on
Split a JavaScript Array into Chunks
JavaScript does not have a built-in chunk method for splitting an array into equally sized groups, but the operation is easy to implement with slice. Chunking is useful for UI grids, pagination helpers, batching API operations, and processing large collections in smaller units. A Simple chunk Function Copy function chunk(array, size) { if (!Number.isInteger(size) || size <= 0) { throw new RangeError('size must be a positive integer'); } const result = []; for (let i = 0; i < array.length; i += size) { result.push(array.slice(i, i + size)); } return result; } Use it like this:
JavaScript Array
Convert Text to Title Case in JavaScript
Updated on
Convert Text to Title Case in JavaScript
A simple title-case helper can make labels, headings, and generated display text easier to read. Basic Helper Copy function titleCase(text) { return text .toLowerCase() .split(/\s+/) .filter(Boolean) .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); } Examples: Copy console.log(titleCase('hello world')); // Hello World console.log(titleCase('javascript is awesome')); // Javascript Is Awesome console.log(titleCase(' extra spaces ')); // Extra Spaces What This Function Does Converts the input to lowercase. Splits it into words on whitespace. Capitalizes the first character of each word. Joins the words with a single space. Title Case Is Language-Dependent Real editorial title case can be more complicated. Rules may keep short words such as “and”, “of”, or “the” lowercase, preserve acronyms, or follow language-specific capitalization conventions.
JavaScript
Truncate Text to a Maximum Length in JavaScript
Updated on
Truncate Text to a Maximum Length in JavaScript
User interfaces often need a shortened preview of longer text. A small helper can truncate a string to a maximum length and append an ellipsis when necessary. Copy function limitText(text, limit) { if (typeof text !== 'string') return ''; if (!Number.isInteger(limit) || limit < 0) { throw new RangeError('limit must be a non-negative integer'); } if (text.length <= limit) return text; return `${text.slice(0, limit)}...`; } Examples:
JavaScript
Extract a YouTube Video ID from a URL with JavaScript
Updated on
Extract a YouTube Video ID from a URL with JavaScript
YouTube links appear in several common formats, including youtube.com/watch?v=..., youtu.be/..., Shorts URLs, and embed URLs. A small JavaScript helper can normalize those formats and return the video ID. Use the URL API Copy function getYouTubeVideoId(input) { const url = new URL(input); if (url.hostname === 'youtu.be') { return url.pathname.slice(1).split('/')[0] || null; } if (url.hostname.endsWith('youtube.com')) { if (url.pathname === '/watch') { return url.searchParams.get('v'); } const match = url.pathname.match(/^\/(?:embed|shorts|live)\/([^/?]+)/); return match?.[1] ?? null; } return null; } Examples Copy console.log(getYouTubeVideoId('https://www.youtube.com/watch?v=QOM0xWASUwE')); console.log(getYouTubeVideoId('https://youtu.be/QOM0xWASUwE')); console.log(getYouTubeVideoId('https://www.youtube.com/embed/QOM0xWASUwE')); console.log(getYouTubeVideoId('https://www.youtube.com/shorts/QOM0xWASUwE')); Each returns:
JavaScript
Remove Duplicates from JavaScript Arrays
Updated on
Remove Duplicates from JavaScript Arrays
Removing duplicates depends on what “duplicate” means for your data. Primitive values, objects with unique IDs, and records compared by several properties need different strategies. Primitive Values with Set Copy const values = [1, 2, 3, 2, 4, 3]; const unique = [...new Set(values)]; console.log(unique); // [1, 2, 3, 4] Keep the First Object for Each ID Copy const items = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Alice again' }, ]; const seen = new Set(); const unique = items.filter((item) => { if (seen.has(item.id)) return false; seen.add(item.id); return true; }); Keep the Last Object for Each ID A Map naturally overwrites earlier values for the same key:
JavaScript Array
chevron-up