Local Web Server Guide

Who this is for: Beginners and intermediate tech enthusiasts. Every step is explained clearly, and 💡 Why this matters callouts give you just enough context to understand what's happening under the hood — without going down a rabbit hole.

What Is a Local Web Server?

When you visit a website, your browser sends a request to a server — a program sitting somewhere on the internet that receives that request and sends back the files that make up the page. A local web server does the exact same thing, but runs entirely on your own computer instead of out on the open internet.

This means you can build, break, and test a website completely in private before anyone else ever sees it. Setting one up is one of the very first things web developers learn to do, and it is much simpler than it sounds.

You'll need a local web server when you want to preview your website exactly as a real browser would load it, or if you want to work on a project at a coffee shop without an internet connection. It is also essential if you are running code that actually requires a server environment to work correctly (like PHP), or if you simply want to test major changes safely before pushing them to your live, public website.

💡 Why can't I just open my HTML file directly in a browser? You can — for very simple pages! But the moment your project tries to load external files, uses certain modern JavaScript features, or involves a back-end language like PHP, simply double-clicking the file to open it will fail or behave weirdly. A local web server eliminates that gap entirely, forcing the browser to treat your local files exactly like a real website.

Choosing the Right Tool

Different projects have different needs, so there are a few common options. Pick the one that matches what you are building today:

If you just want the absolute fastest way to get a folder of files running as a website, use the Python HTTP Server. It serves any folder with a single command, requiring no extra setup beyond having Python installed. It is our favorite starting point for beginners.

If you are spending a lot of time writing HTML, CSS, or JavaScript, you should absolutely use the Live Server extension for VS Code. It launches a local server and magically refreshes your browser automatically every single time you save a file.

If you are building a project that uses PHP, including working on a custom WordPress theme, you will need XAMPP. It bundles a web server, PHP, and a MySQL database into one easy-to-install package.

Finally, tools like Node.js / Express let you build your own custom server using JavaScript, while nginx is a professional-grade server used in heavy-duty production environments. Both are worth learning eventually, but they are not the best starting points if you are just trying to view a simple website locally.

💡 Why so many options? Different projects speak different "languages." A basic HTML page just needs something to serve files. A WordPress site needs PHP to run and a database to talk to. A Node.js app expects JavaScript running on the server side. Each tool is built for a different job — you absolutely do not need to learn them all at once. Just pick the one that fits your project today.

Option 1: Python HTTP Server

The fastest way to get a folder of files running as a website. If Python is already installed, you're one command away.

Before You Start

You need Python 3 on your machine. Download it free from python.org if you don't have it yet.

💡 Why Python for this? Python includes a built-in web server module — nothing extra to install or configure. It's lightweight and works on every major operating system, making it the quickest way to spin up a local server for static files.

Steps

Step 1 — Open your terminal

The terminal is a text-based way to give your computer instructions. You'll only need two commands here.

• Mac: Press Cmd + Space, type Terminal, press Enter
• Windows: Press the Windows key, type Command Prompt or PowerShell, press Enter
• Linux: Press Ctrl + Alt + T

📸 [Screenshot: Terminal open and ready]

💡 What is the terminal, exactly? It's a direct line to your operating system. Instead of clicking buttons, you type short commands. Many developer tools are designed to be run this way — getting comfortable with the terminal early is one of the best investments you can make as a developer.

Step 2 — Navigate to your project folder

The server will serve files from whatever folder the terminal is currently looking at, so you need to point it at your project first.

cd /path/to/your/project

For example, if your project is in a folder called my-website inside Documents:

cd ~/Documents/my-website

💡 What does cd do? cd stands for change directory. It moves the terminal's focus into a specific folder — the same as double-clicking a folder in Finder or File Explorer. The ~ is a shortcut that means your home folder.

Step 3 — Start the server

python3 -m http.server 8080

You should see: Serving HTTP on 0.0.0.0 port 8080

📸 [Screenshot: Terminal showing "Serving HTTP on 0.0.0.0 port 8080"]

💡 Breaking down that command:

• python3 — tells your computer to use Python
• -m http.server — loads Python's built-in web server module
• 8080 — this is the port, which acts like a door number. Your computer has thousands of ports. Port 8080 is commonly used for local development because it's unlikely to conflict with anything else already running.

Step 4 — Open your browser

Visit: http://localhost:8080

Your site should now be visible.

💡 What is localhost? It's a special address that always means this computer. When you type it in the browser, you're telling it to connect to a server running on your own machine rather than out on the internet. The :8080 tells it which port to use.

Step 5 — Stop the server

When you're done, go back to the terminal and press Ctrl + C. This shuts the server down cleanly.

Option 2: Live Server (VS Code Extension)

The go-to for front-end development. Save a file, and your browser refreshes automatically — no manual reloading needed.

Before You Start

You need Visual Studio Code installed. It's free.

💡 What is VS Code? Visual Studio Code (VS Code) is a code editor — a program specifically designed for writing and managing code. It's free, built by Microsoft, and used by millions of developers worldwide. Unlike a basic text editor, it understands code: it highlights syntax, catches errors, and supports extensions that add powerful new features.

Steps

