WebTorrent Workshop

00 - Make a simple static site

In this workshop you will create a website for sharing files with others quickly and easily.

In around 100 lines of code you will build a powerful website that delivers files directly between users using peer-to-peer WebRTC technology, without sending the files through a central server.

Since the site is powered by the WebTorrent protocol, you will automatically get swarming behavior, which means that if one person wants to share a file to 100 people (say by tweeting it out to your followers), it will scale very well. Any peer which has a piece of the file will be able to share it with other peers that don’t have it yet. The initial sharer of the file won’t have to do all of the work sending 100 individual copies of the file to each of the 100 people who want it. Very powerful! And you won’t need to write any extra code to get this behavior.

Unlike traditional web server architectures which slow down the more users they get, WebTorrent-powered sites get faster and more resilient the more users who join. It’s people power in action!

You can see an example of the kind of site we will be building at Instant.io

Let’s get started by setting up a simple static site.

Tips

We recommend using CodePen to work through the workshop (to save time setting up a local environment).

This entire site can be built with about 100 lines of HTML, CSS, and JavaScript. We will guide you throughout.

Like in the last workshop, to start using WebTorrent, simply include the webtorrent.min.js script on your page.

<script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>

This provides a WebTorrent function on the global window object.

Next, let’s include some HTML to show a title for our website:

<section>
  <h1>Instant File Sharing ⚡️</h1>
</section>

Pro Tip: Replace the ⚡️ with your own favorite emoji!

Next, let’s include some CSS that will improve the styles of our page a bit:

html, body {
  font-family: sans-serif;
}

section {
  max-width: 800px;
  margin: 0 16px;
}

video, img, audio, iframe, object {
  display: block;
}

video, img, audio {
  max-width: 100%;
  margin: 10px 0;
}

video {
  min-width: 480px;
  min-height: 270px;
}

audio {
  width: 100%;
  height: 50px;
}

iframe, object {
  width: 1000px;
  max-width: 100%;
  height: 600px;
}

body.drag::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(#F8283B, 0.3);
  border: 5px #F8283B dashed;
}

Verify

Your page should look like this, except with your own emoji :)

If you are stuck, read the solution.

When you are ready, go to the next exercise.