Host Web App

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:

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

npm

npm run deploy

yarn

yarn deploy

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

2. 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

Upload a React App to IPFS

To deploy your app to IPFS in React:

1. Navigate to your package.json file in your project

2. Add a homepage field and set it to "."

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

3. In the same file, add the following deploy script.

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

4. Depending on your package manager, run one of the following commands at the root directory of your project:

   npm run deploy

   or

   yarn deploy

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

Upload a Next app to IPFS

To deploy your app to IPFS from Next:

1. Navigate to the package.json file in your project.

2. Add the following deploy script

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

3. Depending on your package manager, run one of the following commands at the root directory of your project to run the script:

   npm run deploy

   or

   yarn deploy

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

Upload a Vite app to IPFS

To deploy your app to IPFS from Vite:

1. Navigate to the vite.config.js

2. Set the base field in your defaultConfig to ./

   const defaultConfig = {
     base: "./",
     plugins: [react()],
   };

3. Navigate to your package.json file and add the following deploy script

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

   When running this script, your application will be built, and the output directory dist will be uploaded to IPFS, effectively deploying your application.

4. Depending on your package manager, run one of the following commands at the root directory of your project to run the script:

   npm run deploy

   or

   yarn deploy

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