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



Contributors: Vince Juliano, VinceJuliano, mrsaifullah52, Luke Cassady-Dorion, mrsaifullah52
Last Updated:

Create React App 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.


  • 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 Project

If you are not familiar with typescript you can exclude the extra check --template typescript

npx create-react-app permaweb-create-react-app --template typescript
yarn create react-app permaweb-create-react-app --template typescript

Change into the Project Directory

cd permaweb-create-react-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 working before jumping into next step, run

npm start
yarn start
This will start a new development server locally on your machine. By default it uses `PORT 3000`, if this PORT is already in use it may ask you to switch to another available PORT in Terminal

Modify the package.json to contain the following config

  "homepage": ".",

Setup Routing

Now modify the application and add a new route such as an about page, first create 2 more .tsx files. (if you have exluceded the extra check --template typescript, then your component file extension should be .jsx or .js)

touch src/HomePage.tsx
touch src/About.tsx


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

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

export default HomePage;


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 the 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 (
				<Route path={"/"} element={<HomePage />} />
				<Route path={"/about/"} element={<About />} />

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

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.xyzopen in new window and in new window for more information.

Update package.json

  "scripts": {
    "deploy": "irys upload-dir ./build -h --wallet ./wallet.json -c arweave --index-file index.html --no-confirmation"

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


You should now have a React Application on the Permaweb! Great Job!


If you receive this error Not enough funds to send data, you have to fund some AR into your Irys wallet, and then try to deploy it again, run

irys fund 1479016 -h -w wallet.json -c arweave
irys fund 1479016 -h -w wallet.json -c arweave

The above number 1479016 is an amount of AR expressed in winston, the smallest unit of AR. This will take some time to propagate to your Irys wallet. Come back in 10-20 minutes and try to run the deployment again.


A completed version of this example is available here: in new window


This is a Create React App version of publishing a React app on the permaweb. You may discover new ways to deploy an app on the permaweb or checkout other starter kits in this guide!