Skip to content

Commit

Permalink
Revert "migrate starter kits to permaweb deploy"
Browse files Browse the repository at this point in the history 
This reverts commit 724a950.
  • Loading branch information
@jfrain99
jfrain99 committed Sep 9, 2024
1 parent 724a950 commit 205a0da
Show file tree
Hide file tree
Showing 7 changed files with 120 additions and 497 deletions.
3 changes: 0 additions & 3 deletions .vite/deps_temp_801fad7e/package.json
View file

This file was deleted.

51 changes: 28 additions & 23 deletions docs/src/kits/react/create-react-app.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -202,32 +202,30 @@ 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](https://app.ardrive.io) and import your wallet.
Then, you can purchase turbo credits for your wallet.
### Setup Irys

### Setup Permaweb-Deploy
We need Irys to deploy our app to Permaweb it provides instant data upload and retrieval

<CodeGroup>
<CodeGroupItem title="NPM">

```console:no-line-numbers
npm install --global permaweb-deploy
npm install --global @irys/sdk
```

</CodeGroupItem>
<CodeGroupItem title="YARN">

```console:no-line-numbers
yarn global add permaweb-deploy
yarn global add @irys/sdk
```

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

Expand All @@ -236,16 +234,12 @@ You will need to add AR to this wallet and fund your Irys wallet to be able to u
...
"scripts": {
...
"deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> --deploy-folder build"
"deploy": "irys upload-dir ./build -h https://node2.irys.xyz --wallet ./wallet.json -c arweave --index-file index.html --no-confirmation"
}
...
}
```

::: info
Replace << ANT-PROCESS >> with your ANT process id.
:::

### Run build

Now it is time to generate a build, run
Expand Down Expand Up @@ -288,22 +282,33 @@ 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.
::: tip SUCCESS
You should now have a React Application on the Permaweb! Great Job!
:::

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

You should see a response similar to the following:
<CodeGroup>
<CodeGroupItem title="NPM">

```console:no-line-numbers
irys fund 1479016 -h https://node1.irys.xyz -w wallet.json -c arweave
```

```shell
Deployed TxId [<<tx-id>>] to ANT [<<ant-process>>] using undername [<<undername>>]
</CodeGroupItem>
<CodeGroupItem title="YARN">

```console:no-line-numbers
irys fund 1479016 -h https://node1.irys.xyz -w wallet.json -c arweave
```

Your React app can be found at `https://arweave.net/<< tx-id >>`.
</CodeGroupItem>
</CodeGroup>

::: tip SUCCESS
You should now have a React Application on the Permaweb! Great Job!
::: 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.
:::

## Repository
Expand Down
4 changes: 2 additions & 2 deletions docs/src/kits/react/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ can be uploaded as a transaction to the permaweb where it will serve as a single

React Starter Kit Guides:

* [Vite](./turbo.md) - React + Vite, publish with permaweb-deploy
* [Turbo](./turbo.md) - React + Vite, publish with Turbo
* [Vite](./vite.md) - utilize Vite to build a React permaweb app
* [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
Expand Down
177 changes: 18 additions & 159 deletions docs/src/kits/react/turbo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,47 +40,18 @@ ardrive generate-wallet -s "SEED_PHRASE_FROM_ABOVE" > wallet.json

### Create React App

<CodeGroup>
<CodeGroupItem title="NPM">

```sh
npm create vite my-arweave-app --template react-ts
cd my-arweave-app
npm install
```

</CodeGroupItem>
<CodeGroupItem title="YARN">

```sh
yarn create vite my-arweave-app --template react-ts
cd my-arweave-app
yarn
```

</CodeGroupItem>
</CodeGroup>

### Add React Router DOM

<CodeGroup>
<CodeGroupItem title="NPM">

```sh
npm install 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
Expand Down Expand Up @@ -168,25 +139,10 @@ 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
Expand All @@ -207,138 +163,41 @@ export default defineConfig({
yarn build
```

### Deploy Permanently

#### Generate Wallet

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
```
### Publishing to Arweave

</CodeGroupItem>
</CodeGroup>

then run this command in the terminal
#### create drive

```sh
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](https://app.ardrive.io) and import your wallet.
Then, you can purchase turbo credits for your wallet.

#### 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
ardrive create-drive -w ../wallet.json -n my-arweave-app --turbo
```

</CodeGroupItem>
</CodeGroup>
#### create folder

<!-- ::: 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 >> "
}
...
}
```sh
ardrive create-folder -w ../wallet.json -n "v1" -F __ROOT_FOLDER_ID__ --turbo
export V1=__FOLDER_ID__
```

::: info
Replace << ANT-PROCESS >> with your ANT process id.
:::
#### upload files

#### 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
```sh
cd dist
ardrive upload-file -w ../../wallet.json -l ./ -F ${V1} --turbo
```

</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
```
#### create manifest

</CodeGroupItem>
<CodeGroupItem title="YARN">

```console:no-line-numbers
yarn deploy
```sh
cd ..
ardrive create-manifest -w ../wallet.json -f ${V1} --turbo --dry-run
```

</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
> 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.
You should see a response similar to the following:

```shell
Deployed TxId [<<tx-id>>] to ANT [<<ant-process>>] using undername [<<undername>>]
```sh
ardrive upload-file -w ../wallet.json -l ./manifest.json --content-type application/x.arweave-manifest+json -F ${V1} --turbo
```

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!
Expand Down
Loading

0 comments on commit 205a0da

Please sign in to comment.