Let's be friends

Starting a local server

Last updated: November 25, 2024

When you’re first learning to build websites, it’s easy to think of the browser as all-powerful—it shows your HTML, runs your CSS, and makes your JavaScript work. But as soon as you try to do something like load a JSON file or make your site dynamic with PHP, you hit a wall. Suddenly, your code stops working, and it seems like the browser is saying “no.” This is because the browser operates with strict security rules (like CORS) that prevent it from grabbing files or data willy-nilly. It’s not magic—it’s for safety.

This is where servers come in. A server isn’t just for live websites on the internet—it’s also an essential tool for local development. Whether you’re learning JavaScript and need to fetch a JSON file, or experimenting with PHP templates for the first time, running a local server lets your browser access files and run code the way it would on a real website. It might sound intimidating, but it’s actually straightforward—and we’ll walk you through a few simple ways to get started.

MAMP (Mac) / WAMP (Windows)

If you’re working on a project with PHP and maybe even a database, MAMP (for Mac) or WAMP (for Windows) is an easy way to get everything set up. These tools give you a graphical interface to start your server, configure settings, and even manage databases like MySQL. This is our go-to option.

What it’s doing: It spins up an Apache web server (the thing that handles requests) and optionally a MySQL database if you need one.

How to use it:

  1. Download MAMP (for Mac) or WAMP (for Windows).
  2. Install the application and set the Document Root to your project folder (not the default htdocs or www).
  3. Start the server and open your browser. Go to http://localhost/ (or a custom port like :8888 if you’re using MAMP Free).

If you’re on Linux, you’ll be using LAMP, which is similar but requires a manual setup. There are plenty of guides online to help with that!

PHP Built-In Server

For PHP-only projects without a database—just partials, templates, and includes—the built-in PHP server is perfect. It’s super lightweight, doesn’t require extra tools, and gets the job done quickly. (This assumes you have PHP installed—if you don’t, use Homebrew or another package manager to install it.)

What it’s doing: It spins up a basic server that can process PHP files but doesn’t offer extras like a database.

How to use it:

  1. Open your terminal and navigate to your project folder.
  2. Run: php -S localhost:8000
  3. Replace 8000 with any unused port you want (just avoid ports below 1024).

Open your browser and go to http://localhost:8000. That’s it!

Node.js with http-server

If your project is focused on static files (HTML, CSS, JavaScript) or involves frontend work with APIs, Node.js’s http-server is a great choice. It’s quick to set up and perfect for JavaScript-heavy workflows.

What it’s doing: It spins up a static file server, which serves your files as-is without any server-side processing.

How to use it:

  1. Install Node.js from nodejs.org.
  2. Install http-server globally: 
    npm install -g http-server
  3. Navigate to your project folder and run: 
    http-server
  4. Open your browser and go to the URL it gives you (usually http://localhost:8080).

Python Built-In Server

If you’re working with static files and have Python installed, you can use its built-in server. It’s pre-installed on most systems, making it a quick and easy option for simple setups.

What it’s doing: It serves your static files (HTML, CSS, JavaScript) over HTTP but doesn’t process server-side languages like PHP.

How to use it:

  1. Open your terminal and navigate to your project folder.
  2. Run one of the following commands:
    • For Python 3: python -m http.server 8000
    • For Python 2: python -m SimpleHTTPServer 8000
  3. Open your browser and go to http://localhost:8000.

This is a great option for serving static files quickly, but it won’t handle anything dynamic like PHP or databases.

VS Code Live Server

If you use VS Code, the Live Server extension is a fast way to start a server. It’s great for static files but feels like a bit of a black box, so we don’t usually recommend it for beginners.

What it’s doing: It starts a lightweight HTTP server that automatically reloads your browser when you make changes.

How to use it:

  1. Install the Live Server extension in VS Code.
  2. Right-click your index.html file and choose Open with Live Server.
  3. It will open your project in the browser automatically.

While it’s convenient, it hides what’s actually happening behind the scenes, which might make it harder to understand how servers work.
Let's be friends