Permanently deploy a decentralized React frontends to Arweave

We will be building a very simple React app that lets people connect their wallets, and deploy it to Arweave.

Requirement

• Vite: Next.js is basically a server that serves webpages. We use Vite instead of Next.js because Vite runs fully on the client-side i.e. in the browser. For a frontend to be really decentralized, it should ideally be running fully on the client.

• Node.js: Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications

• Yarn: A package manager for JavaScript

• RainbowKit: For connecting a wallet

Project setup with Vite+Yarn:

Now the app will be live on http://localhost:3000

Building out the UI

• Modify main.jsx & App.jsx to change the conten,layout and functionality of our app.
• Modify vite.config.js & package.json to change the configuration and dependency of our app.

In a new terminal

After this make sure wallet.json is created at the root of your project. The wallet.json file contains the seed phrase/private key for your Arweave wallet so let's make sure it does not get committed to Git:

   echo "wallet.json" >> .gitignore

Arweave deployment

Now run yarn deploy at the root of your project to deploy our react app!

This page will now live on Arweave FOREVER, with each update to the webpage generates a new url. Make sure the new url is updated under About in Github repo. Current url: https://arweave.net/M-dpxq6UhWzKagvu1CedA8hMBULprkK2wVnmFdRMclA

Footnote: original tutorial can be found here