Host Your Web Application On IPFS

In this guide, we'll show you how to deploy your web applications to IPFS! We'll cover all of the most popular frameworks such as Create React App, Vite, and Next.js!

By the end, you'll have your app hosted and accessible using an IPFS Gateway; such as this demo deployment.

Before we get started, below are some helpful resources where you can learn more about the tools we will use in this guide:

• Storage
• CLI

Let's get started.

New Projects

If you're starting from scratch, all of our starter templates come pre-configured and set up for IPFS deployments.

npx thirdweb create app # Create a new application

npm run deploy # Deploy your app to IPFS

Below, we'll show you how to set up your applications from scratch for IPFS deployments.

Create React App

In your package.json file, add a homepage field and set it to ".":

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

Then, create a new deploy script in your package.json file like this:

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

When you run this script, it will build your application and upload the output directory build to IPFS, which effectively deploys your application.

Now you can run this script in your terminal:

npm run deploy # npm

yarn deploy # yarn

After you run this command, you will be prompted to enter your API key:

Once you have done that, it will upload your app to ipfs! You can send this gateway link to anyone, and they will be able to see your website 🥳

Vite

In your vite.config.js file, set the base in your defaultConfig to ./:

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

Then, inside your package.json file, add a new deploy script like this:

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

When you run this script, it will build your application and upload the output directory dist to IPFS, which effectively deploys your application.

Now you can run this script in your terminal:

npm run deploy # npm

yarn deploy # yarn

After you run this command, you will be prompted to enter your API key:

You can send this gateway link to anyone, and they will be able to see your website 🥳

Next.js

Inside your package.json file, create a new deploy script with the following logic:

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

This will build and export your Next.js project, and upload the HTML output in the build directory to IPFS, where you can interact with your application.

Now you can run this script in your terminal:

npm run deploy # npm

yarn deploy # yarn

After you run this command, wait for your app to build.

Wait for your app to build, then you will be prompted to enter your API key:

You can send this gateway link to anyone, and they will be able to see your website 🥳

Conclusion

In this guide, we learned how to deploy your react apps to IPFS!

Share your amazing Dapps hosted on IPFS that you built on the thirdweb discord!