Skip to main content

Bundlr + Uploading Websites

You can use Bundlr to upload entire static websites directly to the permaweb using only a few lines of code. You can use both the uploadFolder() function in the SDK and the upload-dir command with the CLI.

When you upload an entire folder of assets to Bundlr at the same time, two link structures are generated. You can download each asset directly using the transaction id generated when uploading that unique asset. You can also download each asset using a link generated by combining the manifest id generated for the entire folder upload with the relative path to the file.

For example, if you upload a folder with the following structure:

index.html
styles.css
images/hero.jpg
images/logo.png

you can download the logo with the link https://arweave.net/[manifest-id]/images/logo.png. Because relative paths are maintained, as long as your website uses relative links, you will not need to change any of your HTML when moving to the permaweb.

A Sample Website To Upload​

In our Bundlr Basics repository on GitHub, there is a small example website. The structure is as follows:

index.html
styles.css
images/1.png
images/2.png
images/3.png
images/4.png
images/5.png

The index.html file loads the styles in styles.css and then displays the images along with some example text. All links inside index.html are relative; there are no absolute links. Here's what it looks like:

And here it is served from the permaweb: https://arweave.net/kG358dvaEJUTKqNkZPmP8276ObdnBZxLL4l27bk2Y9w

Using The SDK​

You can upload the entire website using the SDK's bundlr.uploadFolder() function. The code is also contained in the Bundlr Basics repository.

// Connect to a Bundlr node
const bundlr = new Bundlr("http://node1.bundlr.network", "arweave", privateKey);

try {
    // Call upload folder.
    // You MUST pass the name of your main index file as the indexFile parameter
    const response = await bundlr.uploadFolder("../assets/example_spa/", {
        indexFile: "index.html",
    });

    // This URL will now load your entire website from the permaweb
    console.log(`SPA Uploaded https://arweave.net/${response.id}`);
} catch (e) {
    console.log("Error uploading file ", e);
}

Using The Command Line​

You can also achieve something similar using our CLI. Make sure to change the parameter options to provide your own private key and the name of your site's main index file.

cd bundlr-basics/assets
bundlr upload-dir example_spa --index-file index.html -c arweave -h http://node1.bundlr.network -w privateKey.json