If you’re diving into the world of decentralized applications (dApps), the ink!athon Boilerplate is your trusty guide. This full-stack setup not only provides a solid foundation to build your Web3 application but also integrates seamlessly with ink! smart contracts. Whether you’re gearing up for a hackathon or planning a production-ready app, you’re in the right place. Here’s how to get started!

Table of Contents

• About
• Getting Started
  • 1. Run the Frontend
  • 2. Build & Deploy Contracts on a Local Node
  • 3. Connect the Frontend to the Local Node
• Customization
• The Stack
• Live Examples
• Deployment
• VSCode Setup
• DRink! CLI Usage
• FAQs & Troubleshooting

About

The ink!athon boilerplate comes equipped with a sample ink! Greeter contract that holds a simple greeting message, allowing updates and interactions through a user-friendly frontend. You can test the live example on inkathon.xyz.

Getting Started

1. Run the Frontend

The frontend is designed to work straight away, no local node required, as it connects to deployed contracts on testnets (like Aleph Zero). Here are the pre-requisites:

• Node.js v18+ is recommended, preferably via nvm.
• Install pnpm via npm or Corepack.
• Clone the repository.

Special Note for Windows Users: It’s best to use Windows Subsystem for Linux (WSL) or Git Bash. PowerShell is not supported.

Once your setup is ready, run:

pnpm install

To start the frontend, execute:

pnpm run dev

2. Build & Deploy Contracts on a Local Node

This process involves building, testing, and deploying contracts, equipped with necessary tools:

• Install Rust following the Substrate Docs.
• Install cargo contract.
• Install the substrate-contracts-node.

Then, run the following commands:

cd contracts
pnpm run build
pnpm run node
pnpm run deploy

3. Connect the Frontend to the Local Node

Edit the .env.local file in the frontend and set the variable NEXT_PUBLIC_DEFAULT_CHAIN to development. Restart the frontend to interact with your contracts.

Customization

1. Project Name

Customize your project name by finding all occurrences noted with a *TODO* in the code. This can be easier with the todo-tree plugin in VSCode.

2. Custom Contracts

To replace the Greeter contract or add new ones, create directories within contracts/src and follow suit in the Cargo.toml file.

3. Custom Scripts

Duplicate the script.template.ts to create your custom scripts for interacting with contracts using pnpm run script script-name.

The Stack

The ink!athon boilerplate utilizes a modern technology stack, which includes:

• Monorepo Workspace with Projects for contracts and frontend
• Rust and ink! for Smart Contracts
• Next.js with React and TypeScript for the Frontend
• Tailwind CSS for styling

Live Examples

Check out these live examples:

• inkathon.xyz – Live demo deployment of this boilerplate
• AZERO.ID – Domain Name Service for Aleph Zero

Deployment

For deploying via Vercel, the configuration is pre-set. Use the “Deploy” button or utilize Dockerfiles for other hosting providers. Read more in the repository.

VSCode Setup

To enhance your development experience, open the workspace file inkathon.code-workspace. Consider adding helpful plugins like ESLint and Prettier for code management.

DRink! CLI Usage

The DRink! CLI facilitates contract interaction without needing a local node. Install it using:

cargo install drink-cli --force --locked

FAQs & Troubleshooting

Should you encounter difficulties, here are some troubleshooting tips:

Which package managers are supported?

pnpm is highly recommended for monorepo workspaces for its speed. While yarn is also an option, exercise caution regarding version compatibility.

Cannot find module .greeter.development.ts?

If Next.js doesn’t recognize new file creations, delete the build cache at frontend/.next. This action forces Next.js to rebuild and recognize new files.

How to approach styling?

You can use various styling methods, including Tailwind CSS, Radix UI, or plain CSS styles. This flexibility lets you choose what suits your needs best.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.