Vite Starter Kit
This guide will walk you through in a step by step flow to configure your development environment to build and deploy a permaweb react application.
Prerequisites
- Basic Typescript Knowledge (Not Mandatory) - [https://www.typescriptlang.org/docs/](Learn Typescript)
- NodeJS v16.15.0 or greater - [https://nodejs.org/en/download/](Download NodeJS)
- Knowledge of ReactJS - [https://reactjs.org/](Learn ReactJS)
- Know git and common terminal commands
Development Dependencies
- TypeScript
- NPM or Yarn Package Manager
Steps
Create Project
if you are not familiar with typescript you can use the template "react" (--template react
)
npm create vite@latest my-arweave-app -- --template react-ts
yarn create vite my-arweave-app --template react-ts
Change into the Project Directory
cd my-arweave-app
Install react-router-dom
You have to install this package to manage routing between different pages
npm install react-router-dom --save
yarn add react-router-dom -D
Run the App
Now we need to check if everything is going Perfect before jumping into next Step, Run
npm run dev
yarn dev
Setup wallet types
If you want to use ArConnect, Arweave.app or other browser-based wallets, you can install ArConnect's types package to have declarations for window.arweaveWallet
.
npm install arconnect -D
yarn add arconnect -D
After installing the package, you'll need to add it to your src/vite-env.d.ts
file.
/// <reference types="arconnect" />
Setup Routing
Now modify the application and add a new routes such as an about page, first create 2 more .tsx files. (if you have used the vanilla JS react template, then make sure your component file extension should be .jsx or .js
)
touch src/HomePage.tsx
touch src/About.tsx
HomePage.tsx
import { Link } from "react-router-dom";
function HomePage() {
return (
<div>
Welcome to the Permaweb!
<Link to={"/about/"}>
<div>About</div>
</Link>
</div>
);
}
export default HomePage;
About.tsx
import { Link } from "react-router-dom";
function About() {
return (
<div>
Welcome to the About page!
<Link to={"/"}>
<div>Home</div>
</Link>
</div>
);
}
export default About;
Modify App.tsx
We need to update the App.tsx to manage different pages
import { HashRouter } from "react-router-dom";
import { Routes, Route } from "react-router-dom";
import HomePage from "./HomePage";
import About from "./About";
function App() {
return (
<HashRouter>
<Routes>
<Route path={"/"} element={<HomePage />} />
<Route path={"/about/"} element={<About />} />
</Routes>
</HashRouter>
);
}
export default App;
Hash Routing
Note that we are wrapping the routes in a HashRouter and using the react-router-dom Link component to build links. This is important on the permaweb in its current state, it will ensure the routes work properly because applications are served on a path like https://[gateway]/[TX]
Deploy Permanently
Generate Wallet
We need the arweave
package to generate a wallet
npm install --save arweave
yarn add arweave -D
then run this command in the terminal
node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json
Update vite config
Make sure you add the base
property to the vite config object and set it to an empty string.
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
base: '',
plugins: [react()],
})
Setup Irys
We need Irys to deploy our app to Permaweb it provides instant data upload and retrieval
npm install --global @irys/sdk
yarn global add @irys/sdk
You will need to add AR to this wallet and fund your Irys wallet to be able to upload this app. See https://irys.xyz and https://www.arweave.org/ for more information.
Update package.json
{
...
"scripts": {
...
"deploy": "irys upload-dir ./dist -h https://node2.irys.xyz --wallet ./wallet.json -t arweave --index-file index.html --no-confirmation"
}
...
}
Run build
Now its time to Generate Build
npm run build
yarn build
Run deploy
Finally we are good to deploy our First Permaweb Application
npm run deploy
yarn deploy
SUCCESS
You should now have a React Application on the Permaweb! Great Job!
ERROR
If you receive this error Not enough funds to send data
, you have to fund some AR into your wallet, and then try to deploy it again.
How do I fund my irys account?
Check balance
irys balance [Address] -h https://node2.irys.xyz -t arweave
Fund Irys
irys fund 20000000000 -t arweave -h https://node2.irys.xyz -w ./wallet.json
INFO
It will take about 20 to 30 minutes for the funds to be deposited into your irys account.