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



Contributors: Weronika K
Last Updated:

React Starter Kit with Vite & Akord

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


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

Install Akord CLI

Requires NodeJS -

yarn global add @akord/akord-cli

Login to Akord (you can create an account hereopen in new window)

akord login {your_email_address}

Deploy your app

akord deploy ./dist 'My perma app'


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

Resources & further reading