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:
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!