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 ArDrive and import your wallet. Then, you can purchase turbo credits for your wallet.
Setup Permaweb-Deploy
npm install --global permaweb-deploy
yarn global add permaweb-deploy
Update package.json
{
...
"scripts": {
...
"deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> "
}
...
}
Replace << ANT-PROCESS >> with your ANT process id.
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
ERROR
If you receive an error Insufficient funds
, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits.
Response
You should see a response similar to the following:
Deployed TxId [<<tx-id>>] to ANT [<<ant-process>>] using undername [<<undername>>]
Your React app can be found at https://arweave.net/<< tx-id >>
.
SUCCESS
You should now have a React Application on the Permaweb! Great Job!
Congrats!
You just published a react application on the Permaweb! This app will be hosted forever!