Merge pull request #339 from twilson63/jfrain99/migrate-starter-kits-…

…to-permaweb-deploy

migrate starter kits to permaweb deploy

.vite/deps_temp_801fad7e/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

docs/src/kits/README.md

@@ -2,6 +2,6 @@
 
 Starter kits are boiler plate repositories for specific frameworks configured and ready to go, to build on the permaweb.
 
--   [Svelte](./svelte/index.md)
 -   [React](./react/index.md)
+-   [Svelte](./svelte/index.md)
 -   [Vue](./vue/index.md)

docs/src/kits/react/create-react-app.md

@@ -130,7 +130,7 @@ import { Link } from "react-router-dom";
 
 function About() {
 	return (
-		<div>
+    <div>
 			Welcome to the About page!
 			<Link to={"/"}>
 				<div>Home</div>
@@ -202,30 +202,32 @@ 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
+### Fund Wallet
+You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet.
+Then, you can purchase turbo credits for your wallet.
 
-We need Irys to deploy our app to Permaweb it provides instant data upload and retrieval
+### Setup Permaweb-Deploy
 
 <CodeGroup>
   <CodeGroupItem title="NPM">
 
 ```console:no-line-numbers
-npm install --global @irys/sdk
+npm install --global permaweb-deploy
 ```
 
   </CodeGroupItem>
   <CodeGroupItem title="YARN">
 
 ```console:no-line-numbers
-yarn global add @irys/sdk
+yarn global add permaweb-deploy
 ```
 
   </CodeGroupItem>
 </CodeGroup>
 
-::: info
+<!-- ::: info
 You will need to add AR to this wallet and fund your Irys wallet to be able to upload this app. See [https://irys.xyz](https://irys.xyz) and [https://www.arweave.org/](https://www.arweave.org/) for more information.
-:::
+::: -->
 
 ### Update package.json
 
@@ -234,12 +236,16 @@ You will need to add AR to this wallet and fund your Irys wallet to be able to u
   ...
   "scripts": {
     ...
-    "deploy": "irys upload-dir ./build -h https://node2.irys.xyz --wallet ./wallet.json -c arweave --index-file index.html --no-confirmation"
+    "deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> --deploy-folder build"
   }
   ...
 }
 ```
 
+::: info
+Replace << ANT-PROCESS >> with your ANT process id.
+:::
+
 ### Run build
 
 Now it is time to generate a build, run
@@ -282,33 +288,22 @@ yarn deploy
   </CodeGroupItem>
 </CodeGroup>
 
-::: tip SUCCESS
-You should now have a React Application on the Permaweb! Great Job!
-:::
-
 ::: info ERROR
-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
+If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits.
 :::
 
-<CodeGroup>
-  <CodeGroupItem title="NPM">
-
-```console:no-line-numbers
-irys fund 1479016 -h https://node1.irys.xyz -w wallet.json -c arweave
-```
+### Response
 
-  </CodeGroupItem>
-  <CodeGroupItem title="YARN">
-
-```console:no-line-numbers
-irys fund 1479016 -h https://node1.irys.xyz -w wallet.json -c arweave
+You should see a response similar to the following:
+
+```shell
+Deployed TxId [<<tx-id>>] to ANT [<<ant-process>>] using undername [<<undername>>]
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+Your React app can be found at `https://arweave.net/<< tx-id >>`.
 
-::: info
-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.
+::: tip SUCCESS
+You should now have a React Application on the Permaweb! Great Job!
 :::
 
 ## Repository

docs/src/kits/react/index.md

@@ -6,10 +6,10 @@ can be uploaded as a transaction to the permaweb where it will serve as a single
 
 React Starter Kit Guides:
 
-* [Turbo](./turbo.md) - React + Vite, publish with Turbo
-* [Vite](./vite.md) - utilize Vite to build a React permaweb app
+* [Vite](./turbo.md) - React + Vite, publish with permaweb-deploy
 * [Create React App](./create-react-app.md) - utilize Create React App to build a React permaweb app
 * [Akord](./akord.md) - React + Vite, deploy with Akord
+<!-- * [Vite](./vite.md) - utilize Vite to build a React permaweb app -->
 
 
 ::: info Permaweb Application Constraints

docs/src/kits/react/turbo.md

@@ -16,42 +16,49 @@ This guide will walk you through in a step by step flow to configure your develo
 
 ## Steps
 
-### Install ardrive cli
+### Create React App
+
+<CodeGroup>
+<CodeGroupItem title="NPM">
 
 ```sh
-npm i -g ardrive-cli
+npm create vite my-arweave-app --template react-ts
+cd my-arweave-app
+npm install
 ```
 
-> NOTE: if you do not have a wallet, lets create one for uploading apps.
-
-### Create Seed Phrase
+</CodeGroupItem>
+<CodeGroupItem title="YARN">
 
 ```sh
-ardrive generate-seedphrase
+yarn create vite my-arweave-app --template react-ts
+cd my-arweave-app
+yarn
 ```
 
-Copy the output to use to generate wallet
-
-### Create Wallet
+</CodeGroupItem>
+</CodeGroup>
 
-```sh
-ardrive generate-wallet -s "SEED_PHRASE_FROM_ABOVE" > wallet.json
-```
+### Add React Router DOM
 
-### Create React App
+<CodeGroup>
+<CodeGroupItem title="NPM">
 
 ```sh
-yarn create vite my-arweave-app --template react-ts
-cd my-arweave-app
-yarn
+npm install react-router-dom
 ```
 
-### Add React Router DOM
+</CodeGroupItem>
+<CodeGroupItem title="YARN">
 
 ```sh
 yarn add react-router-dom
 ```
 
+</CodeGroupItem>
+</CodeGroup>
+
+
 We need to use the hash-router to create a working app on arweave.
 
 ### Page Components
@@ -139,10 +146,25 @@ body {
 }
 ```
 
+Run the project
+<CodeGroup>
+<CodeGroupItem title="NPM">
+
+```sh
+npm run dev
+```
+
+</CodeGroupItem>
+<CodeGroupItem title="YARN">
+
 ```sh
 yarn dev
 ```
 
+</CodeGroupItem>
+</CodeGroup>
+
+
 ### Building React App
 
 #### Modify vite.config.ts
@@ -163,41 +185,138 @@ export default defineConfig({
 yarn build
 ```
 
-### Publishing to Arweave
+### Deploy Permanently
 
-#### create drive
+#### Generate Wallet
 
-```sh
-ardrive create-drive -w ../wallet.json -n my-arweave-app --turbo
+We need the `arweave` package to generate a wallet
+
+<CodeGroup>
+<CodeGroupItem title="NPM">
+
+```console:no-line-numbers
+npm install --save arweave
+```
+
+  </CodeGroupItem>
+  <CodeGroupItem title="YARN">
+
+```console:no-line-numbers
+yarn add arweave -D
 ```
 
-#### create folder
+  </CodeGroupItem>
+</CodeGroup>
+
+then run this command in the terminal
 
 ```sh
-ardrive create-folder -w ../wallet.json -n "v1" -F __ROOT_FOLDER_ID__ --turbo
-export V1=__FOLDER_ID__
+node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json
 ```
 
-#### upload files
+#### Fund Wallet
+You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet.
+Then, you can purchase turbo credits for your wallet.
 
-```sh
-cd dist
-ardrive upload-file -w ../../wallet.json -l ./ -F ${V1} --turbo
+#### Setup Permaweb-Deploy
+
+<CodeGroup>
+  <CodeGroupItem title="NPM">
+
+```console:no-line-numbers
+npm install --global permaweb-deploy
+```
+
+  </CodeGroupItem>
+  <CodeGroupItem title="YARN">
+
+```console:no-line-numbers
+yarn global add permaweb-deploy
 ```
 
-#### create manifest
+  </CodeGroupItem>
+</CodeGroup>
 
-```sh
-cd ..
-ardrive create-manifest -w ../wallet.json -f ${V1} --turbo --dry-run
+<!-- ::: info
+You will need to add AR to this wallet and fund your Irys wallet to be able to upload this app. See [https://irys.xyz](https://irys.xyz) and [https://www.arweave.org/](https://www.arweave.org/) for more information.
+::: -->
+
+#### Update package.json
+
+```json
+{
+  ...
+  "scripts": {
+    ...
+    "deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> "
+  }
+  ...
+}
 ```
 
-> NOTE: We need to grab the manifest object and edit it, we need to change the index to point to "index.html", and remove all of the "./" for each path, save file as manifest.json in the app root directory.
+::: info
+Replace << ANT-PROCESS >> with your ANT process id.
+:::
 
-```sh
-ardrive upload-file -w ../wallet.json -l ./manifest.json --content-type application/x.arweave-manifest+json -F ${V1} --turbo
+#### Run build
+
+Now it is time to generate a build, run
+
+<CodeGroup>
+  <CodeGroupItem title="NPM">
+
+```console:no-line-numbers
+npm run build
+```
+
+  </CodeGroupItem>
+  <CodeGroupItem title="YARN">
+
+```console:no-line-numbers
+yarn build
 ```
 
+  </CodeGroupItem>
+</CodeGroup>
+
+#### Run deploy
+
+Finally we are good to deploy our first Permaweb Application
+
+<CodeGroup>
+  <CodeGroupItem title="NPM">
+
+```console:no-line-numbers
+npm run deploy
+```
+
+  </CodeGroupItem>
+  <CodeGroupItem title="YARN">
+
+```console:no-line-numbers
+yarn deploy
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+::: info 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:
+
+```shell
+Deployed TxId [<<tx-id>>] to ANT [<<ant-process>>] using undername [<<undername>>]
+```
+
+Your React app can be found at `https://arweave.net/<< tx-id >>`.
+
+::: tip 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!