Host web application with IPFS

Uploading an app to decentralized storage offers perks such as reliable data, resistance to censorship, and better user data control. It is also more secure, scalable, and globally accessible.

Deploy a web app to decentralized storage (IPFS) using the CLI.

Prerequisites

configure clientId through <ThirdwebProvider> in your app
login to the thirdweb CLI using your clientId and SecretKey

Using Starter Templates

Starter templates are already pre-configured and set up for IPFS deployments.

To deploy an app to IPFS from a starter template:

Run the following command at the root of your project's directory:


npm run deploy

Upon executing this script, the application will be constructed, and subsequently, the contents of the dist output directory will be uploaded to IPFS.

Once deployed successfully, the CLI will return the corresponding deployed URI and Gateway link.

Upload in Your Existing App

To deploy to IPFS using your existing app, we will highlight the fields needed in your configuration files before running deploy in the following frameworks: React, Next, and Vite

To deploy your app to IPFS in React:

Navigate to your package.json file in your project

Add a homepage field and set it to "."


{
  ...
  "homepage": ".",
  ...
}

In the same file, add the following deploy script.


{
  ...
  "scripts": {
    ...
    "deploy": "yarn build && npx thirdweb@latest upload build"
  }
}

Depending on your package manager, run one of the following commands at the root directory of your project:
npm run deploy
Once deployed successfully, the CLI will return the corresponding deployed URI and Gateway link.