# 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 ArConnectopen in new window, Arweave.appopen in new window 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;

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

# Setup Turbo

We need Turbo to deploy our app to the Permaweb.

npm install @ardrive/turbo-sdk

yarn add @ardrive/turbo-sdk

# Fund Your Wallet

Turbo uses Turbo Credits to upload data to Arweave. You can purchase Turbo Credits with a variety of fiat currencies or crypto tokens. Below is an example for funding your wallet with 10 USD. It will open a browser window to complete the purchase using Stripe.

turbo top-up --wallet-file wallet.json --currency USD --value 10

Be sure to replace wallet.json with the path to your Arweave wallet.

# Update package.json

{
  ...
  "scripts": {
    ...
    "deploy": "turbo upload-folder --folder-path ./build --wallet-file wallet.json > latest-manifest.json"
  }
  ...
}

This will upload your build folder to the permaweb, and save all of the details of the upload to a file named "latest-manifest.json". That way, you'll have a reference for the manifest TxId to use later.

# 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