Running a Simple Web Server for Development

At some point, you will need to run some sort of local web server either to test or to develop your code.

If you need a more serious server, as you would when developing with PHP and a database, you should just install XAMPP, MAMP or one of the other packages available.

If you don’t need something so serious, there are some simpler solutions.

Why Use a Web Server?

In principle, if you developing in HTML, CSS or JavaScript, you don’t need a web server at all, since all the files can be loaded locally. However, there are two important reasons to consider using a web server anyway.

Development without a web server can cause some problems:

If you use absolute paths, such as /images/photo.jpg, the browser will get the wrong idea of where to look. That’s because it thinks the / at the beginning means the beginning of your disk, not the beginning of your web folder.
It’s getting increasingly difficult to get JavaScript to work when loaded locally. This is because the browser treats local JavaScript files with suspicion.

As regards JavaScript, this can be a real problem. Technically files loaded locally use the file:// protocol. However, browsers see each individual file as from a separate source, so you will get you JavaScript files being blocked as “cross-origin”.

You can work around this if you need to:

In Firefox, you can change an advanced setting:
- In the URL, enter: about:config
- Change privacy.file_unique_origin to false
For Chrome, you will have to start the application with an additional option:
- … --allow-file-access-from-files
You can create a shortcut by copying the original shortcut and appending --allow-file-access-from-files to the target.

This still won’t solve the problem of the paths.

Using Your Existing Web Server

If you have already installed XAMPP or another web server package, then your problem is solved, and all you need to make sure your current project folder is being server.

However, that’s not always convenient or easy.

Live Server

If you code with the Atom Text Editor, you can install a simple package called atom-live-server. When launched, it will serve the current folder, and you can access it on the browser using something like localhost:3000, or whatever the port number is.

Visual Studio Code also has a Live Server available.

Using PHP or Python

If you have PHP installed, you probably also have a web server installed. However, you can create another miniature web server for your project folder from the shell or command line using something like this:

cd …                    #   project folder
php -S localhost:8000   #   Start Server

You don’t need need to change to the project folder if you use the -t option:

php -S localhost:8000 -t …  #   Start Server for Project Folder

You can get more details at https://www.php.net/manual/en/features.commandline.webserver.php.

If you have Python installed, you can use:

cd …                        #   project folder
python -m http.server 8000  #   Start Server

Again you can specify the directory:

python -m http.server 8000   --directory … # Start Server for Project Folder

You can get more details as https://docs.python.org/3/library/http.server.html

Using a Very Light Duty Web Sever

In the past there have been a few light duty web servers which were ideal for the task. Unfortunately, they appear to have retired.

However, you can get a new Micro Web Server at https://github.com/manngo/micro-web-server. It is based on the Python web server above.

To get the web server, go to https://github.com/manngo/micro-web-server/releases/latest and select one (or more) of:

macOS Command Line: MicroWebServerCLI
macOS Application: MicroWebServerGUI.zip — unzip for MicroWebServerGUI.app
Windows Command Line: MicroWebServerCLI.exe
Windows Application: MicroWebServerGUI.exe

It doesn’t do PHP, and it doesn’t do database. However, it will certainly server your static web files such as HTML, CSS, JavaScript and images. It’s still in development, but it should do the job nicely for now.