Step 1 — Install the Live Server extension

Extensions are add-ons that give VS Code new abilities. Live Server adds a built-in web server directly into your editor.

1. Open VS Code
2. Click the Extensions icon in the left sidebar (or press Ctrl+Shift+X)
3. Search for "Live Server" by Ritwick Dey
4. Click Install

📸 [Screenshot: VS Code Extensions panel with Live Server installed]

Step 2 — Open your project folder

Go to File → Open Folder and select your project directory.

💡 Why open the whole folder? VS Code works best when you open the entire project folder rather than individual files. This gives the editor full context of your project — it can understand how files relate to each other, which matters for extensions like Live Server to work correctly.

Step 3 — Launch Live Server

Right-click any .html file in the Explorer panel on the left and select "Open with Live Server". Alternatively, click the "Go Live" button in the bottom-right corner of the screen.

📸 [Screenshot: VS Code status bar with "Go Live" button]

Step 4 — Edit and see changes instantly

Your browser will open automatically at http://127.0.0.1:5500. From now on, every time you save a file, the browser refreshes on its own.

💡 Why 127.0.0.1 instead of localhost? They mean exactly the same thing. 127.0.0.1 is the numeric IP address that localhost points to — both refer to your own machine. Live Server just uses the numeric form by default.

Option 3: XAMPP (PHP + MySQL Stack)

For PHP-based projects — including WordPress, Laravel, or anything that needs a database.

Before You Start

Download XAMPP free from apachefriends.org.

💡 What is XAMPP and why is it different? Python's HTTP server can only serve static files — it has no idea what to do with PHP code. XAMPP solves this by bundling three things into one installer: Apache (a web server that can process PHP), MySQL (a database for storing data), and PHP itself. The name stands for Cross-platform, Apache, MariaDB, PHP, and Perl. For WordPress or any PHP project, XAMPP is the standard local setup.

Steps

Step 1 — Install XAMPP

Run the installer and follow the on-screen prompts. The default settings work for most users.

📸 [Screenshot: XAMPP installer welcome screen]

Step 2 — Start Apache and MySQL

1. Open the XAMPP Control Panel
2. Click Start next to Apache — this starts the web server
3. Click Start next to MySQL if your project uses a database

Both status indicators should turn green once running.

📸 [Screenshot: XAMPP Control Panel with Apache and MySQL running]

💡 What is Apache actually doing? Apache is the engine doing the real work. When your browser requests a PHP page, Apache intercepts that request, runs the PHP code, and sends the resulting HTML back to the browser. XAMPP's Control Panel is just a friendly dashboard to start and stop it — Apache is what makes PHP actually execute.

Step 3 — Place your project files

Copy your project folder into XAMPP's htdocs directory. Apache is configured to serve files from this folder by default.

• Windows: C:\xampp\htdocs\my-project
• Mac: /Applications/XAMPP/htdocs/my-project

💡 What is htdocs? Short for hypertext documents — it's the folder Apache looks in when it receives a browser request. Think of it as the front door of your local web server. Anything you place inside it becomes accessible in the browser.

Step 4 — View your site

Open a browser and go to: http://localhost/my-project

Troubleshooting

❌ "Port already in use" error

Another program is already using that port. Try switching to a different one:

python3 -m http.server 9090

Then visit http://localhost:9090 instead.

💡 Why do port conflicts happen? Every program that listens for connections needs to claim a port. If two programs try to use the same port, the second one gets blocked. Common culprits are Skype, other development servers, or a previous session you forgot to stop. Picking a different port sidesteps the problem immediately.

If you'd rather stop the conflicting program:

• Mac/Linux: lsof -i :8080 to find it, then kill -9 <PID> to stop it
• Windows: netstat -ano | findstr :8080 to find it, then taskkill /PID <PID> /F to stop it

❌ Browser shows "This site can't be reached"

• Make sure the server is still running — it stops the moment you close the terminal
• Check you're using http:// not https:// — local servers don't use encryption by default
• Confirm the port number in the URL matches what was printed when the server started

❌ XAMPP Apache won't start

Apache defaults to port 80, which is often already claimed by Skype or Windows IIS.

1. In XAMPP Control Panel, click Config → Apache (httpd.conf)
2. Find the line Listen 80 and change it to Listen 8080
3. Save the file and click Restart next to Apache

Then access your site at http://localhost:8080/my-project

❌ PHP files are downloading instead of running

This means your .php files are being served by a static server like Python's, which doesn't know how to execute PHP — it just sends the raw file to the browser. Switch to XAMPP for any project that includes .php files.

A Note on Security

⚠️ A local web server is only accessible on your own machine by default — nobody outside your computer can reach it. Never expose a local development server to the public internet without proper security configuration, and never use it in place of a real production server.

What to Explore Next

Once you're comfortable running a local server, these are natural next steps:

• Git and version control — track every change you make so you can experiment freely and roll back if something breaks
• ngrok — a free tool that temporarily shares your local server with the outside world, great for showing someone a project or testing on another device
• Docker — packages your entire development environment into a container so it runs identically on any machine
• Deploying your site — tools like Netlify, Vercel, and Railway make it simple to take a project from local to live

Last updated: February 2026