Part 2: Upload a Web Page

The Context

In Part 1, our app successfully uploaded a file to Skynet. Now we'll build on that code to upload a web page.
Our webpage's HTML will be generated using the code in /src/helpers/generateWebPage.js . Any This webpage will reference the skylink from Part 1 to display our upload in an <img> component.
The upload will be a directory defined by a JSON object. We'll title the webpage index.html so that Skynet will serve the webpage if anyone visits the skylink.

The Code

In addition to files, Skynet can receive directory uploads. Once uploaded to Skynet, any directory with an index.html will load in your browser just like any website. This enables developers to write and deploy their web app, just by uploading the project's build folder.
1. First, create the upload directory functionality. Back in handleSubmit inside src/App.js, paste this code in the area for Step 2.1.
1
// Create the text of an html file what will be uploaded to Skynet
2
// We'll use the skylink from Part 1 in the file to load our Skynet-hosted image.
3
const webPage = generateWebPage(name, skylinkUrl);
4
5
// Build our directory object, we're just including the file for our webpage.
6
const webDirectory = {
7
'index.html': webPage,
8
// 'couldList.jpg': moreFiles,
9
};
10
11
// Upload user's webpage
12
const { skylink: dirSkylink } = await client.uploadDirectory(
13
webDirectory,
14
'certificate'
15
);
16
17
// Generate a URL for our current portal
18
// We'll use a subdomain-style link
19
const dirSkylinkUrl = await client.getSkylinkUrl(dirSkylink, {
20
subdomain: true,
21
});
22
23
console.log('Web Page Uploaded:', dirSkylinkUrl);
24
25
// To use this later in our React app, save the URL to the state.
26
setWebPageSkylink(dirSkylink);
27
setWebPageSkylinkUrl(dirSkylinkUrl);
Copied!
2. Above this code, uncomment console.log('Uploading web page...');
3. Test it out! Now the user can submit their name and photo to generate their very own web page on Skynet!

The Result

Our finished webpage, referencing the skylink of our uploaded image.
Last modified 1mo ago