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.
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!
Make sure you have the following software installed on your machine:
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
When you’re done with that, there’s a couple of changes to make in
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
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:
We won’t be explaining this file as it is beyond the scope of this tutorial.
This will create a file in
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
Exercise: Modify the above input form so that the user can only select
.jpg files. See here for a hint.
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
Question: What happens if the user selects more than one file?
<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
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.
Let’s create another folder called
src. Run the following to download
Again, we’ll go through and explain every part of this code.
The first thing we do is import
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.
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
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 your application is easy:
This will generate a
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:
- Select “Do you want to upload the entire directory”?
2. Click “Browse”.
Whichever method you choose, you will want to:
- Upload the
- Follow the returned Skylink to your app.
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.