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

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

# 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

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

# 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

# Update package.json

{
  ...
  "scripts": {
    ...
    "deploy": "irys upload-dir ./build -h https://node2.irys.xyz --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

irys fund 1479016 -h https://node1.irys.xyz -w wallet.json -c arweave

irys fund 1479016 -h https://node1.irys.xyz -w wallet.json -c arweave

# Repository

A completed version of this example is available here: https://github.com/VinceJuliano/permaweb-create-react-appopen in new window

# Summary

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!