# 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.

# 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 React App

npm create vite my-arweave-app --template react-ts
cd my-arweave-app
npm install

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

# Add React Router DOM

npm install 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

src/Home.tsx

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

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

export default Home;

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

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

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;
}

Run the project

npm run dev

yarn dev

# Building React App

# Modify vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  base: "",
  plugins: [react()],
})

# Build App

yarn build

# 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

# Fund Wallet

You will need to fund your wallet with ArDrive Turbo credits. To do this, enter ArDriveopen in new window and import your wallet. Then, you can purchase turbo credits for your wallet.

# Setup Permaweb-Deploy

npm install --save-dev permaweb-deploy

yarn add permaweb-deploy --dev --ignore-engines

# Update package.json

{
  ...
  "scripts": {
    ...
    "deploy": "npm run build && permaweb-deploy --arns-name my-react-app"
  }
  ...
}

# Run build

Now it is time to generate a build, run

npm run build

yarn build

# Run deploy

Finally we are good to deploy our first Permaweb Application

npm run deploy

yarn deploy

# Response

You should see a response similar to the following:

-------------------- DEPLOY DETAILS --------------------
Tx ID: abc123def456ghi789jkl012mno345pqr678stu901v
ArNS Name: my-react-app
Undername: @
ANT: xyz789abc012def345ghi678jkl901mno234pqr567s
AR IO Process: bh9l1cy0aksiL_x9M359faGzM_yjralacHIUo8_nQXM
TTL Seconds: 3600
--------------------------------------------------------
Deployed TxId [abc123def456ghi789jkl012mno345pqr678stu901v] to name [my-react-app] for ANT [xyz789abc012def345ghi678jkl901mno234pqr567s] using undername [@]

Your React app can be found at https://my-react-app.arweave.net (if using ArNS) or https://arweave.net/abc123def456ghi789jkl012mno345pqr678stu901v.

# Congrats!

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