🚀 How to Preview Static Websites Locally Using npx serve

When building static websites with tools like Tailwind CSS, React, Vue, or even plain HTML/CSS, it’s often helpful to preview your site locally before deploying. That’s where npx serve comes in — a simple, zero-config command to serve your static files instantly!

🔧 What is npx serve?

npx serve runs the serve package, a lightweight static file server built by Vercel. It allows you to serve a directory containing static files (like HTML, CSS, and JavaScript) with a single command.

✅ Why use serve?

• Instant preview of your static website
• No configuration needed
• Great for testing Tailwind CSS builds or React/Vue projects
• Perfect for local development before deploying to production

📦 Step-by-Step Guide

1. Make sure Node.js is installed. If not, download it from nodejs.org.
2. Build your static files (for example, Tailwind CSS into public/ or dist/).
3. Run this command in your terminal:

   npx serve public

   Replace public with the path to your static files folder if different.

💡 Example

Let’s say you built your Tailwind CSS into public/build/tailwind.css and your HTML is in public/index.html. Run:

npx serve public

You’ll see output like this:

✔  Serving!
- Local:    http://localhost:3000
- Network:  http://192.168.1.4:3000

Now open http://localhost:3000 in your browser to see your static site!

📌 Notes

• You don’t need to install serve globally. npx takes care of that.
• You can still install it globally if you want faster startup next time:
  npm install -g serve

🎯 Conclusion

npx serve is the easiest way to preview any static project on your local machine. Whether you’re building with Tailwind CSS, vanilla HTML/CSS, or a JS framework, this tool is a must-have in your frontend toolbox.

Happy coding! 🚀