Cookbook Community Meetup - 12pm ET / 5pm GMT every week on Wednesdays



Contributors: Tom Wilson
Last Updated:

React Starter Kit w/vite & ArDrive

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.


  • Basic Typescript Knowledge (Not Mandatory) - [](Learn Typescript)
  • NodeJS v16.15.0 or greater - [](Download NodeJS)
  • Knowledge of ReactJS - [](Learn ReactJS)
  • Know git and common terminal commands

Development Dependencies

  • TypeScript
  • NPM or Yarn Package Manager


Install ardrive cli

npm i -g ardrive-cli

NOTE: if you do not have a wallet, lets create one for uploading apps.

Create Seed Phrase

ardrive generate-seedphrase

Copy the output to use to generate wallet

Create Wallet

ardrive generate-wallet -s "SEED_PHRASE_FROM_ABOVE" > wallet.json

Create React App

yarn create vite my-arweave-app --template react-ts
cd my-arweave-app

Add React Router DOM

yarn add react-router-dom

We need to use the hash-router to create a working app on arweave.

Page Components

touch src/Home.tsx src/About.tsx


import { Link } from "react-router-dom";

function Home() {
	return (
			Welcome to the Permaweb!
			<Link to={"/about/"}>

export default Home;


import { Link } from "react-router-dom";

function About() {
	return (
			Welcome to the About page!
			<Link to={"/"}>

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 Home from "./Home";
import About from "./About";

function App() {
	return (
				<Route path={"/"} element={<Home />} />
				<Route path={"/about/"} element={<About />} />

export default App;

Modify index.css

Alter the body selector

body {
  margin: 0;
  padding-top: 200px;
  display: flex;
  flex-direction: column;
  place-items: center;
  min-width: 100%;
  min-height: 100vh;
yarn dev

Building React App

Modify vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: "",
  plugins: [react()],

Build App

yarn build

Publishing to Arweave

create drive

ardrive create-drive -w ../wallet.json -n my-arweave-app --turbo

create folder

ardrive create-folder -w ../wallet.json -n "v1" -F __ROOT_FOLDER_ID__ --turbo
export V1=__FOLDER_ID__

upload files

cd dist
ardrive upload-file -w ../../wallet.json -l ./ -F ${V1} --turbo

create manifest

cd ..
ardrive create-manifest -w ../wallet.json -f ${V1} --turbo --dry-run

NOTE: We need to grab the manifest object and edit it, we need to change the index to point to "index.html", and remove all of the "./" for each path, save file as manifest.json in the app root directory.

ardrive upload-file -w ../wallet.json -l ./manifest.json --content-type application/x.arweave-manifest+json -F ${V1} --turbo


You just published a react application on the Permaweb! This app will be hosted forever!