Prerequisites

Overview

Welcome to Weaverse! Before you begin building your Hydrogen-powered storefront, let's ensure your development environment is properly configured. This guide covers everything you need to get started.

Quick Requirements Checklist

✅ Node.js 22.x or higher (18.x minimum)

✅ PNPM 8.x or higher (recommended)

✅ Git for version control

✅ Chrome-based browser

✅ Shopify store (Basic plan or higher)

✅ Basic React/TypeScript knowledge

Detailed Requirements

1. Development Environment

Node.js Setup

• Node.js: 22.x or higher recommended (18.x minimum)

  # Check your Node versionnode --version

  • 💡 Tip: Use nvm to manage Node versions

  # Install and use latest LTS Node version with nvmnvm install --ltsnvm use --lts

Package Manager

We recommend using PNPM for better performance and disk space efficiency:

• PNPM 8.x or higher (Recommended)

  # Install pnpmcorepack enablecorepack prepare pnpm@latest --activate

Alternative package managers:

• npm: 10.x or higher (included with Node.js)
• Yarn: 1.22.x or higher

2. Development Tools

Recommended IDE

• Cursor (Highly Recommended)
  • Built-in AI pair programming
  • Native terminal integration
  • Git integration
  • Real-time collaboration

AI Coding Assistants

• GitHub Copilot
  • Works with most popular editors
  • Advanced code completion
  • Natural language to code assistance

MCP Servers

To enhance your development experience with AI-powered tools, we recommend these Model Context Protocol servers:

• Weaverse MCP - Quick access to Weaverse documentation
• Shopify MCP - Shopify API integration and documentation
• Figma MCP - For implementing Figma designs

💡 Tip: These MCPs work best with Cursor IDE. Follow the setup instructions in each repository.

Alternative: Visual Studio Code

If you prefer VS Code, install these essential extensions:

• Biome - Code formatting and linting
• Tailwind CSS IntelliSense
• EditorConfig

3. Version Control

• Git: Latest version

  # Verify Git installationgit --version

4. Browser Requirements

For the best development experience, use a Chrome-based browser:

• Google Chrome (Recommended)
• Arc Browser
• Microsoft Edge

💡 Chrome DevTools are essential for debugging and performance optimization

5. Shopify Requirements

Store Setup

• Active Shopify store (Basic plan or higher)
• Admin access to your store
• Shopify Partner account (recommended)

Technical Prerequisites

• Basic understanding of:
  • React fundamentals
  • TypeScript basics
  • Shopify theme structure
  • GraphQL concepts (for advanced usage)

Getting Started with Weaverse

1. Install the Weaverse App

1. Visit Weaverse on Shopify App Store
2. Click "Add app"
3. Follow the installation wizard

2. Choose Your Path

Starter Theme (Recommended for Beginners)

Choose from our curated themes:

• Pilot - Modern, versatile starter
• Naturelle - Nature-inspired design

Custom Development

Start from scratch:

• Create a new project
• Follow our custom development guide

Verify Your Setup

Run these commands to ensure everything is properly installed:

# Environment checksnode --version     # Should be ≥ 18.xpnpm --version     # Should be ≥ 8.xgit --version      # Should show latest version
# Optional: Install global dependenciespnpm install -g @shopify/cli

Next Steps

Ready to start building? Continue with:

1. 📚 Getting Started Guide
2. 🏗️ Project Structure
3. 🧱 Component Development

Need Help?

• Join our Community Slack
• Check our GitHub Discussions
• Follow @WeaverseIO for updates