• About
• Installing
• Usage
• Contributing

Web Bundlr is a CLI tool to deploy web apps to Arweave using Bundlr. Arweave is a protocol that allows you to store data permanently, sustainably, with a single upfront fee and Bundlr Network is a reliable multichain solution for Arweave which is building the future of data storage by bringing the speed and ease of web2 to web3 technology. Learn more about Bundlr and Arweave.

Note: Deploy using Devnet bundlr first to check everything is working and then deploy using production bundlr.

Install the package using npm or yarn as desired to get started.

npm install -g web-bundlr

OR

yarn add global web-bundlr

Lets go through steps on how to use web-bundlr in your projects to deploy apps.

Note: Use hash router in react, vue, and nuxt based apps. For next apps there is no hash based routing so manifest is adjusted for routes to work on reload but dynamic routes may not work on reload.

Note: Use HashRouter from react-router-dom in react apps. Check project examples

Learn about it here for the supported and unsupported features in static html export.

If you are having problems regarding images in nextjs html export, see here.

Modify vue.config.js or vue.config.ts to include the following config:

publicPath: "./" // default is /

Modify nuxt.config.js or nuxt.config.ts to include the following config:

target: 'static', // default is 'server'
router: {
  mode: 'hash',
  base:  './'
}

Read more about going full static mode in nuxtjs Going Full Static

Note: Use hash router for react, vue and svelte accordingly.

Examples of react, vue and svelte using vite is included in the examples folder.

And now you have to add config file for web-bundlr to upload the production build to arweave.

Run this command to add configuration file for web-bundlr.

web-bundlr init

Now modify the configuration file (web-bundlr.config.js) as per your need from the following:

Example of web-bundlr.config.js for different currency can be:

For Polygon (MATIC) on testnet.

/** @type {import('web-bundlr').WebBundlrConfig} */

const WebBundlrConfig = {
  url: "https://devnet.bundlr.network",
  currency: "matic"
  wallet: "<private-key>",
  folderPath: "build",
  appType: "react",
  config: {
    providerUrl: "https://rpc.ankr.com/polygon_mumbai",
  },
};

export default WebBundlrConfig;

For Solana:

/** @type {import('web-bundlr').WebBundlrConfig} */

const WebBundlrConfig = {
  url: "https://devnet.bundlr.network",
  currency: "solana"
  wallet: "<private-key>",
  folderPath: "out",
  appType: "next",
  config: {
    providerUrl: "https://api.devnet.solana.com",
  },
};

export default WebBundlrConfig;

For ERC20 Tokens:

For example chainlink on Goerli testnet

/** @type {import('web-bundlr').WebBundlrConfig} */

const WebBundlrConfig = {
  url: "https://devnet.bundlr.network",
  currency: "chainlink"
  wallet: "<private-key>",
  folderPath: "dist",
  appType: "vue",
  config: {
    providerUrl: "https://rpc.ankr.com/eth_goerli",
    contractAddress: "0x326C977E6efc84E512bB9C30f76E30c160eD06FB"
  },
};

export default WebBundlrConfig;

After the configuration, run web-bundlr command from the root folder of the project.

web-bundlr deploy

You have to fund the bundlr with the currency you have configured. The CLI will show how much bytes is going to be uploaded and how much amount in configured currency is required to perform the upload and it will ask for funding if the loaded balance is not sufficient.

After apps are deployed, configure ArNS from Permapages for the deployed app.

👤 Pawan Paudel

• Github: @pawanpaudel93

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Give a ⭐️ if this project helped you!

Copyright © 2022 Pawan Paudel.