Environment Setup

Before writing a single line of Shopify code, you need a properly configured development environment. This lesson walks you through every tool you need, with exact commands for macOS, Linux, and Windows (WSL2). By the end, you will have Claude Code, Shopify CLI, and a Shopify development store ready to go.

Overview of Required Tools

Tool	Purpose	Version
Node.js	JavaScript runtime	20+ (LTS recommended)
npm	Package manager	Comes with Node.js
Claude Code	Agentic coding CLI	Latest
Shopify CLI	Shopify development toolkit	Latest (v3+)
Git	Version control	2.30+
VS Code or Cursor	Code editor	Latest

Step 1: Install Node.js 20+

Shopify CLI and Claude Code both require Node.js. We recommend using nvm (Node Version Manager) so you can easily switch versions.

macOS / Linux

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Restart your terminal, then install Node.js 20 LTS
nvm install 20
nvm use 20
nvm alias default 20

# Verify installation
node --version   # Should print v20.x.x
npm --version    # Should print 10.x.x

Windows (WSL2)

Use WSL2, Not Native Windows

Shopify CLI and Claude Code work best in a Unix-like environment. Install WSL2 first, then follow the macOS/Linux instructions inside your WSL2 terminal.

# In PowerShell (as Administrator)
wsl --install -d Ubuntu

# After WSL2 is set up, open Ubuntu terminal and install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20

Verify Node.js

Run the following to confirm everything is working:

node -e "console.log('Node.js', process.version, 'is ready')"
# Expected output: Node.js v20.x.x is ready

Step 2: Install Claude Code

Claude Code is Anthropic's command-line coding agent. It runs in your terminal and can read files, execute commands, and interact with MCP servers.

# Install Claude Code globally
npm install -g @anthropic-ai/claude-code

# Verify installation
claude --version

Configure Your Anthropic API Key

Claude Code needs an API key to communicate with Anthropic's models. Get one from console.anthropic.com.

# Option 1: Set in your shell profile (~/.zshrc or ~/.bashrc)
export ANTHROPIC_API_KEY="sk-ant-your-key-here"

# Option 2: Claude Code will prompt you on first run
claude

Protect Your API Key

Your Anthropic API key gives full access to your account. Never commit it to Git, share it in screenshots, or paste it in public channels. Use environment variables or a secrets manager.

Test Claude Code

Run a quick test to make sure Claude Code is operational:

# Start Claude Code in your project directory
cd ~/shopify-projects
claude

# Inside Claude Code, try a simple prompt:
# > Create a file called hello.js that prints "Hello from Claude Code"

Claude Code should create the file and you can verify it works with node hello.js.

Step 3: Install Shopify CLI

The Shopify CLI is your primary tool for creating apps, themes, managing extensions, and deploying to Shopify.

# Install Shopify CLI globally
npm install -g @shopify/cli @shopify/app

# Verify installation
shopify version
# Expected: @shopify/cli/3.x.x

# Authenticate with your Partner account
shopify auth login

The shopify auth login command will open a browser window. Log in with your Shopify Partner account credentials.

Shopify CLI v3+ Architecture

Shopify CLI v3 is built on the oclif framework and uses a plugin architecture. The @shopify/app package adds app-specific commands. When you run shopify app init, the CLI scaffolds a full Remix application with Shopify-specific tooling built in.

Verify Shopify CLI

# List available commands
shopify commands

# Check that app commands are available
shopify app --help

Step 4: Create a Shopify Partner Account

If you do not already have one, create a free Shopify Partner account:

1. Go to partners.shopify.com
2. Click Join now and fill in your details
3. Verify your email address
4. Complete the partner onboarding survey

The Partner account gives you access to:

• Unlimited development stores (free Shopify stores for testing)
• The Partner Dashboard for managing apps and stores
• Revenue share when you publish apps or refer merchants
• Shopify Academy courses and certifications

Step 5: Create a Development Store

Development stores are free Shopify stores that never expire and include all features. You need at least one for this course.

Via the Partner Dashboard

1. Log into partners.shopify.com
2. Navigate to Stores in the left sidebar
3. Click Add store
4. Choose Create development store
5. Select Create a store to test and build
6. Fill in the store name (e.g., masterclass-dev)
7. Choose Start with test data to pre-populate products and orders
8. Click Create development store

Via Shopify CLI

# Create a dev store directly from the CLI
shopify app dev --store=masterclass-dev
# The CLI will guide you through store creation if needed

Pre-populate Test Data

Always select "Start with test data" when creating a dev store. This gives you sample products, collections, customers, and orders to work with immediately. Building against real-looking data is much more productive than starting from scratch.

Step 6: Set Up Your Code Editor

VS Code

We recommend VS Code with these extensions for Shopify development:

# Install VS Code extensions from the terminal
code --install-extension Shopify.theme-check-vscode
code --install-extension GraphQL.vscode-graphql
code --install-extension GraphQL.vscode-graphql-syntax
code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode

Extension	Purpose
Shopify Theme Check	Linting and autocomplete for Liquid files
GraphQL	Syntax highlighting and validation for GraphQL
Tailwind CSS IntelliSense	Autocomplete for Tailwind (used in Hydrogen)
ESLint	JavaScript/TypeScript linting
Prettier	Code formatting

Cursor

If you prefer Cursor (the AI-powered VS Code fork), the same extensions work. Cursor also has built-in AI features that complement Claude Code nicely -- use Cursor for inline suggestions and Claude Code for larger, multi-file agentic tasks.

Recommended VS Code Settings

Add these to your .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.associations": {
    "*.liquid": "liquid"
  },
  "emmet.includeLanguages": {
    "liquid": "html"
  },
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode"
  }
}

Step 7: Configure Git

Version control is non-negotiable. Configure Git with your identity:

# Set your Git identity
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# Set default branch name
git config --global init.defaultBranch main

# Enable helpful Git settings
git config --global pull.rebase true
git config --global fetch.prune true

Create a Global .gitignore

Shopify projects contain files that should never be committed:

# Create a global gitignore
cat >> ~/.gitignore_global << 'EOF'
# Environment variables
.env
.env.local
.env.*.local

# Dependencies
node_modules/

# Shopify
.shopify/

# OS files
.DS_Store
Thumbs.db

# Editor
.vscode/settings.json
.idea/
EOF

git config --global core.excludesfile ~/.gitignore_global

Verification Checklist

Run through this checklist to confirm everything is set up correctly:

# Node.js 20+
node --version

# npm 10+
npm --version

# Claude Code
claude --version

# Shopify CLI 3+
shopify version

# Git 2.30+
git --version

# Shopify authentication
shopify auth login --check 2>/dev/null && echo "Authenticated" || echo "Run: shopify auth login"

Automate With Claude Code

Here is your first taste of agentic coding. Start Claude Code and ask it: "Check that my development environment is set up correctly for Shopify development. Verify Node.js 20+, Shopify CLI, and Git are installed." Claude Code will run the commands and tell you what is missing.

What Is Next

Your environment is ready. In the next lesson, we will create your first Shopify app using shopify app init and install it on your development store.