Creating Your First Web App on Skynet

Today we are going to present a tutorial for building on Skynet. People have been using Skynet not just for sharing data, but also to host entire web applications called “Skapps”, including an impressive livestreaming platform. Skynet is an open protocol for hosting applications and data. Unlike typical web applications, data is controlled by users and hosted on a decentralized cloud. You can read more about Skynet on the website.

In this tutorial, we’ll be loosely following the Skynet-workshop repo, which itself is based on our video tutorial. We’ll go through and create a simple application together that takes an image from the user and generates their own media page on Skynet. It will look like this:

Try the app out for yourself here. For more inspiration, check out the Skynet Appstore.

Prerequisites

The goal of this tutorial is to make your introduction to web development on Skynet as smooth as possible. However, some minimal prior experience with HTML, JS, and the command line may be required. If anything is unclear, check out MDN or ask one of us on Discord!

Software

Make sure you have the following software installed on your machine:

• git
• Node.js

Setting Up The Project

Initialization

Let’s use the command line to make a new directory for our project and enter into it:

Initialize an empty git repository for version control:

Now initialize a brand new NPM project in the directory:

Running this will bring up a series of prompts allowing you to customize your project. Accept the defaults or change them at your leisure. You can always edit your project’s settings in package.json after.

When you’re done with that, there’s a couple of changes to make in package.json:

Installing Dependencies

We’ll be using Webpack, a standard way of packaging web applications into standalone bundles. Let’s add webpack as a dev dependency to our project:

You’ll also want to install our Browser JS SDK, which is the library that allows us to make Skynet calls in our applications:

You’ll notice that a directory called node_modules/ was generated. This contains our app's dependencies -- generally you don't want to commit this into version control, so let's ignore it. Create a file called .gitignore with the contents

Adding The CSS

First, we want to add a CSS file for styling, so that our application looks nice. Create a folder called dist and run the following command:

This will create a file called style.css in your dist folder. It should look like this:

https://gist.github.com/m-cat/753cd0d1a0ae4131428b849b7a4b26ee

We won’t be explaining this file as it is beyond the scope of this tutorial.

Adding The HTML

Now we’ll be creating the structure of the app in HTML. This will provide the layout of the page; we’ll add interactivity and behavior to our app later, using Javascript.

This will create a file in dist called index.html. A file with this filename, if it exists, is loaded by default whenever a Skapp is opened.

Let’s go through everything, piece by piece.

This is the start of our HTML. We provide a header, which defines the title and links to the CSS file we are using.

Exercise: Replace the title of this app with a different one.

Next, we begin the body which defines the actual visible layout of the page. Here we provide the top-level h1 header, as well as the form that allows the user to pick a media file to upload. We give this form the #mediaFile ID. Input forms are the only way the browser can access the user's local files.

Exercise: Modify the above code to inform the user that they must pick a .jpg file.

Exercise: Modify the above input form so that the user can only select .jpg files. See here for a hint.

What we have so far.

This is a span with the ID #file-selected. Here we will display the path of the file once it's been selected. Until then, this <span> element is not visible.

The comments here are fairly self-explanatory. The onclick event specifies what happens when the "Create Media Page" button is clicked. It will fire the createMediaPage function with the selected media file as input; this function is defined in the Javascript file we look at later.

Question: What happens if the user selects more than one file?

This <a> element is another empty HTML element that is used to fill in the generated Skylink after the user creates his media page.

Here we include two scripts. The first is main.js, the Webpack bundle that we will generate later from our Javascript code. This script provides the createMediaPage function that is triggered when clicking "Create Media Page".

In the second script, we select the input form with the mediaFile ID and add an event listener: for any change in the input-form, we update the text content to be the path of the selected file.

Adding The Javascript

Let’s create another folder called src. Run the following to download src/index.js:

Again, we’ll go through and explain every part of this code.

The first thing we do is import SkynetClient from skynet-js and create a new client:

The client can be created with additional, optional parameters, such as the address of the portal to upload to. For this example, we call SkynetClient without any parameters to let the SDK use the portal that our Skapp is running from. For more about the Skynet client, see the docs.

Here we start defining the createMediaPage function. The function takes a file from an input form as its only parameter.

Note: The window. part before the function name is required in order to make the function globally accessible from a Webpack bundle.

We’ll be generating a new page on Skynet that displays the media file uploaded by the user. So, the first thing we do in createMediaPage is define what we want the new page to look like. Note that it contains complete HTML and that we include an image with the source media.jpg. This will be the name of the user-selected media file.

Exercise: Feel free to make the generated page more interesting in any way you wish!

Here we construct the directory that we upload to Skynet. It actually consists of two files: an index.html which contains pageContent, and media.jpg which is the image file uploaded by the user.

Exercise: Modify the code so that media files other than .jpg also work. The code should transform pageContent so that it points to a file of the correct file extension.

Here we finally call the Skynet SDK to upload the files! First though, we create a try-catch block and an async function, since Skynet is an asynchronous library that throws errors. Then, we call the uploadDirectory method on client, passing in the directory of two files we created and calling it "mediaFolder". This returns a Skylink which we then display to the user.

Exercise: Now that you’ve seen all of the code, here’s a final exercise: Modify the app to allow the user to upload multiple files at once.

Building And Deploying Your Application

Building your application is easy:

This will generate a dist/main.js Javascript bundle which is the source script, referenced by our dist/index.html file.

To make your application accessible across Skynet you will need to upload it to a Skynet portal. We maintain the user-friendly siasky.net webportal but you can also use the command-line interface. There are three steps to using siasky.net:

1. Select “Do you want to upload the entire directory”?

2. Click “Browse”.

3. Select dist.

Whichever method you choose, you will want to:

1. Upload the dist directory.
2. Follow the returned Skylink to your app.

That’s it!

Conclusion

That’s it! We hope that this tutorial was informative and helpful. Feel free to play around with the application and make further changes, or even use it as a starting point for your own ideas.

More Resources

• Skynet (introductory blog post)
• Skynet SDKs — Developer Tools (blog post)
• Skynet Docs
• Sia API Documentation