{"id":21688610,"url":"https://github.com/pawanpaudel93/web-ardrive","last_synced_at":"2025-04-12T09:21:45.312Z","repository":{"id":39704112,"uuid":"505728576","full_name":"pawanpaudel93/web-ardrive","owner":"pawanpaudel93","description":"A CLI tool to deploy web apps to Arweave using ArDrive","archived":false,"fork":false,"pushed_at":"2023-03-20T05:32:28.000Z","size":5277,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T02:48:04.150Z","etag":null,"topics":["ardrive","arweave"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pawanpaudel93.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-21T07:05:52.000Z","updated_at":"2024-03-04T12:04:17.000Z","dependencies_parsed_at":"2022-08-24T01:30:52.584Z","dependency_job_id":null,"html_url":"https://github.com/pawanpaudel93/web-ardrive","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawanpaudel93%2Fweb-ardrive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawanpaudel93%2Fweb-ardrive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawanpaudel93%2Fweb-ardrive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawanpaudel93%2Fweb-ardrive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pawanpaudel93","download_url":"https://codeload.github.com/pawanpaudel93/web-ardrive/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248544039,"owners_count":21121882,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ardrive","arweave"],"created_at":"2024-11-25T17:15:57.431Z","updated_at":"2025-04-12T09:21:45.285Z","avatar_url":"https://github.com/pawanpaudel93.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# web-ardrive\r\n\r\n## Table of Contents\r\n\r\n- [About](#about)\r\n- [Installing](#installing)\r\n- [Usage](#usage)\r\n- [Contributing](#contributing)\r\n\r\n\r\n## About \u003ca name = \"about\"\u003e\u003c/a\u003e\r\n\r\nWeb Ardrive is a CLI tool to deploy web apps to Arweave using ArDrive. ArDrive isn't just another cloud storage service. ArDrive is built on the Arweave network whose permanent data storage lets to upload any files which will outlive you!\r\nLearn more about [ArDrive](https://ardrive.io/) and [Arweave](https://www.arweave.org/).\r\n\r\n\u003e __Note__: **Deploy using ArLocal first to check everything is working.**\r\n\r\n\r\n## Installing \u003ca name = \"installing\"\u003e\u003c/a\u003e\r\n\r\nInstall the package using npm or yarn as desired to get started.\r\n```\r\nnpm install -g web-ardrive\r\n```\r\nOR\r\n```\r\nyarn add global web-ardrive\r\n```\r\n\r\n## Usage \u003ca name = \"usage\"\u003e\u003c/a\u003e\r\n\r\nLet's deploy applications created with popular libraries and frameworks using ArDrive.\r\n\r\n\u003e __Note__: Use hash router in react, vue, and nuxt based apps. For next apps there is no hash based routing so manifest is adjusted for routes to work on reload but dynamic routes may not work on reload.\r\n\r\n### ReactJS \u0026 NextJS\r\n\r\n------------\r\n\r\n\r\n#### **ReactJS** \r\n\r\n\u003e __Note__: Use HashRouter from react-router-dom in react apps. Check project [examples](https://github.com/pawanpaudel93/web-ardrive/tree/main/examples)\r\n\r\n#### **Nextjs Static Export**:\r\n\r\nLearn about it [here](https://nextjs.org/docs/advanced-features/static-html-export) for the supported and unsupported features in static html export.\r\n\r\nIf you are having problems regarding images in nextjs html export, see [here](https://stackoverflow.com/questions/65487914/error-image-optimization-using-next-js-default-loader-is-not-compatible-with-n).\r\n\r\n### VueJS \u0026 NuxtJS\r\n\r\n------------\r\n\r\n#### **VueJS**\r\n\r\n\u003e __Note__: Use router in hash mode in vue apps.\r\n\r\nModify vue.config.js or vue.config.ts to include the following config:\r\n```\r\npublicPath: \"./\" // default is /\r\n```\r\n\r\n#### **NuxtJS**\r\n\r\nModify nuxt.config.js or nuxt.config.ts to include the following config:\r\n\r\n```\r\ntarget: 'static', // default is 'server'\r\nrouter: {\r\n  mode: 'hash',\r\n  base:  './'\r\n}\r\n```\r\n\r\nRead more about going full static mode in nuxtjs [Going Full Static (https://nuxtjs.org/announcements/going-full-static/)\r\n\r\n### ViteJS\r\n------------\r\n\u003e __Note__: Use hash router for react, vue and svelte accordingly.\r\n\r\nExamples of react, vue and svelte using vite is included in the examples folder.\r\n\r\n### Configuration\r\n\r\nAnd now you have to add config file for web-ardrive to upload the production build to arweave.\r\n\r\nRun this command to add configuration file for web-ardrive.\r\n\r\n```\r\nweb-ardrive init\r\n```\r\n\r\nNow modify the configuration file (web-ardrive.config.js) as per your need from the following:\r\n\r\n|  Name | Type   | Description   |\r\n| ------------ | ------------ | ------------ |\r\n|  walletPath |  string | wallet json file path |\r\n| folderPath?\t|\tstring\t|\tfolderPath of the build folder to be deployed. Auto discovered for app using vue, nuxt, react, next and vite if not provided. It may be needed for simple JS/TS app. |\r\n| appType?\t|\tstring\t|\tPossible values: 'react', 'next', 'vue', 'nuxt', 'vite' and ''\t|\r\n|  destFolderName\t | string  | Folder name for the folder where all the app files are stored. A folder with destFolderName is created on parent folder with parentFolderID  |\r\n| parentFolderID?\t  |  string |  ArDrive folder ID where app is to be deployed. It is required when production is true |\r\n| production?\t| boolean\t| ArLocal can be used when production is false. Default is true.\t|\r\n| dryRun? | boolean | dryRun if true runs all the steps but will skip sending the actual transactions. This can be very useful for gathering price estimations or to confirm that you've copy-pasted your entity IDs correctly before committing to an upload. Default is false. |\r\n\r\nExample of web-ardrive.config.js can be:\r\n\r\n```\r\n/** @type {import('web-ardrive').WebArDriveConfig} */\r\n\r\nconst WebArDriveConfig = {\r\n  walletPath: 'wallet.json',\r\n  folderPath: 'build',\r\n  appType: 'react',\r\n  parentFolderID: 'e6cb2f0d-91d7-4acc-9772-72c514263908',\r\n  destFolderName: 'public-square',\r\n  production: false,\r\n};\r\n\r\nexport default WebArDriveConfig;\r\n```\r\nThis configuration deploys `build` folder to the folder with name `public-square` where `public-square` folder is created on parent folder with ID parentFolderID. Production is false so the application is not deployed to Arweave but to local testnet `ArLocal`.\r\n\r\nIf you want to check if the application is working as expected or not, the application can be deployed to local testnet `ArLocal` using production as false and running the local testnet. Run arlocal with the following from the terminal.\r\n```\r\nnpx arlocal\r\n```\r\n\r\nAfter the configuration, run web-ardrive command from the root folder of the project.\r\n\r\n```\r\nweb-ardrive deploy\r\n```\r\nAfter apps are deployed, configure ArNS from [Permapages](https://permapages.arweave.dev/#/arns) for the deployed app.\r\n\r\n## Author\r\n\r\n👤 **Pawan Paudel**\r\n\r\n- Github: [@pawanpaudel93](https://github.com/pawanpaudel93)\r\n\r\n\r\n## 🤝 Contributing \u003ca name = \"contributing\"\u003e\u003c/a\u003e\r\n\r\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/pawanpaudel93/web-ardrive/issues).\r\n\r\n\r\n## Show your support\r\n\r\nGive a ⭐️ if this project helped you!\r\n\r\nCopyright © 2022 [Pawan Paudel](https://github.com/pawanpaudel93).\u003cbr /\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawanpaudel93%2Fweb-ardrive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpawanpaudel93%2Fweb-ardrive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawanpaudel93%2Fweb-ardrive/lists"}