Serving your Sketches

You'll need a web server of some description to properly experience and test your work.

In your code editor

Visual Studio Code, Atom and Sublime Text all offer packages that quickly boot up a web server for the code you're editing.

In Visual Studio Code, a recommended extension is Live Server. Once this is installed, you'll get a status bar item "Go Live". Click that, and a web browser will open automatically using the web server it starts.

This server automatically reloads your web browser when you save a change to a file, making it super quick to iterate.

From the command line

There are various npm packages available that quickly serve files. A simple one is live-server. Install it via $ npm install -g live-server. Once you've got it installed globally, you can boot it up like so:

live-server .

Which would mean, "start the server with the current directory as the base directory". If you've got your files elsewhere, you can replace the . with the path, eg: live-server public/.

One of the nice things about live-server is that as soon as you save the file, the web browser is automatically refreshed.

Addressing

Pay attention to the port that your server runs on. A URL can include a port, like so:

http://google.com:80/

Note the ':80' after the domain name (google.com) and before the beginnings of the resource path (/). Normally you don't see ports in URLs because web browsers assume the server is on the default ports - 80 for HTTP and 443 for HTTPS.

However, when you host your own server you'll often find yourself using a non-standard port, and thus you need to include it in the URLs you use so the browser connects to the right place.

Your own machine is known as 'localhost' or as it's local IP address, '127.0.0.1'. What's important to remember is that every device with networking capabilities of some kind has this address. These so-called 'loopback' addresses is the computer's way of referring to itself, just like you might use the word "me" or "I". Thus, what '127.0.0.1' refers to from your computer is your computer. And what '127.0.0.1' refers to from another computer is that other computer. These addresses can't be used to communicate between devices.

Accessing from another device

Both of the techniques for starting a server listed above will allow you to access your server from another device - as long as your computer and the device are both on the same network.

The first trick is to find what your network address is. In Windows, at the command prompt you can use ipconfig or on Mac/Linux, ifconfig. You have to read through the output of these commands to find your address. Typically it starts with '10.' or '192.'.

An easier option is to install internal-ip-cli:

$ npm install -g internal-ip-cli

and after, run:

$ internal-ip --ipv4

This is the IP address you use to access your server from another device. So, if internal-ip spits out '192.168.1.2', I could load up on my phone: 'http://192.168.1.2:8080', assuming my server is running on port 8080.

Common problems

  • You're not using the right address. Make sure you're not using the loopback (localhost or 127.0.0.1) or other addresses internal to the computer
  • You're not on the same network. Check that you've joined the same wifi access point, for example
  • You've got an over-zealous firewall. Some third-party firewall software prevents remote devices from connecting. You may need to dig into its settings to allow incoming connections on the port your server is using (or temporarily disable it)
  • The network is stopping you. Some public networks prevent devices from connecting to each other. In this case, your best bet it is to start a personal hotspot and connect your devices together on that.

Proper remote access

This all gets you up running pretty nicely if your devices are on the same network. For the most part, when you run your server this way, your computer won't be exposed to the general internet, and for security, that how you want it.

But! You may want to temporarily allow any device to connect to your server. This is useful if you're accessing stuff from devices on mobile networks, or you want to quickly share something with a collaborator. Or perhaps you don't even want to have a server running, what's important is that anyone on the internet can access your sketch.

We suggest three approaches, in increasing levels of fuss.

The first is to use ngrok, which tunnels connections via HTTPS. This can also be useful if an API you're using can only be accessed on secure connections.

With this approach, you still have a server running on your computer. This can be handy if you're taking advantage of devices connected to your computer, like an microprocessor or MIDI controller. Or it might not be what you want, because when your computer sleeps or goes offline, no-one will be able to access your sketch.

You an install ngrok via npm:

$ npm install -g ngrok

Start your live server as usual, but also run ngrok, telling it to tunnel HTTP traffic to your server's port - here we assume it's port 8080:

$ ngrok http 8080

When ngrok starts, it'll print out HTTP and HTTPS URLs you can use to access your server. Note that the URLs will change if ngrok reconnects, and also note that you don't specify the port.

The second approach is to use Firebase, which we describe how to do. It takes a few steps to set it up initially, but once you've done that deploying changes is quick and painless. This works great when all you need to do is serve things that load in the browser.

A third approach is Glitch. Glitch hosts code that runs in the browser and code that runs on the backend, like a web socket server. Glitch basically gives you your own micro server on the real, wild internet, without anything running on your own computer. Furthermore, it has a neat collaborative editing environment so you can work on a project with others.

Remote, cross-platform debugging

If you're running sketches on mobile devices, you might realise that iOS devices can only be debugged from Safari on a Mac, and Android devices can only be debugged from Chrome (although thankfully on any platform).

Here's an alternative for more complicated setups involving different platforms and networks. We're going to use Vorlon and Serveo to help us.

First, install Vorlon.js. It should be as simple as

$ npm install -g vorlon

Once installed, Vorlon can be started via $ vorlon. Vorlon is a tool that allows debug information to pass from a device back to the server. Once you start it, you can open it's dashboard at http://localhost:1337.

The next step is to add a new SCRIPT tag to the sketch you want to debug. In the examples, you'll see they add:

<script src="http://localhost:1337/vorlon.js"></script>

But this doesn't work if your mobile device is accessing your sketch via a proxy or tunnel. Let's set this up now.

Assuming you have an ssh client installed, run:

$ ssh -R 80:localhost:8080 -R 1337:localhost:1337 serveo.net

This bit of magic opens a SSH tunnel to the Serveo service. It tunnels port 80 to the live server running on port 8080 on your computer, and it tunnels port 1337 to Vorlon also running on your computer.

Once you run it, it'll print a message telling you what your randomly generated hostname is. Eg: "Forwarding HTTP traffic from https://blah.serveo.net"

Now that we know what the tunneled location of the sketch will be, we can set the SCRIPT source properly:

<script src="http://blah.serveo.net:1337/vorlon.js"></script>

Of course, use your generated hostname, don't just copy and paste.

Save that, and now boot up live server. On your mobile device, you can now open up http://blah.serveo.net (or whatever your name is) and you should reach the server running on your computer. On your computer, if you look at the Vorlon dashboard, you should see a new client connected, and now you're able to see the console log etc.

When you're done, make sure you shutdown the tunnel, Vorlon and your live server.

In brief

  1. Install Vorlon.js which is a remote debugging server
  2. Start Vorlon: $ vorlon, and open the dashboard in your browser: http://localhost:1337/
  3. Start up a tunnel: $ ssh -R 80:localhost:8080 -R 1337:localhost:1337 serveo.net (assuming your live server is on port 8080)
  4. Edit your sketch HTML, adding a SCRIPT tag to load the Vorlon client-side script: <script src="http://YOURHOSTNAME.serveo.net:1337/vorlon.js"></script>
  5. Start your live server $ live-server . (assuming you want to serve from your current location)
  6. Load your Serveo-tunneled site on your mobile device, http://YOURHOSTNAME.serveo.net