README.md 57.9 KB
Newer Older
Aral Balkan's avatar
Aral Balkan committed
1
# Site.js
2
## Small web construction set.
Aral Balkan's avatar
Aral Balkan committed
3

4
[![Person lying on the ground, working on a laptop with the Site.js logo on screen](images/person.svg)](https://sitejs.org)
5

6
## Develop, test, sync, and deploy (using a single tool that comes in a single binary).
Aral Balkan's avatar
Aral Balkan committed
7

8
__Site.js is a [small](https://small-tech.org/about#small-technology) personal web tool for Linux, macOS, and Windows 10.__
Aral Balkan's avatar
Aral Balkan committed
9

10
Most tools today are built for startups and enterprises. Site.js is built for people.
Aral Balkan's avatar
Aral Balkan committed
11

12 13 14 15 16 17
## Like this? Fund us!

[Small Technology Foundation](https://small-tech.org) is a tiny, independent not-for-profit.

We exist in part thanks to patronage by people like you. If you share [our vision](https://small-tech.org/about/#small-technology) and want to support our work, please [become a patron or donate to us](https://small-tech.org/fund-us) today and help us continue to exist.

18
## Feature Highlights
Aral Balkan's avatar
Aral Balkan committed
19

20
  - __Just works.__ No configuration; [get started in seconds](https://sitejs.org/#get-started).
Aral Balkan's avatar
Aral Balkan committed
21

22
  - __Free as in freedom.__ And small as in [small tech](https://small-tech.org/about/#small-technology).
Aral Balkan's avatar
Aral Balkan committed
23

24
  - __Seamless single binary [install](#install)__ (thanks to [Nexe](https://github.com/nexe/nexe)).
Aral Balkan's avatar
Aral Balkan committed
25

26
  - __Secure by default.__
Aral Balkan's avatar
Aral Balkan committed
27

28
    __At localhost:__ Automatically provisions locally-trusted TLS for development (courtesy of [mkcert](https://github.com/FiloSottile/mkcert) seamlessly integrated via [Auto Encrypt Localhost](https://source.small-tech.org/site.js/lib/auto-encrypt-localhost)).
Aral Balkan's avatar
Aral Balkan committed
29

30
    __And everywhere else:__ Automatically provisions globally-trusted TLS for staging and production (courtesy of [Let’s Encrypt](https://letsencrypt.org/) seamlessly integrated via [Auto Encrypt](https://source.small-tech.org/site.js/lib/auto-encrypt) and [systemd](https://freedesktop.org/wiki/Software/systemd/)).
Aral Balkan's avatar
Aral Balkan committed
31

32
    Your server will score an A+ on the [SSL Labs SSL Server Test](https://www.ssllabs.com/ssltest).
Aral Balkan's avatar
Aral Balkan committed
33

34
  - __Supports the creation of static web sites, dynamic web sites, and hybrid sites__ (via integrated [Node.js](https://nodejs.org/) and [Express](https://expressjs.com)).
Aral Balkan's avatar
Aral Balkan committed
35

36
  - __Supports [DotJS](#dotjs) for dynamic routes.__ (DotJS is PHP-like simple routing for Node.js introduced by Site.js for quickly prototyping and building dynamic sites).
Aral Balkan's avatar
Aral Balkan committed
37

38
  - __Includes [Hugo static site generator](#static-site-generation).__
39

Aral Balkan's avatar
Aral Balkan committed
40
  - __[Sync](https://github.com/small-tech/site.js#sync) to deploy__ (uses rsync for quick deployments). Can also [Live Sync](https://github.com/small-tech/site.js#deployment-live-and-one-time-sync) for live blogging, etc.
Aral Balkan's avatar
Aral Balkan committed
41

42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
  - __Has privacy-respecting [ephemeral statics](#ephemeral-statistics)__. Gives you insight into how your site is being used, not into the people using it.

  - __Supports [WebSockets](#websocket-wss-routes)__ (via integrated [express-ws](https://github.com/HenningM/express-ws), which itself wraps [ws](https://github.com/websockets/ws)).

  - __Can be used as a proxy server__ (via integrated [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)).

  - __Supports [an evergreen web](#native-support-for-an-evergreen-web).__

    [The archival cascade](#the-archival-cascade) and [Native 404 → 302 support](#native-404--302-support) help you migrate and evolve your existing sites using Site.js without breaking existing links.

  - __Live reload__ on static pages.

  - __Automatic server reload__ when the source code of your dynamic routes change.

  - __Auto updates__ of production servers.
57 58

  <ins>Note:</ins> Production use via startup daemon is only supported on Linux distributions with systemd.
Aral Balkan's avatar
Aral Balkan committed
59

60
## Install
Aral Balkan's avatar
Aral Balkan committed
61

Aral Balkan's avatar
Aral Balkan committed
62 63
Copy and paste the following commands into your terminal:

64
### Native binaries
Aral Balkan's avatar
Aral Balkan committed
65

66
__Before you pipe any script into your computer, always view the source code ([Linux and macOS](https://should-i-pipe.it/https://sitejs.org/install), [Windows](https://should-i-pipe.it/https://sitejs.org/install.txt)) and make sure you understand what it does.__
67 68

#### Linux
Aral Balkan's avatar
Aral Balkan committed
69

70
```shell
Aral Balkan's avatar
Aral Balkan committed
71
wget -qO- https://sitejs.org/install | bash
Aral Balkan's avatar
Aral Balkan committed
72 73
```

74 75
(To use curl instead, see the macOS instructions, below.)

76 77 78 79 80 81
#### macOS

```shell
curl -s https://sitejs.org/install | bash
```

Aral Balkan's avatar
Aral Balkan committed
82
#### Windows 10 with PowerShell running under Windows Terminal
83 84

```shell
85
iex(iwr -UseBasicParsing https://sitejs.org/install.txt).Content
86 87
```

Aral Balkan's avatar
Aral Balkan committed
88 89
### Node.js

90
```shell
Aral Balkan's avatar
Aral Balkan committed
91
npm i -g @small-tech/site.js
Aral Balkan's avatar
Aral Balkan committed
92 93
```

94 95
### Alpha and Beta channels

96 97
__Note:__ This is a new feature. There have not been any alpha or beta releases yet. The commands below will not work until there are (at which point, this message will removed).

98 99 100 101 102 103 104 105 106 107 108 109
On Linux and macOS, addition to the release build channel, there is also an alpha build and beta build channel available. Pass either `alpha` or `beta` as an argument to the Bash pipe to install the latest build from the respective channel.

For example, to install the latest beta build on Linux:

```shell
wget -qO- https://sitejs.org/install | bash -s -- beta
```

Alpha builds are strictly for local testing and should not, under any circumstances, be used in production. We do not test Alpha builds in production.

Servers deployed using release builds check for updates every six hours whereas beta builds check every 10 minutes.

110 111 112 113
## System Requirements

### Linux

114
Any recent Linux distribution should work. However, Site.js is most thoroughly tested at Small Technology Foundation on Ubuntu 20.04/Pop!_OS 20.04 (development and staging) and Ubuntu 18.04 LTS (production).
115 116

There are builds available for x64 and ARM.
117

118
ARM builds currently only tested and supported on Raspberry Pi Zero W, 3B+, and 4B (armv6l and armv7l). If you are successfully running Site.js on other ARM architectures, please [let us know by opening an issue with the details](https://github.com/small-tech/site.js/issues) and we’ll update the documentation accordingly.
119

120
For production use, [systemd](https://en.wikipedia.org/wiki/Systemd) is required.
121 122 123

### macOS

124
macOS 10.14.x Mojave and macOS 10.15.x Catalina are supported (the latter as of Site.js 12.5.1).
125 126 127 128 129 130 131 132 133 134 135

_Production use is not possible under macOS._

### Windows 10

The current version of Windows 10 is supported with PowerShell running under [Windows Terminal](https://github.com/Microsoft/Terminal).

__Windows Subsystem for Linux is _not_ supported.__

_Production use is not possible under Windows._

136 137
## Dependencies

138
Site.js tries to seamlessly install the dependencies it needs when run. That said, there are certain basic components it expects on a Linux-like system. These are:
139 140 141

  - `sudo`
  - `libcap2-bin` (we use `setcap` to escalate privileges on the binary as necessary)
142
  - `bash` (on Linux, macOS, etc.)
143

144
__For production use, passwordless sudo is required.__ On systems where the sudo configuration directory is set to `/etc/sudoers.d`, Site.js will automatically install this rule. On other systems, you might have to [set it up yourself](https://serverfault.com/questions/160581/how-to-setup-passwordless-sudo-on-linux).
145

146
If it turns out that any of these prerequisites are a widespread cause of first-run woe, we can look into having them installed automatically in the future. Please [open an issue](https://github.com/small-tech/site.js/issues) if any of these affects you during your deployments or in everyday use.
147

148
To install Site.js using the one-line installation command on Linux and macOS, you will need `wget` (or `curl`) installed to download the installation script. On Linux, you can install either via your distribution’s package manager (e.g., `sudo apt install wget` on Ubuntu-like systems). macOS comes with curl installed.
149

150
## Update (as of version 12.9.5; properly functioning as of version 12.9.6)
Aral Balkan's avatar
Aral Balkan committed
151 152 153 154 155 156 157 158 159

To seamlessly update the native binary if a newer version exists:

```shell
site update
```

This command will automatically restart a running Site.js daemon if one exists. If you are running Site.js as a regular process, it will continue to run and you will run the newer version the next time you launch a regular Site.js process.

160 161 162 163
__Note:__ There is a bug in the semantic version comparison in the original release with the update feature (version 12.9.5) that will prevent upgrades between minor versions (i.e., between 12.9.5 and 12.10.x and beyond). This was fixed in version 12.9.6. If you’re still on 12.9.5 and you’re reading this after we’ve moved to 12.10.0 and beyond, please stop Site.js if it’s running and [install the latest Site.js](#install) manually.

## Automatic updates in production (as of version 12.10.0)

164
[Production servers](#production) started with the `enable` command will automatically check for updates on first launch and then again at a set interval (currently every 6 hours) and update themselves as and when necessary.
165 166

This is a primary security feature given that Site.js is meant for use by individuals, not startups or enterprises with operations teams that can (in theory, at least) maintain servers with the latest updates.
167

168 169 170 171 172
## Uninstall

To uninstall the native binary (and any created artifacts, like TLS certificates, systemd services, etc.):

```shell
Aral Balkan's avatar
Aral Balkan committed
173
site uninstall
174 175
```

176
## Use
177

178 179 180
### Development (servers @localhost)

#### Regular server
181

182
Start serving the current directory at https://localhost as a regular process using locally-trusted certificates:
183 184

```shell
Aral Balkan's avatar
Aral Balkan committed
185
$ site
186 187
```

188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
This is a shorthand for the full form of the `serve` command which, for the above example, is:

```shell
$ site serve . @localhost:443
```

#### To serve on a different port

Just specify the port explicitly as in the following example:

```shell
$ site @localhost:666
```

That, again, is shorthand for the full version of the command, which is:

```shell
$ site serve . @localhost:666
```

208
#### Proxy server
209

210
You can use Site.js as a development-time reverse proxy for HTTP and WebSocket connections. This is useful if you have a web app written in any language that only supports HTTP (not TLS) that you want to deploy securely.
211

212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227
For example, the following is a simple HTTP server written in Python 3 (_server.py_) that runs insecurely on port 3000:

```python
from http.server import HTTPServer, BaseHTTPRequestHandler

class MyRequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.end_headers()
        self.wfile.write(b'Hello, from Python!')

server = HTTPServer(('localhost', 3000), MyRequestHandler)
server.serve_forever()
```

Run it (at http://localhost:3000) with:
228 229

```shell
230
$ python3 server
231 232
```

233 234 235 236 237 238 239
Then, proxy it securely from https://localhost using:

```shell
$ site :3000
```


240 241 242
Again, this is a convenient shortcut. The full form of this command is:

```shell
243
$ site serve :3000 @localhost:443
244 245
```

246 247
This will create and serve the following proxies:

248 249
  * http://localhost:3000 → https://localhost
  * ws://localhost:3000 → wss://localhost
250

251 252 253 254 255 256 257 258 259 260
### Testing (servers @hostname)

#### Regular server

Start serving the _my-site_ directory at your _hostname_ as a regular process using globally-trusted Let’s Encrypt certificates:

```shell
$ site my-site @hostname
```

261 262
Note that as of 13.0.0, Site.js will refuse to start the server if your hostname (or the domain you specified manually using the `--domain` option and any aliases you may have specified using the `--aliases` option) fails to resolve or is unreachable. This should help you diagnose and fix typos in domain names as well as DNS misconfiguration and propagation issues.

263 264 265 266 267 268 269 270
#### Proxy server

Start serving `http://localhost:1313` and `ws://localhost:1313` at your _hostname_:

```shell
$ site :1313 @hostname
```

271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286
#### macOS notes

To set your hostname under macOS (e.g., to `example.small-tech.org`), run the following command:

```shell
$ sudo scutil --set HostName example.small-tech.org
```

#### Windows 10 notes

On Windows 10, you must add quotation marks around `@hostname` and `@localhost`. So the first example, above, would be written in the following way on Windows 10:

```shell
$ site my-site "@hostname"
```

287
Also, Windows 10, unlike Linux and macOS, does not have the concept of a hostname. The closest thing to it is your _full computer name_. Setting your full computer name is a somewhat convoluted process so we’ve documented it here for you.
288 289 290 291 292 293 294 295 296 297

##### How to set your full computer name on Windows 10

Say you want to set your hostname to `my-windows-laptop.small-tech.org`:

1. Control Panel → System And Security → System → Change Settings link (next to Computer name) → [Change…] Button
2. Under Computer name, enter your _subdomain_ (`my-windows-laptop`)
3. [More…] Button → enter your _domain name_ (`small-tech.org`) in the Primary DNS suffix of this computer field.
4. Press the various [OK] buttons to dismiss the various modal dialogues and restart your computer.

298 299
#### Making your server public

300
Use a service like [ngrok](https://ngrok.com/) (Pro+) to point a custom domain name to your temporary staging server. Make sure you set your `hostname` file (e.g., in `/etc/hostname` or via `hostnamectl set-hostname <hostname>` or the equivalent for your platform) to match your domain name. The first time you hit your server via your hostname it will take a little longer to load as your Let’s Encrypt certificates are being automatically provisioned by Auto Encrypt.
Aral Balkan's avatar
Aral Balkan committed
301

302 303
When you start your server, it will run as a regular process. It will not be restarted if it crashes or if you exit the foreground process or restart the computer.

Aral Balkan's avatar
Aral Balkan committed
304 305 306
### Deployment

#### Sync
307

Aral Balkan's avatar
Aral Balkan committed
308
Site.js can help you deploy your site to your live server with its sync feature.
Aral Balkan's avatar
Aral Balkan committed
309 310

```shell
Aral Balkan's avatar
Aral Balkan committed
311
$ site my-demo --sync-to=my-demo.site
Aral Balkan's avatar
Aral Balkan committed
312 313
```

Aral Balkan's avatar
Aral Balkan committed
314
The above command will:
Aral Balkan's avatar
Aral Balkan committed
315

Aral Balkan's avatar
Aral Balkan committed
316 317
  1. Generate any Hugo content that might need to be generated.
  2. Sync your site from the local _my-demo_ folder via rsync over ssh to the host _my-demo.site_.
Aral Balkan's avatar
Aral Balkan committed
318

Aral Balkan's avatar
Aral Balkan committed
319
Without any customisations, the sync feature assumes that your account on your remote server has the same name as your account on your local machine and that the folder you are watching (_my-demo_, in the example above) is located at _/home/your-account/my-demo_ on the remote server. Also, by default, the contents of the folder will be synced, not the folder itself. You can change these defaults by specifying a full-qualified remote connection string as the `--sync-to` value.
Aral Balkan's avatar
Aral Balkan committed
320

Aral Balkan's avatar
Aral Balkan committed
321
The remote connection string has the format:
Aral Balkan's avatar
Aral Balkan committed
322

Aral Balkan's avatar
Aral Balkan committed
323 324
```
remoteAccount@host:/absolute/path/to/remoteFolder
Aral Balkan's avatar
Aral Balkan committed
325 326
```

Aral Balkan's avatar
Aral Balkan committed
327
For example:
Aral Balkan's avatar
Aral Balkan committed
328

Aral Balkan's avatar
Aral Balkan committed
329 330 331 332
```shell
$ site my-folder --sync-to=someOtherAccount@my-demo.site:/var/www
```

Aral Balkan's avatar
Aral Balkan committed
333
If you want to sync not the folder’s contents but the folder itself, use the `--sync-folder-and-contents` flag. e.g.,
Aral Balkan's avatar
Aral Balkan committed
334

335
```shell
Aral Balkan's avatar
Aral Balkan committed
336
$ site my-local-folder --sync-to=me@my.site:my-remote-folder --sync-folder-and-contents
337 338
```

Aral Balkan's avatar
Aral Balkan committed
339
The above command will result in the following directory structure on the remote server: _/home/me/my-remote-folder/my-local-folder_. It also demonstrates that if you specify a relative folder, Site.js assumes you mean the folder exists in the home directory of the account on the remote server.
340

Aral Balkan's avatar
Aral Balkan committed
341 342 343 344 345 346 347
#### Live Sync

With the Live Sync feature, you can have Site.js watch for changes to your content and sync them to your server in real-time (e.g., if you want to live blog something or want to keep a page updated with local data you’re collecting from a sensor).

To start a live sync server, provide the `--live-sync` flag to your sync request.

For example:
348 349

```shell
Aral Balkan's avatar
Aral Balkan committed
350
$ site my-demo --sync-to=my-demo.site --live-sync
351 352
```

Aral Balkan's avatar
Aral Balkan committed
353 354
The above command will start a local development server at _https://localhost_. Additionally, it will watch the folder _my-demo_ for changes and sync any changes to its contents via rsync over ssh to the host _my-demo.site_.

Aral Balkan's avatar
Aral Balkan committed
355

356
### Production
357

358
__Available on Linux distributions with systemd (most Linux distributions, but [not these ones](https://sysdfree.wordpress.com/2019/03/09/135/) or on macOS or Windows).__
359

360
On your live, public server, you can start serving the _my-site_ directory at your _hostname_ as a daemon that is automatically run at system startup and restarted if it crashes with:
361 362

```shell
Aral Balkan's avatar
Aral Balkan committed
363
$ site enable my-site
364 365
```

366
The `enable` command sets up your server to start automatically when your server starts and restart automatically if it crashes. Requires superuser privileges on first run to set up the launch item.
367

368
For example, if you run the command on a connected server that has the ar.al domain pointing to it and `ar.al` set in _/etc/hostname_, you will be able to access the site at https://ar.al. (Yes, of course, [ar.al](https://ar.al) runs on Site.js.) The first time you hit your live site, it will take a little longer to load as your Let’s Encrypt certificates are being automatically provisioned by Auto Encrypt.
369

370 371
The automatic TLS certificate provisioning will get certificates for the naked domain and the _www_ subdomain. There is currently no option to add other subdomains. Also, please ensure that both the naked domain and the _www_ subdomain are pointing to your server before you enable your server and hit it to ensure that the provisioning works. This is especially important if you are migrating an existing site.

372
When the server is enabled, you can also use the following commands:
Aral Balkan's avatar
Aral Balkan committed
373

Aral Balkan's avatar
Aral Balkan committed
374
  - `start`: Start server.
375
  - `stop`: Stop server.
Aral Balkan's avatar
Aral Balkan committed
376
  - `restart`: Restart server.
377
  - `disable`: Stop server and remove from startup.
378
  - `logs`: Display and tail server logs.
379
  - `status`: Display detailed server information (press ‘q’ to exit).
Aral Balkan's avatar
Aral Balkan committed
380

381
Site.js uses the [systemd](https://freedesktop.org/wiki/Software/systemd/) to start and manage the daemon. Beyond the commands listed above that Site.js supports natively (and proxies to systemd), you can make use of all systemd functionality via the [systemctl](https://www.freedesktop.org/software/systemd/man/systemctl.html) and [journalctl](https://www.freedesktop.org/software/systemd/man/journalctl.html) commands.
Aral Balkan's avatar
Aral Balkan committed
382

383 384
## Build and test from source

Aral Balkan's avatar
Aral Balkan committed
385 386 387
Site.js is built using and supports Node.js LTS (currently version 12.16.2).

The build is created using Nexe and our own pre-built Nexe base Node.js binaries hosted on SiteJS.org. Please make sure that the version of your Node.js runtime matches the currently supported version stated above to ensure that the correct Nexe binary build is downloaded and used by the build script.
Aral Balkan's avatar
Aral Balkan committed
388

Aral Balkan's avatar
Aral Balkan committed
389
### Install the source and run tests
Aral Balkan's avatar
Aral Balkan committed
390

391 392
```shell
# Clone and install.
Aral Balkan's avatar
Aral Balkan committed
393
mkdir site.js && cd site.js
394
git clone https://source.small-tech.org/site.js/app.git
Aral Balkan's avatar
Aral Balkan committed
395 396
cd app
./install
397

398 399 400 401 402 403 404 405
# Run the app once (so that it can get your Node.js binary
# permission to bind to ports < 1024 on Linux ­– otherwise
# the tests will fail.)
bin/site.js test/site

# You should be able to see the site at https://localhost
# now. Press Ctrl+C to stop the server.

406 407
# Run unit tests.
npm test
Aral Balkan's avatar
Aral Balkan committed
408
```
409

410 411
__Note:__ If you upgrade your Node.js binary, please run `bin/site.js` again before running the tests (or using Site.js as a module in your own app) so that it can get permissions for your Node.js binary to bind to ports < 1024. Otherwise, it will fail with `Error: listen EACCES: permission denied 0.0.0.0:443`.

Aral Balkan's avatar
Aral Balkan committed
412 413 414 415 416 417 418 419 420 421
### Install as global Node.js module

After you install the source and run tests:

```shell
# Install the binary as a global module
npm i -g

# Serve the test site locally (visit https://localhost to view).
site test/site
422 423
```

Aral Balkan's avatar
Aral Balkan committed
424
__Note:__ for commands that require root privileges (i.e., `enable` and `disable`), Site.js will automatically restart itself using sudo and Node must be available for the root account. If you’re using [nvm](https://github.com/creationix/nvm), you can enable this via:
425 426

```shell
427
# Replace v10.16.3 with the version of node you want to make available globally.
Aral Balkan's avatar
Aral Balkan committed
428 429
sudo ln -s "$NVM_DIR/versions/node/v12.16.2/bin/node" "/usr/local/bin/node"
sudo ln -s "$NVM_DIR/versions/node/v12.16.2/bin/npm" "/usr/local/bin/npm"
430 431
```

Aral Balkan's avatar
Aral Balkan committed
432 433
### Native binaries

Aral Balkan's avatar
Aral Balkan committed
434
After you install the source and run tests:
Aral Balkan's avatar
Aral Balkan committed
435

Aral Balkan's avatar
Aral Balkan committed
436
```shell
437 438
# Build the native binary for your platform.
# To build for all platforms, use npm run build -- --all
Aral Balkan's avatar
Aral Balkan committed
439 440 441
npm run build

# Serve the test site (visit https://localhost to view).
Aral Balkan's avatar
Aral Balkan committed
442 443 444
# e.g., Using the Linux binary with version <binary-version>
# in the format (YYYYMMDDHHmmss).
dist/linux/<binary-version>/site test/site
445 446
```

447 448
### Build and install native binary locally

Aral Balkan's avatar
Aral Balkan committed
449 450
After you install the source and run tests:

451 452 453 454
```shell
npm run install-locally
```

455 456 457
### Deployment

```shell
458 459
# To cross-compile binaries for Linux (x64), macOS, and Windows
# and also copy them over to the Site.js web Site for deployment.
460 461
# (You will most likely not need to do this.)
npm run deploy
Aral Balkan's avatar
Aral Balkan committed
462 463
```

464
## Syntax
465

Aral Balkan's avatar
Aral Balkan committed
466
```shell
467
site [command] [folder|:port] [@host[:port]] [--options]
Aral Balkan's avatar
Aral Balkan committed
468
```
469

470
  - `command`: serve | enable | disable | start | stop | logs | status | update | uninstall | version | help
471 472 473 474 475
  - `folder|:port`: Path of folder to serve (defaults to current folder) or port on localhost to proxy.
  - `@host[:port]`: Host (and, optionally port) to sync. Valid hosts are @localhost and @hostname.
  - `--options`: Settings that alter command behaviour.

__Key:__ `[]` = optional &nbsp;&nbsp;`|` = or
Aral Balkan's avatar
Aral Balkan committed
476

477 478
### Commands:

479 480 481 482 483 484 485 486 487 488 489 490 491
  - `serve`: Serve specified folder (or proxy specified `:port`) on specified `@host` (at `:port`, if given). The order of arguments is:

    1. what to serve,
    2. where to serve it at. e.g.,

    ```site serve my-folder @localhost```

    If a port (e.g., `:1313`) is specified instead of my-folder, start an HTTP/WebSocket proxy.

  - `enable`: Start server as daemon with globally-trusted certificates and add to startup.

  - `disable`: Stop server daemon and remove from startup.

492 493 494 495
  - `start`: Start server as daemon with globally-trusted certificates.

  - `stop`: Stop server daemon.

Aral Balkan's avatar
Aral Balkan committed
496 497
  - `restart`: Restart server daemon.

498
  - `logs`: Display and tail server logs.
Aral Balkan's avatar
Aral Balkan committed
499

500 501
  - `status`: Display detailed server information.

502 503 504 505 506 507
  - `update`: Check for Site.js updates and update if new version is found.
  - `uninstall`: Uninstall Site.js.

  - `version`: Display version and exit.
  - `help`: Display help screen and exit.

508
If `command` is omitted, behaviour defaults to `serve`.
509 510

### Options:
Aral Balkan's avatar
Aral Balkan committed
511

Aral Balkan's avatar
Aral Balkan committed
512 513
#### For both the `serve` and `enable` commands:

514 515
  - `--domain`: The main domain to serve (defaults to system hostname if not specified).

516
  - `--aliases`: Comma-separated list of additional domains to obtain TLS certificates for and respond to. These domains point to the main domain via a 302 redirect. Note that as of 13.0.0, the _www_ alias is not added automatically. To specify it, you can use the shorthand form:`--aliases=www`
Aral Balkan's avatar
Aral Balkan committed
517

518
#### For the `serve` command:
Aral Balkan's avatar
Aral Balkan committed
519

520
  - `--sync-to`: The host to sync to.
Aral Balkan's avatar
Aral Balkan committed
521

522
  - `--sync-from`: The folder to sync from (only relevant if `--sync-to` is specified).
Aral Balkan's avatar
Aral Balkan committed
523

Aral Balkan's avatar
Aral Balkan committed
524
  - `--live-sync`: Watch for changes and live sync them to a remote server (only relevant if `--sync-to` is specified).
Aral Balkan's avatar
Aral Balkan committed
525

526
  - `--sync-folder-and-contents`: Sync folder and contents (default is to sync the folder’s contents only).
Aral Balkan's avatar
Aral Balkan committed
527

528 529 530
#### For the `enable` command:

  - `--ensure-can-sync`: Ensure server can rsync via ssh.
Aral Balkan's avatar
Aral Balkan committed
531

532
All command-line arguments are optional. By default, Site.js will serve your current working folder over port 443 with locally-trusted certificates.
533

534
When you `serve` a site at `@hostname` or use the `enable` command, globally-trusted Let’s Encrypt TLS certificates are automatically provisioned for you using Auto Encrypt the first time you hit your hostname. The hostname for the certificates is automatically set from the hostname of your system (and the _www._ subdomain is also automatically provisioned).
535

Aral Balkan's avatar
Aral Balkan committed
536 537
## Usage examples

538
### Develop using locally-trusted TLS certificates
Aral Balkan's avatar
Aral Balkan committed
539 540 541

| Goal                                      | Command                                                       |
| ----------------------------------------- | ------------------------------------------------------------- |
542 543 544 545 546 547 548 549 550
| Serve current folder*                     | site                                                          |
|                                           | site serve                                                    |
|                                           | site serve .                                                  |
|                                           | site serve . @localhost                                       |
|                                           | site serve . @localhost:443                                   |
| Serve folder demo (shorthand)             | site demo                                                     |
| Serve folder demo on port 666             | site serve demo @localhost:666                                |
| Proxy localhost:1313 to https://localhost*| site :1313                                                    |
|                                           | site serve :1313 @localhost:443                               |
Aral Balkan's avatar
Aral Balkan committed
551 552 553 554 555
| Sync demo folder to my.site               | site demo --sync-to=my.site                                   |
| Ditto, but use account me on my.site      | site demo --sync-to=me@my.site                                |
| Ditto, but sync to remote folder ~/www    | site demo --sync-to=me@my.site:www                            |
| Ditto, but specify absolute path          | site demo --sync-to=me@my.site:/home/me/www                   |
| Live sync current folder to my.site       | site --sync-to=my.site --live-sync                            |
556 557 558 559

### Stage and deploy using globally-trusted Let’s Encrypt certificates

#### Regular process:
Aral Balkan's avatar
Aral Balkan committed
560 561 562

| Goal                                      | Command                                                       |
| ----------------------------------------- | ------------------------------------------------------------- |
563
| Serve current folder                      | site @hostname                                                |
564
| Serve current folder at specified domain  | site @hostname --domain=my.site                               |
565
| Serve current folder also at aliases	    | site @hostname --aliases=www,other.site,www.other.site        |
566 567 568 569 570 571
| Serve folder demo*                        | site demo @hostname                                           |
|                                           | site serve demo @hostname                                     |
| Proxy localhost:1313 to https://hostname  | site serve :1313 @hostname                                    |

#### Start-up daemon:

572 573
| Goal                                      | Command                                                       |
| ----------------------------------------- | ------------------------------------------------------------- |
Aral Balkan's avatar
Aral Balkan committed
574
| Serve current folder as daemon            | site enable                                                   |
575
| Ditto & also ensure it can rsync via ssh  | site enable --ensure-can-sync                                 |
Aral Balkan's avatar
Aral Balkan committed
576
| Get status of daemon                      | site status                                                   |
Aral Balkan's avatar
Aral Balkan committed
577 578 579
| Start server                              | site start                                                    |
| Stop server                               | site stop                                                     |
| Restart server                            | site restart                                                  |
Aral Balkan's avatar
Aral Balkan committed
580 581
| Display server logs                       | site logs                                                     |
| Stop current daemon                       | site disable                                                  |
Aral Balkan's avatar
Aral Balkan committed
582

Aral Balkan's avatar
Aral Balkan committed
583 584 585 586 587 588
#### General:

| Goal                                      | Command                                                       |
| ----------------------------------------- | ------------------------------------------------------------- |
| Check for updates and update if found     | site update                                                   |

589
\* _Alternative, equivalent forms listed (some commands have shorthands)._
590

591
## Native support for an Evergreen Web
592

Aral Balkan's avatar
Aral Balkan committed
593
What if links never died? What if we never broke the Web? What if it didn’t involve any extra work? It’s possible. And, with Site.js, it’s effortless.
594

595
### The Archival Cascade
596

597
__(As of version 13.0.0)__ If you have static archives of previous versions of your site, you can have Site.js automatically serve them for you.
598 599 600 601 602 603 604

Just put them into folder named `.archive-1`, `.archive-2`, etc.

If a path cannot be found in your current site, Site.js will search for it first in `.archive-2` and, if it cannot find it there either, in `.archive-1`.

Paths in your current site will override those in `.archive-2` and those in `.archive-2` will, similarly, override those in `.archive-1`.

Timo Tijhof's avatar
Timo Tijhof committed
605
Use the archival  old links will never die but if you do replace them with newer content in newer versions, those will take precedence.
606

607
#### Legacy method (pre version 13.0.0)
608 609

In older versions, the convention for specifying the archival cascade was as follows:
610 611 612 613

```
|- my-site
|- my-site-archive-1
614 615
|- my-site-archive-2
|- etc.
616 617
```

618
This legacy method of specifying the archival cascade is still supported but may be removed in a future release. Please use the recommended method outlined above instead.
619 620 621 622

### Native 404 → 302 support

But what if the previous version of your site is a dynamic site and you either don’t want to lose the dynamic functionality or you simply cannot take a static backup. No worries. Just move it to a different subdomain or domain and make your 404s into 302s.
623

Aral Balkan's avatar
Aral Balkan committed
624
Site.js has native support for [the 404 to 302 technique](https://4042302.org) to ensure an evergreen web. Just serve the old version of your site (e.g., your WordPress site, etc.) from a different subdomain and tell Site.js to forward any unknown requests on your new static site to that subdomain so that all your existing links magically work.
625 626 627

To do so, create a simple file called `4042302` in the root directory of your web content and add the URL of the server that is hosting your older content. e.g.,

628
### /4042302
629
```
Aral Balkan's avatar
Aral Balkan committed
630
https://the-previous-version-of.my.site
631
```
632 633 634 635 636 637

You can chain the 404 → 302 method any number of times to ensure that none of your links ever break without expending any additional effort to migrate your content.

For more information and examples, see [4042302.org](https://4042302.org).

## Custom error pages
638

639 640
![Screenshot of the custom 404 error page included in the unit tests](images/custom-404.png)

641 642 643 644
You can specify a custom error page for 404 (not found) and 500 (internal server error) errors. To do so, create a folder with the status code you want off of the root of your web content (i.e., `/404` and/or `/500`) and place at least an `index.html` file in the folder. You can also, optionally, put any assets you want to display on your error pages into those folders and load them in via relative URLs. Your custom error pages will be served with the proper error code and at the URL that was being accessed.

If you do not create custom error pages, the built-in default error pages will be displayed for 404 and 500 errors.

645
When creating your own servers (see [API](#API)), you can generate the default error pages programmatically using the static methods `Site.default404ErrorPage()` and `Site.default500ErrorPage()`, passing in the missing path and the error message as the argument, respectively to get the HTML string of the error page returned.
646

647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662
## Ephemeral statistics

When Site.js launches, you will see a line similar to the following in the console:

```
📊    ❨site.js❩ For statistics, see https://localhost/b64bd821d521b6a65a307c2b83060766
```

This is your private, cryptographically secure URL where you can access ephemeral statistics about your site. If you want to share your statistics, link to them publicly. If you want to keep them private, keep the URL secret.

![Screenshot of the statistics page](/images/statistics.png)

The statistics are ephemeral as they are only kept in memory and they reset any time your server restarts.

The statistics are very basic and they’re there only to give an idea about which parts of your site are most popular as well as to highlight missing pages, etc., They’re not there so you can spy on people (if you want to do that, this is not the tool for you).

663 664
## Static site generation

665
As of version 13.0.0, Site.js includes the [Hugo static site generator](https://gohugo.io).
666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704

To create a new Hugo site and start serving it:

```shell
mkdir my-site
```

__Note:__ During development, this feature uses Site.js’s live reload instead of Hugo’s. Your web page must have at least a `<body>` tag for it to work.

### How it works

If Site.js finds a folder called _.hugo_ in your site’s root, it will build it using its integrated Hugo instance (you don’t need to install Hugo separately) and place the generated files into a folder called _.generated_ in your site’s root. It will also automatically serve these files.

You can pass any command you would normally pass to Hugo using Site.js’s integrated Hugo instance:

```shell
site hugo [any valid Hugo command]
```

Please see [the Hugo documentation](https://gohugo.io/documentation/) for detailed information on how Hugo works.

### Mounting Hugo sites

Site.js will automatically mount files in the _.hugo_ directory at your site’s root.

If you want the generated Hugo site to be mounted at a different path, include the path structure you want in the name of the hugo folder, separating paths using two dashes. For example:

Folder name               | Mount path         |
------------------------- | ------------------ |
.hugo                     | /                  |
.hugo--docs               | /docs              |
.hugo--second-level--blog | /second-level/blog |

You can include any number of Hugo sites in your site and mount them at different paths and the results will be weaved together into the _.generated_ folder. We call this feature… _ahem_… Hugo Weaving (we’ll show ourselves out).

All regular Site.js functionality is still available when using Hugo generation. So you can, for example, have your blog statically-generated using Hugo and extend it using locally-hosted dynamic comments.

__Note:__ Hugo’s [Multilingual Multihost mode](https://gohugo.io/content-management/multilingual/#configure-multilingual-multihost) is _not_ supported.

Aral Balkan's avatar
Aral Balkan committed
705 706
## Dynamic sites

707
You can specify routes with dynamic functionality by specifying HTTPS and WebSocket (WSS) routes in two ways: either using DotJS – a simple file system routing convention ala PHP, but for JavaScript – or through code in a _routes.js_ file.
Aral Balkan's avatar
Aral Balkan committed
708 709 710

In either case, your dynamic routes go into a directory named _.dynamic_ in the root of your site.

711 712 713
### DotJS

DotJS maps JavaScript modules in a file system hierarchy to routes on your web site in a manner that will be familiar to anyone who has ever used PHP.
Aral Balkan's avatar
Aral Balkan committed
714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742

#### GET-only (simplest approach)

The easiest way to get started with dynamic routes is to simply create a JavaScript file in a folder called _.dynamic_ in the root folder of your site. Any routes added in this manner will be served via HTTPS GET.

For example, to have a dynamic route at `https://localhost`, create the following file:

```
.dynamic/
    └ index.js
```

Inside _index.js_, all you need to do is to export your route handler:

```js
let counter = 0

module.exports = (request, response) => {
  response
    .type('html')
    .end(`
      <h1>Hello, world!</h1>
      <p>I’ve been called ${++counter} time${counter > 1 ? 's': ''} since the server started.</p>
    `)
}
```

To test it, run a local server (`site`) and go to `https://localhost`. Refresh the page a couple of times to see the counter increase.

743
Congratulations, you’ve just made your first dynamic route using DotJS.
744

Aral Balkan's avatar
Aral Balkan committed
745 746 747
In the above example, _index.js_ is special in that the file name is ignored and the directory that the file is in becomes the name of the route. In this case, since we put it in the root of our site, the route becomes `/`.

Usually, you will have more than just the index route (or your index route might be a static one). In those cases, you can either use directories with _index.js_ files in them to name and organise your routes or you can use the names of _.js_ files themselves as the route names. Either method is fine but you should choose one and stick to it in order not to confuse yourself later on (see [Precedence](#Precendence), below).
748

749
So, for example, if you wanted to have a dynamic route that showed the server CPU load and free memory, you could create a file called _.dynamic/server-stats.js_ in your web folder with the following content:
750 751 752 753

```js
const os = require('os')

Aral Balkan's avatar
Aral Balkan committed
754
function serverStats (request, response) {
755 756 757 758 759 760 761

  const loadAverages = `<p> ${os.loadavg().reduce((a, c, i) => `${a}\n<li><strong>CPU ${i+1}:</strong> ${c}</li>`, '<ul>') + '</ul>'}</p>`

  const freeMemory = `<p>${os.freemem()} bytes</p>`

  const page = `<html><head><title>Server statistics</title><style>body {font-family: sans-serif;}</style></head><body><h1>Server statistics</h1><h2>Load averages</h2>${loadAverages}<h2>Free memory</h2>${freeMemory}</body></html>`

Aral Balkan's avatar
Aral Balkan committed
762 763 764
  response
    .type('html')
    .end(page)
765 766 767 768 769
}

module.exports = serverStats
```

Aral Balkan's avatar
Aral Balkan committed
770
Site.js will load your dynamic route at startup and you can test it by hitting _https://localhost/server-stats_ using a local web server. Each time you refresh, you should get the latest dynamic content.
771

Aral Balkan's avatar
Aral Balkan committed
772 773
__Note:__ You could also have named your route _.dynamic/server-stats/index.js_ and still hit it from _https://localhost/server-stats_. It’s best to keep to one or other convention (either using file names as route names or directory names as route names). Using both in the same app will probably confuse you (see [Precedence](#Precendence), below).

774
##### Using node modules
775

776 777 778
Since Site.js contains Node.js, anything you can do with Node.js, you do with Site.js, including using node modules and [npm](https://www.npmjs.com/). To use custom node modules, initialise your _.dynamic_ folder using `npm init` and use `npm install`. Once you’ve done that, any modules you `require()` from your DotJS routes will be properly loaded and used.

Say, for example, that you want to display a random ASCII Cow using the Cows module (because why not?) To do so, create a _package.json_ file in your _.dynamic_ folder (e.g., use `npm init` to create this interactively). Here’s a basic example:
Aral Balkan's avatar
Aral Balkan committed
779 780 781 782 783 784 785 786 787 788 789 790

```json
{
  "name": "random-cow",
  "version": "1.0.0",
  "description": "Displays a random cow.",
  "main": "index.js",
  "author": "Aral Balkan <mail@ar.al> (https://ar.al)",
  "license": "AGPL-3.0-or-later"
}
```

791
Then, install the [cows node module](https://www.npmjs.com/package/cows) using npm:
Aral Balkan's avatar
Aral Balkan committed
792 793 794 795 796

```sh
npm i cows
```

797
This will create a directory called _node_modules_ in your _.dynamic_ folder and install the cows module (and any dependencies it may have) inside it. Now is also a good time to create a `.gitignore` file in the root of your web project and add the _node_modules_ directory to it if you’re using Git for source control so that you do not end up accidentally checking in your node modules. Here’s how you would do this using the command-line on Linux-like systems:
Aral Balkan's avatar
Aral Balkan committed
798 799 800 801 802 803 804 805 806 807 808 809 810

```sh
echo 'node_modules' >> .gitignore
```

Now, let’s create the route. We want it reachable at `https://localhost/cows` (of course), so let’s put it in:

```
.dynamic/
    └ cows
        └ index.js
```

811
And, finally, here’s the code for the route itself:
Aral Balkan's avatar
Aral Balkan committed
812 813 814 815 816 817 818 819 820 821 822 823 824

```js
const cows = require('cows')()

module.exports = function (request, response) {
  const randomCowIndex = Math.round(Math.random()*cows.length)-1
  const randomCow = cows[randomCowIndex]

  function randomColor () {
    const c = () => (Math.round(Math.random() * 63) + 191).toString(16)
    return `#${c()}${c()}${c()}`
  }

825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847
  response
    .type('html')
    .end(`
      <!doctype html>
      <html lang='en'>
      <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <title>Cows!</title>
        <style>
          html { font-family: sans-serif; color: dark-grey; background-color: ${randomColor()}; }
          body {
            display: grid; align-items: center; justify-content: center;
            height: 100vh; vertical-align: top; margin: 0;
          }
          pre { font-size: 24px; color: ${randomColor()}; mix-blend-mode: difference;}
        </style>
      </head>
      <body>
          <pre>${randomCow}</pre>
      </body>
      </html>
    `)
Aral Balkan's avatar
Aral Balkan committed
848 849 850 851 852
}
```

Now if you run `site` on the root of your web folder (the one that contains the _.dynamic_ folder) and hit `https://localhost/cows`, you should get a random cow in a random colour every time you refresh.

853
If including HTML and CSS directly in your dynamic route makes you cringe, feel free to `require` your templating library of choice and move them to external files. As hidden folders (directories that begin with a dot) are ignored in the _.dynamic_ folder and its subfolders, you can place any assets (HTML, CSS, images, etc.) into a directory that starts with a dot and load them in from there.
Aral Balkan's avatar
Aral Balkan committed
854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941

For example, if I wanted to move the HTML and CSS into their own files in the example above, I could create the following directory structure:

```
.dynamic/
    └ cows
        ├ .assets
        │     ├ index.html
        │     └ index.css
        └ index.js
```

For this example, I’m not going to use an external templating engine but will instead rely on the built-in template string functionality in JavaScript along with `eval()` (which is perfectly safe to use here as we are not processing external input).

So I move the HTML to the _index.html_ file (and add a template placeholder for the CSS in addition to the existing random cow placeholder):

```html
<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Cows!</title>
  <style>${css}</style>
</head>
<body>
    <pre>${randomCow}</pre>
</body>
</html>
```

And, similarly, I move the CSS to its own file, _index.css_:

```css
html {
  font-family: sans-serif;
  color: dark-grey;
  background-color: ${randomColor()};
}

body {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
  vertical-align: top;
  margin: 0;
}

pre {
  font-size: 24px;
  mix-blend-mode: difference;
  color: ${randomColor()};
}
```

Then, finally, I modify my `cows` route to read in these two template files and to dynamically render them in response to requests. My _index.js_ now looks like this:

```js
// These are run when the server starts so sync calls are fine.
const fs = require('fs')
const cssTemplate = fs.readFileSync('cows/.assets/index.css')
const htmlTemplate = fs.readFileSync('cows/.assets/index.html')
const cows = require('cows')()

module.exports = function (request, response) {
  const randomCowIndex = Math.round(Math.random()*cows.length)-1
  const randomCow = cows[randomCowIndex]

  function randomColor () {
    const c = () => (Math.round(Math.random() * 63) + 191).toString(16)
    return `#${c()}${c()}${c()}`
  }

  function render (template) {
    return eval('`' + template + '`')
  }

  // We render the CSS template first…
  const css = render(cssTemplate)

  // … because the HTML template references the rendered CSS template.
  const html = render(htmlTemplate)

  response.type('html').end(html)
}
```

Aral Balkan's avatar
Aral Balkan committed
942
When you save this update, Site.js will automatically reload the server with your new code (version 12.9.7 onwards). When you refresh in your browser, you should see exactly the same behaviour as before.
943

944
As you can see, you can create quite a bit of dynamic functionality just by using DotJS with its most basic file-based routing mode. However, with this convention you are limited to GET routes. To use both GET and POST routes, you have to do a tiny bit more work, as explained in the next section.
945

946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966
#### GET and POST routes

If you need POST routes (e.g., you want to post form content back to the server) in addition to GET routes, the directory structure works a little differently. In this case, you have to create a _.get_ directory for your GET routes and a _.post_ directory for your post routes.

Otherwise, the naming and directory structure conventions work exactly as before.

So, for example, if you have the following directory structure:

```
site/
  └ .dynamic/
        ├ .get/
        │   └ index.js
        └ .post/
            └ index.js
```

Then a GET request for `https://localhost` will be routed to _site/.dynamic/.get/index.js_ and a POST request for `https://localhost` will be routed to _site/.dynamic/.post/index.js_.

These two routes are enough to cover your needs for dynamic routes and form handling.

Aral Balkan's avatar
Aral Balkan committed
967 968
#### WebSocket (WSS) routes

969 970 971
Site.js is not limited to HTTPS, it also supports secure WebSockets.

To define WebSocket (WSS) routes alongside HTTPS routes, modify your directory structure so it resembles the one below:
Aral Balkan's avatar
Aral Balkan committed
972 973 974 975 976 977 978 979 980 981 982 983 984

```
site/
  └ .dynamic/
        ├ .https/
        │   ├ .get/
        │   │   └ index.js
        │   └ .post/
        │       └ index.js
        └ .wss/
            └ index.js
```

985 986 987
Note that all we’ve done is to move our HTTPS _.get_ and _.post_ directories under a _.https_ directory and we’ve created a separate _.wss_ directory for our WebSocket routes.

Here’s how you would implement a simple echo server that sends a copy of the message it receives from a client to that client:
988 989 990 991 992 993 994 995 996

```js
module.exports = (client, request) => {
  client.on('message', (data) => {
    client.send(data)
  })
}
```

997
You can also broadcast messages to all or a subset of connected clients. Here, for example, is a naïve single-room chat server implementation that broadcasts messages to all connected WebSocket clients (including the client that originally sent the message and any other clients that might be connected to different WebSocket routes on the same server):
998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016

```js
module.exports = (currentClient, request) {
  ws.on('message', message => {
    this.getWss().clients.forEach(client => {
      client.send(message)
    })
  })
})
```

To test it out, run Site.js and then open up the JavaScript console in a couple of browser windows and enter the following code into them:

```js
const socket = new WebSocket('https://localhost/chat')
socket.onmessage = message => console.log(message.data)
socket.send('Hello!')
```

1017 1018 1019
For a slightly more sophisticated example that doesn’t broadcast a client’s own messages to itself and selectively broadcasts to only the clients in the same “rooms”, see the [Simple Chat example](examples/simple-chat). And here’s [a step-by-step tutorial](https://ar.al/2019/10/11/build-a-simple-chat-app-with-site.js/) that takes you through how to build it.

Here’s a simplified listing of the code for the server component of this example:
1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037

```js
module.exports = function (client, request) {
  // A new client connection has been made.
  // Persist the client’s room based on the path in the request.
  client.room = this.setRoom(request)

  console.log(`New client connected to ${client.room}`)

  client.on('message', message => {
    // A new message has been received from a client.
    // Broadcast it to every other client in the same room.
    const numberOfRecipients = this.broadcast(client, message)

    console.log(`${client.room} message broadcast to ${numberOfRecipients} recipient${numberOfRecipients === 1 ? '' : 's'}.`)
  })
}
```
1038

1039
### Advanced routing (routes.js file)
Aral Balkan's avatar
Aral Balkan committed
1040

1041
DotJS should get you pretty far for simpler use cases, but if you need full flexibility in routing (to use regular expressions in defining route paths, for example, or for initialising global objects that need to survive for the lifetime of the server), simply define a _routes.js_ in your _.dynamic_ folder:
Aral Balkan's avatar
Aral Balkan committed
1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052

```
site/
  └ .dynamic/
        └ routes.js
```

The _routes.js_ file should export a function that accepts a reference to the Express app created by Site.js and defines its routes on it. For example:

```js
module.exports = app => {
1053 1054 1055 1056 1057
  // HTTPS route with a parameter called thing.
  app.get('/hello/:thing', (request, response) => {
    response
      .type('html')
      .end(`<h1>Hello, ${request.params.thing}!</h1>`)
Aral Balkan's avatar
Aral Balkan committed
1058 1059
  })

1060 1061 1062 1063
  // WebSocket route: echos messages back to the client that sent them.
  app.ws('/echo', (client, request) => {
  client.on('message', (data) => {
    client.send(data)
Aral Balkan's avatar
Aral Balkan committed
1064 1065 1066 1067
  })
}
```

1068
When using the _routes.js_ file, you can use all of the features in [express](https://expressjs.com/) and [our fork of express-ws](https://github.com/aral/express-ws) (which itself wraps [ws](https://github.com/websockets/ws#usage-examples)).
Aral Balkan's avatar
Aral Balkan committed
1069

1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103
### Routing precedence

#### Between dynamic route and static route

If a dynamic route and a static route have the same name, the dynamic route will take precedence. So, for example, if you’re serving the following site:

```
site/
  ├ index.html
  └ .dynamic/
        └ index.js
```

When you hit `https://localhost`, you will get the dynamic route defined in _index.js_.

#### Between two dynamic routes (TL; DR: do not rely on this)

In the following scenario:

```
site/
  └ .dynamic/
        ├ fun.html
        └ fun/
           └ index.js
```

The behaviour observed under Linux at the time of writing is that _fun/index.js_ will have precendence and mask _fun.html_. __Do not rely on this behaviour.__ The order of dynamic routes is based on a directory crawl and is not guaranteed to be the same in all future versions. For your peace of mind, please do not mix file-name-based and directory-name-based routing.

#### Between the various routing methods

Each of the routing conventions are mutually exclusive and applied according to the following precedence rules:

1. Advanced _routes.js_-based advanced routing.
1104

1105
2. DotJS with separate folders for _.https_ and _.wss_ routes routing (the _.http_ folder itself will apply precedence rules 3 and 4 internally).
1106

1107
3. DotJS with separate folders for _.get_ and _.post_ routes in HTTPS-only routing.
1108

1109
4. DotJS with GET-only routing.
1110 1111 1112

So, if Site.js finds a _routes.js_ file in the root folder of your site’s folder, it will only use the routes from that file (it will not apply file-based routing).

1113
If Site.js cannot find a _routes.js_ file, it will look to see if separate _.https_ and _.wss_ folders have been defined (the existence of just one of these is enough) and attempt to load DotJS routes from those folders. (If it finds separate _.get_ or _.post_ folders within the _.https_ folder, it will add the relevant routes from those folders; if it can’t it will load GET-only routes from the _.https_ folder and its subfolders.)
1114

1115
If separate _.https_ and _.wss_ folders do not exist, Site.js will expect all defined DotJS routes to be HTTPS and will initially look for separate _.get_ and _.post_ folders (the existence of either is enough to trigger this mode). If they exist, it will add the relevant routes from those folders and their subfolders.
1116

1117
Finally, if Site.js cannot find separate _.get_ and _.post_ folders either, it will assume that any DotJS routes it finds in the _.dynamic_ folder are HTTPS GET routes and attempt to add them from there (and any subfolders).
1118

Aral Balkan's avatar
Aral Balkan committed
1119
### Directory paths in your application
1120

Aral Balkan's avatar
Aral Balkan committed
1121
Your dynamic web routes are running within Site.js, which is a Node application compiled into a native binary. Here are how the various common directories for Node.js apps will behave:
1122

Aral Balkan's avatar
Aral Balkan committed
1123
  - `os.homedir()`: __(writable)__ This is the home folder of the account running Site.js. You can write to it to store persistent objects (e.g., save data).
1124 1125 1126 1127 1128

  - `os.tmpdir()`: __(writable)__ Path to the system temporary folder. Use for content you can afford to lose and can recreate (e.g., cache API calls).

  - `.`: __(writable)__ Path to the root of your web content. Since you can write here, you can, if you want to, create content dynamically that will then automatically be served by the static web server.

1129
  - `__dirname`: __(writeable)__ Path to the `.dynamic` folder.
1130

Aral Balkan's avatar
Aral Balkan committed
1131
  - `/`: __(read-only)__ Path to the `/usr` folder (Site.js is installed in `/usr/local/site`). You should not have any reason to use this.
1132

Aral Balkan's avatar
Aral Balkan committed
1133
If you want to access the directory of Site.js itself (e.g., to load in the `package.json` to read the app’s version), you can use the following code:
1134 1135

```js
Aral Balkan's avatar
Aral Balkan committed
1136
const appPath = require.main.filename.replace('bin/site.js', '')
1137 1138
```

1139 1140 1141 1142
### Security

The code within your JavaScript routes is executed on the server. Exercise the same caution as you would when creating any Node.js app (sanitise input, etc.)

1143
## API
1144

1145 1146
You can also include Site.js as a Node module into your Node project. This section details the API you can use if you do that.

1147
Site.js’s `createServer` method behaves like the built-in _https_ module’s `createServer` function. Anywhere you use `require('https').createServer`, you can simply replace it with:
1148

1149 1150 1151 1152
```js
const Site = require('@small-tech/site.js')
new Site().createServer
```
1153

1154
### createServer([options], [requestListener])
1155

1156
  - __options__ _(object)_: see [https.createServer](https://nodejs.org/api/https.html#https_https_createserver_options_requestlistener). Populates the `cert` and `key` properties from the automatically-created [Auto Encrypt Localhost](https://source.small-tech.org/site.js/lib/auto-encrypt-localhost) or Let’s Encrypt certificates and will overwrite them if they exist in the options object you pass in. If your options has `options.global = true` set, globally-trusted TLS certificates are obtained from Let’s Encrypt using [Auto Encrypt](https://source.small-tech.org/site.js/lib/auto-encrypt).
1157

Aral Balkan's avatar
Aral Balkan committed
1158
  - __requestListener__ _(function)_: see [https.createServer](https://nodejs.org/api/https.html#https_https_createserver_options_requestlistener). If you don’t pass a request listener, Site.js will use its default one.
1159

1160
    __Returns:__ [https.Server](https://nodejs.org/api/https.html#https_class_https_server) instance, configured with either locally-trusted certificates via Auto Encrypt Localhost or globally-trusted ones from Let’s Encrypt via Auto Encrypt.
1161

1162
#### Example
1163 1164

```js
1165
const Site = require('@small-tech/site.js')
1166 1167 1168 1169 1170
const express = require('express')

const app = express()
app.use(express.static('.'))

1171
const options = {} // to use globally-trusted certificates instead, set this to {global: true}
1172
const server = new Site().createServer(options, app).listen(443, () => {
1173 1174 1175 1176
  console.log(` 🎉 Serving on https://localhost\n`)
})
```

1177
### constructor (options)
1178 1179

Options is an optional parameter object that may contain the following properties, all optional:
1180

1181
  - __path__ _(string)_: the directory to serve using [Express](http://expressjs.com/).static.
1182

1183
  - __port__ _(number)_: the port to serve on. Defaults to 443. (On Linux, privileges to bind to the port are automatically obtained for you.)
1184

1185
  - __global__ _(boolean)_: if true, globally-trusted Let’s Encrypt certificates will be provisioned (if necessary) and used via Auto Encrypt. If false (default), locally-trusted certificates will be provisioned (if necessary) and used using _Auto Encrypt Localhost_.
1186

1187 1188 1189 1190
  - __proxyPort__ _(number)_: if provided, a proxy server will be created for the port (and `path` will be ignored).

    __Returns:__ Site instance.

1191
__Note:__ if you want to run the site on a port < 1024 on Linux, ensure that privileged ports are disabled ([see details](https://source.small-tech.org/site.js/app/-/issues/169)). e.g., use:
1192 1193

```js
1194 1195 1196
require('lib/ensure').disablePrivilegedPorts()

// You can safely bind to ports below 1024 on Linux now.
1197 1198 1199 1200 1201 1202
```

### serve(callback)

  - __callback__ _(function)_: a function to be called when the server is ready. This parameter is optional. Default callbacks are provided for both regular and proxy servers.

1203
    __Returns:__ [https.Server](https://nodejs.org/api/https.html#https_class_https_server) instance, configured with either locally or globally-trusted certificates.
1204 1205


1206
#### Examples
1207

Aral Balkan's avatar
Aral Balkan committed
1208
Serve the current directory at https://localhost using locally-trusted TLS certificates:
1209

1210
```js
1211 1212
const Site = require('@small-tech/site.js')
const server = new Site().serve()
1213 1214
```

Aral Balkan's avatar
Aral Balkan committed
1215
Serve the current directory at your hostname using globally-trusted Let’s Encrypt TLS certificates:
1216 1217

```js
1218 1219
const Site = require('@small-tech/site.js')
const server = new Site().serve({global: true})
1220 1221
```

1222 1223 1224 1225 1226 1227 1228
Start a proxy server to proxy local port 1313 at your hostname:

```js
const Site = require('@small-tech/site.js')
const server = new Site().serve({proxyPort: 1313, global: true})
```

1229 1230
## Contributing

Aral Balkan's avatar
Aral Balkan committed
1231
Site.js is [Small Technology](https://ar.al/2019/03/04/small-technology/). The emphasis is on _small_. It is, by design, a zero-configuration tool for creating and hosting single-tenant web applications. It is for humans, by humans. It is non-commercial. (It is not for enterprises, it is not for “startups”, and it is definitely not for unicorns.) As such, any new feature requests will have to be both fit for purpose and survive a trial by fire to be considered.
1232

Aral Balkan's avatar
Aral Balkan committed
1233
Please file issues and submit pull requests on the [Site.js Github Mirror](https://github.com/small-tech/site.js).
1234

1235 1236
## Help wanted

Aral Balkan's avatar
Aral Balkan committed
1237 1238
For locally-trusted certificates, all dependencies are installed automatically for you if they do not exist if you have apt, pacman, or yum (untested) on Linux or if you have [Homebrew](https://brew.sh/) or [MacPorts](https://www.macports.org/) (untested) on macOS.

Aral Balkan's avatar
Aral Balkan committed
1239
I can use your help to test Site.js on the following platform/package manager combinations:
1240

1241 1242
  - Linux with yum
  - macOS with MacPorts
1243

Aral Balkan's avatar
Aral Balkan committed
1244
Please [let us know how/if it works](https://github.com/small-tech/site.js/issues). Thank you!
1245 1246 1247 1248

## Thanks

  * [thagoat](https://github.com/thagoat) for confirming that [installation works on Arch Linux with Pacman](https://github.com/indie-mirror/https-server/issues/1).
1249

1250
  * [Tim Knip](https://github.com/timknip) for confirming that [the module works with 64-bit Windows](https://github.com/indie-mirror/https-server/issues/2) with the following behaviour: “Install pops up a windows dialog to allow adding the cert.”
1251

1252
  * [Run Rabbit Run](https://hackers.town/@nobody) for [the following information](https://hackers.town/@nobody/101670447262172957) on 64-bit Windows: “Win64: works with the windows cert install popup on server launch. Chrome and ie are ok with the site then. FF 65 still throws the cert warning even after restarting.”
1253 1254 1255 1256 1257 1258 1259 1260 1261 1262


## Like this? Fund us!

[Small Technology Foundation](https://small-tech.org) is a tiny, independent not-for-profit.

We exist in part thanks to patronage by people like you. If you share [our vision](https://small-tech.org/about/#small-technology) and want to support our work, please [become a patron or donate to us](https://small-tech.org/fund-us) today and help us continue to exist.

## Copyright

Aral Balkan's avatar
Aral Balkan committed
1263
&copy; 2019-2020 [Aral Balkan](https://ar.al), [Small Technology Foundation](https://small-tech.org).
1264 1265 1266 1267 1268 1269 1270

Let’s Encrypt is a trademark of the Internet Security Research Group (ISRG). All rights reserved. Node.js is a trademark of Joyent, Inc. and is used with its permission. We are not endorsed by or affiliated with Joyent or ISRG.

## License

[AGPL version 3.0 or later.](https://www.gnu.org/licenses/agpl-3.0.en.html)

1271
<!-- Yes, this has to be coded like it’s 1999 for it to work, sadly. -->
1272
<p align='center'><img width='76' src='images/site.js-logo.svg' alt='Site.js logo: a small sprouting plant with a green leaf on either side of a brown stem'></p>