Comment on page
Fast track your journey to building decentralized applications on Arweave with the Arweave StarterKit. A CLI tool that effortlessly sets up an entire application, harnessing the power of NextJS as the framework, Shadcn UI for a sleek and aesthetic interface, and ArweaveKit to seamlessly interact with the Arweave ecosystem.
To scaffold an Arweave app interactively, run the following command based on your package manager of choice:
npm create arweave-app@latest
yarn create arweave-app
pnpm create arweave-app@latest
bun create arweave-app@latest
During the interactive setup, you'll be prompted for your project's name and other configuration options. Provide your choices to create a new Arweave application.
Note: For windows users using a secure shell, ensure your ssh-agent is running as expected for successfull installation of dependencies.
For a non-interactive setup, use command line arguments. You can view available options with:
Usage: create-arweave-app [dir] [options]
A CLI for creating full-stack Arweave web applications
dir The name of the application, as well as the name of the directory to create
--noGit Explicitely tell the CLI to not initialize a new git repo in the project (default: false)
--noInstall Explicitely tell the CLI to not run the package manager's install command (default: false)
-y, --default Bypass the CLI and Use default options to bootstrap a new Arweave app. Note: Default options can be overridden by user-provided options. (default: false)
-i, --import-alias <alias> Explicitly tell the CLI to use a custom import alias (default: "@/")
--appRouter [boolean] Explicitly tell the CLI to use the new Next.js app router (default: true)
-v, --version Display the version number
-h, --help display help for command
You can quickly scaffold an Arweave app using the starter kit with the default options by running:
npx create-arweave-app@latest -y
yarn create arweave-app -y
pnpm create arweave-app@latest -y
bunx create-arweave-app@latest -y
You can also quickly scaffold by overriding the default options by passing the other options as well:
npx create-arweave-app@latest my-arweave-app --noGit --default
yarn create arweave-app my-arweave-app --noGit --default
pnpm create arweave-app@latest my-arweave-app --noGit --default
bunx create-arweave-app@latest my-arweave-app --noGit --default
After creating a new project and installing the dependencies, run the development server:
npm run dev
Landing Page: A form that allows users to upload Atomic assets on Arweave, complete with various metadata configurations.
Landing Page Form Preview
View Page: A dedicated space to view the uploaded assets and engage with them through on-chain likes (known as stamps) and comments.
View Page Preview
Start editing the page by modifying
pages/index.ts, as per your NextJS config.
Building DApps from scratch can be a daunting task. From setting up the environment to ensuring compatibility across different components, the process can be time-consuming. A starter kit provides a pre-configured foundation, enabling developers to focus on building unique features and functionalities rather than the underlying setup.
- Atomic Assets and Contracts: Each asset is paired with an associated contract, enabling alterations to the metadata and transfer of ownership.The created project is initialized with a contract which is located at
src/contracts. You can make necessary modifications to the contract code according to your needs and run the script
deploy-contractsto automatically update the contract linked functionality to the new one.# With wallet.json keyfile present at rootyarn deploy-contracts# With keyfile present at a custom pathyarn deploy-contracts /Users/arweave/Documents/keys/wallet.json
The true strength of this kit lies in its modularity. Simply interchange the core asset from image to music and transform an image sharing application to a music hub. Or swap in for videos to create a streaming service. As any form of data can be uploaded to the Arweave network, the possibilities are limitless.