Localhost dev server
My own little fake internet
November 26, 2018 — November 4, 2024
I am building some HTML pages. I can do some things with HTML files on my hard disk, although these are locked down for security reasons. So I run a local server to serve those files and have my browser treat them like part of the real internet.
Usually for local testing, serving the files unencrypted (plain HTTP) is enough; sometimes for weird edge-case reasons I need encryption (keywords: HTTPS/SSL/TLS) which is a whole ’nother thing.
1 One-liners
There is a sport of writing HTTP server one-liners, and a mini site for them. Here are some strategic selections cribbed from those and other places, with twists for my own needs.
1.1 bareback
Bareback feature-free HTTP with netcat:
1.2 python
This is reasonably simple and serves static files with little fuss.
For bonus points, there is a brutal hack to make that auto-reload.
Python has a deep web server ecosystem; for example we can build whole web apps using flask, even asynchronous ones like sanic or pallets/quart.
2 VS Code
Live Preview runs a sophisticated integrated server inside VS code.
Live Server is an even fancier 3rd-party one that does more things, but does not fit my workflow.
3 livereload
… is a tool that provides hot-reloading for HTML, CSS, and JS, running completely in the browser, eliminating the need for complex build tooling and Node.js command line. When you save your files on your local machine they are auto-reloaded in the browser and you will see the change straight away.
It’s great for building simple web pages and apps with HTML, JavaScript, and CSS. It runs 100% client side in your browser and all files stay on your local machine. Works great with editors like VS Code, IntelliJ, Nodepad++, Vim, PyCharm, Sublime Text, and others. Simply drag and drop your web project folder here to get started.
4 Caddy
Caddy is a free and open-source server, and that will get you a long way. It has automatic SSL.
It supports plugins for totally OTT features, although none of them are particularly relevant to my needs, at least not enough to justify the complexity and security risk.
I can see that the running arbitrary code one might be fun.
5 npm servers
npm supports the node.js ecosystem, which is a web-native thing. One imagines it might be good at web servers.
For node browser apps, e.g. beefy and run-browser and their ilk might work and probably integrate with your build process. There are so many different options for node that I usually pass over it in choice-paralyzed silence. However, some of them that seem to offer a compelling value proposition.
5.1 browser-sync
If we are going to use the horrible npm ecosystem, we might as well use it to its full potential. A fancy web server is
5.2 Fenix
Fenix is a GUI wrapped around a node-style server that promises advanced debugging/introspection features. But I haven’t used it and it doesn’t run on Linux, so ignoring for now.
5.3 netlify dev
For netlify users in particular there is the netlify dev server
It has many features including draft deployments and ssh tunnel configuration for private preview.
5.4 site.js
Site.js is an indyweb-focused entrant. Special feature: claims to be able to deploy to a VPS-compatible self-rebooting, secure server mode within the same command.
One person. Develop and test on your own device.
One server. Sync and deploy to your own VPS.
One site. Host your own site at your own domain
curl -s https://sitejs.org/install | bash
mkdir hello-world
cd hello-world
echo 'Hello, world' > index.html
siteBonus feature: integrates hugo natively.
6 R
As mentioned at R HTML slides, if we are running R anyway, it may as well serve the files. I use the following CLI script, which has a couple of useful features such as auto-watching for file changes.
#!/usr/bin/env Rscript
library(servr)
port=4000
cmdArgs = commandArgs(trailingOnly = TRUE)
if (length(cmdArgs>0)){
port = strtoi(cmdArgs[1])
}
servr::httw(port=port)
browseURL(paste("http://127.0.0.1:", port, sep=""))I save it in serve.R and execute it as
7 Oh wait but I need encryption
Crap. I understand, but this is tricky in general. Perhaps you don’t truly need SSL? Most SSL-secured things are also available without SSL on localhost domain. Failing that, Caddy is probably easiest, or site.js. See bonus tips under secure servers.
8 Bonus time: tunnelling
ngrok is a service that allows you to inspect and replay web service requests from the internet to a local server for analysis.
9 Special case: woof
Woof transfers one file then quits.