Development Environment Setup: The Complete Local Business Website & SEO Guide for 2026

Before building your website, you need to set up your development environment. This guide covers three complete options to get you started, regardless of your budget or technical experience level. If you have not read the full local SEO series overview, start there for context on how this phase fits into the bigger picture.

Your Three Options

• 1. Claude Code - Anthropic's AI-powered development tool (Recommended for beginners)
• 2. Cursor with Claude - Visual AI IDE with Claude Code integration
• 3. Free Alternatives - VS Code with free AI tools for budget-conscious developers

What You Will Achieve

By the end of this phase, you will have:

• A fully configured development environment
• Node.js and all required tools installed
• A Next.js project created and running locally
• Version control set up with Git and GitHub
• Your website deployed live on Vercel

Choose the option that fits your budget and technical comfort level. All three paths lead to the same result: a professional development environment ready for building your local business website.

<p class="text-lg mb-6">Before diving into setup, understand the differences between your options to make the best choice for your situation.</p> <div class="overflow-x-auto mb-8"> <table class="w-full text-left border-collapse"> <thead> <tr class="border-b border-white/20"> <th class="py-3 px-4 text-orange">Feature</th> <th class="py-3 px-4">Claude Code</th> <th class="py-3 px-4">Cursor + Claude</th> <th class="py-3 px-4">Free (VS Code)</th> </tr> </thead> <tbody class="text-white/80"> <tr class="border-b border-white/10"> <td class="py-3 px-4 font-semibold">Cost</td> <td class="py-3 px-4">$20/month</td> <td class="py-3 px-4">$20/month (Cursor) + $20/month (Claude API)</td> <td class="py-3 px-4">Free</td> </tr> <tr class="border-b border-white/10"> <td class="py-3 px-4 font-semibold">Setup Time</td> <td class="py-3 px-4">10 minutes</td> <td class="py-3 px-4">15 minutes</td> <td class="py-3 px-4">30 minutes</td> </tr> <tr class="border-b border-white/10"> <td class="py-3 px-4 font-semibold">AI Quality</td> <td class="py-3 px-4">Best</td> <td class="py-3 px-4">Excellent</td> <td class="py-3 px-4">Good</td> </tr> <tr class="border-b border-white/10"> <td class="py-3 px-4 font-semibold">Ease of Use</td> <td class="py-3 px-4">Easiest</td> <td class="py-3 px-4">Easy</td> <td class="py-3 px-4">Moderate</td> </tr> <tr> <td class="py-3 px-4 font-semibold">Best For</td> <td class="py-3 px-4">Non-technical users</td> <td class="py-3 px-4">Some technical knowledge</td> <td class="py-3 px-4">Budget-conscious</td> </tr> </tbody> </table> </div> <div class="bg-white/5 border border-white/10 rounded-xl p-6 mb-6"> <h4 class="font-semibold text-orange mb-3">Recommendation</h4> <p class="text-white/80">If you are new to web development and can afford $20/month, start with <strong>Claude Code</strong>. It provides the smoothest experience and best AI assistance. You can always cancel after finishing your website if you do not need ongoing AI help.</p> </div>

Claude Code is Anthropic's AI-powered development tool that understands natural language and handles complex coding tasks with minimal input from you. For a deeper look at what Claude Code can do, see our complete guide to Claude Code.

Time Estimate: 30-60 minutes depending on your internet speed

Step 1: Install Node.js

Node.js is required to build modern web applications.

Installation Steps:

1. Visit https://nodejs.org
2. Download the LTS version (Long Term Support) - it will have a green button
3. Run the installer and click "Next" through all screens (default settings are fine)
4. Wait for installation to complete (2-5 minutes)

Verify Node.js Installation

Mac Users: Open "Terminal" (press Cmd+Space and type "Terminal")

Windows Users: Open "Command Prompt" (search for "cmd" in Start menu)

Type this command and press Enter:

node --version

You should see something like "v20.11.0" or similar. If you get "command not found", restart your terminal and try again.

Step 2: Install Claude Desktop and Choose Your Plan

Download Claude Desktop:

1. Visit https://claude.ai/download
2. Click "Download for Mac" or "Download for Windows"
3. Mac: Drag to Applications folder | Windows: Run the installer
4. Open Claude Desktop and sign in or create an account

Choose an Account That Supports Claude Code:

Claude Code currently works with Claude Pro, Max, Team, Enterprise, or Console accounts. For most solo users following this guide, Claude Pro or Max is the simplest option.

1. In Claude Desktop, click your profile icon (bottom left corner)
2. Choose the plan that fits your workflow
3. Complete signup or upgrade
4. Verify your account is active before installing Claude Code

Step 3: Install Claude Code CLI

Open your Terminal (Mac/Linux), PowerShell (Windows), or Command Prompt (Windows) and use the native installer:

curl -fsSL https://claude.ai/install.sh | bash

On Windows PowerShell, use:

irm https://claude.ai/install.ps1 | iex

This is the current recommended install method from Anthropic. It does not require npm and keeps Claude Code up to date automatically.

Verify Installation:

claude --version

You should see a version number. You can also run claude doctor for a fuller installation check.

Authenticate Claude Code:

Run Claude Code:

claude

Then type the login command inside the interactive session:

/login

Your browser will open automatically. Click "Authorize" to connect Claude Code to your account. Return to terminal and confirm the login completed successfully.

Step 4: Create Your Project

Navigate to Desktop:

Mac/Linux:

cd ~/Desktop

Windows:

cd %USERPROFILE%\\Desktop

Initialize Next.js Project with Claude Code:

claude "Create a new Next.js 15 project called my-business-website with TypeScript, Tailwind CSS, and App Router. Use all recommended settings."

Type 'y' to confirm. This takes 3-5 minutes. Do not close the terminal.

Navigate into Your Project:

cd my-business-website

Step 5: Test Your Setup

Start Development Server:

npm run dev

You should see "Ready in 3.2s" and "Local: http://localhost:3000"

View Your Website:

1. 1. Open your web browser
2. 2. Go to: http://localhost:3000
3. 3. You should see the Next.js welcome page

To stop the server: Press Ctrl+C in your terminal

Step 6: Setup GitHub Version Control

Install Git:

Mac Users: Git is usually pre-installed. Verify by typing git --version

Windows Users:

1. 1. Visit https://git-scm.com/download/win
2. 2. Download and install Git for Windows
3. 3. Use default settings during installation
4. 4. Restart your terminal after installation

Create GitHub Account:

1. 1. Visit https://github.com/signup
2. 2. Enter your email and create a password
3. 3. Choose a username (use your business name if available)
4. 4. Verify your account via email
5. 5. Choose the free plan

Initialize Git and Make First Commit:

git init
git add .
git commit -m "Initial commit - Next.js project setup"

Create .gitignore with Claude Code:

claude "Create a comprehensive .gitignore file for a Next.js project. Include node_modules, .next, .env files, and other common excludes."

Create GitHub Repository and Push:

1. 1. Go to https://github.com/new
2. 2. Repository name: my-business-website
3. 3. Select Public (or Private if you prefer)
4. 4. Do NOT check "Initialize with README"
5. 5. Click "Create repository"

GitHub will show you commands. Run them (replace YOUR-USERNAME):

git remote add origin https://github.com/YOUR-USERNAME/my-business-website.git
git branch -M main
git push -u origin main

Step 7: Deploy to Vercel (Free Hosting)

Create Vercel Account:

1. 1. Visit https://vercel.com/signup
2. 2. Click "Continue with GitHub"
3. 3. Authorize Vercel to access your GitHub account
4. 4. Complete account setup

Import Your Repository:

1. 1. On Vercel dashboard, click "Add New..." then "Project"
2. 2. Find my-business-website and click "Import"
3. 3. Framework Preset: Next.js (auto-detected)
4. 4. Click "Deploy"

Deployment takes 2-5 minutes. Your URL will look like: https://my-business-website-abc123.vercel.app

Claude Code Setup Complete

You should now have:

• ✓ Node.js installed and working
• ✓ Claude Desktop with Pro subscription
• ✓ Claude Code CLI installed and authenticated
• ✓ Next.js project created and running
• ✓ Website viewable at localhost:3000
• ✓ Code stored on GitHub
• ✓ Live website deployed on Vercel

This option combines the visual interface of Cursor with the power of Claude Code, giving you the best of both worlds. If you plan to use Claude Code for full-stack development, this setup is a strong choice.

Time Estimate: 45-75 minutes depending on your internet speed

Step 1: Install Prerequisites

Follow the same Node.js installation from Option A, Step 1.

Step 2: Install Cursor Editor

Download and Install Cursor:

1. Visit https://cursor.sh
2. Click "Download for Free"
3. Choose your operating system (Mac, Windows, or Linux)
4. Mac: Drag to Applications folder | Windows: Run the installer
5. Launch Cursor and sign up with your email or GitHub account

Subscribe to Cursor Pro (Optional but Recommended):

1. 1. Click your profile icon (bottom left)
2. 2. Choose "Upgrade to Pro"
3. 3. Select plan: $20/month for Cursor Pro
4. 4. Enter payment details

Note: Cursor has a free tier with limits. For this project, the free tier works, but Pro gives you unlimited AI requests.

Step 3: Add Claude Code to Cursor

Open Cursor Terminal:

1. 1. In Cursor, go to: View then Terminal
2. 2. A terminal panel will open at the bottom

Recommended: Install the Claude Code Extension

1. Open Cursor
2. Go to Extensions (`Cmd+Shift+X` on Mac, `Ctrl+Shift+X` on Windows/Linux)
3. Search for "Claude Code"
4. Install the official Claude Code extension

Anthropic's current IDE docs recommend using the extension in VS Code-compatible editors like Cursor. It includes the CLI and gives you a native panel, diffs, file references, and conversation history.

Optional: Use the CLI in Cursor Terminal

If you prefer the terminal workflow inside Cursor, install Claude Code with the native installer from Option A, then run claude in Cursor's integrated terminal.

Setup Claude and Authenticate:

Follow Option A, Step 2 to choose an account that supports Claude Code.

Then authenticate by opening Claude Code in Cursor and signing in when prompted, or by running claude in the Cursor terminal and using /login.

Step 4: Create Project in Cursor

Create Project Using Cursor Interface:

1. 1. Click File then Open Folder
2. 2. Navigate to your Desktop
3. 3. Click "New Folder" and name it my-business-website
4. 4. Click "Select Folder" or "Open"

Initialize Next.js Project:

In the Cursor terminal (View then Terminal if not visible):

npx create-next-app@latest . --typescript --tailwind --app --eslint

Press Enter when prompted and accept all defaults.

Or use Claude Code:

claude "Initialize a Next.js 15 project in the current directory with TypeScript, Tailwind, and App Router."

Step 5: Using Claude Code in Cursor

Two Ways to Use AI in Cursor:

Method 1: Cursor's Built-in AI (Cmd+K or Ctrl+K)

Select code and press Cmd+K (Mac) or Ctrl+K (Windows). Type what you want to change. Great for quick edits.

Method 2: Claude Code in Terminal

Use the terminal at bottom: claude "your request". Better for complex tasks with full project context. You can also explore advanced hooks, MCP, and custom commands once you are comfortable with the basics.

Visual Benefits of Cursor:

• File tree on the left for easy navigation
• Code editor in the center with syntax highlighting
• Terminal at the bottom for running commands
• AI chat on the right (Cmd+L or Ctrl+L)

Step 6: Setup GitHub in Cursor

Initialize Git in Cursor:

Click the Source Control icon in the left sidebar (looks like a branch).

Click "Initialize Repository" button.

Or use terminal: git init

Push to GitHub Using Cursor UI:

1. 1. Click Source Control icon
2. 2. Type a commit message: "Initial commit"
3. 3. Click the checkmark to commit
4. 4. Click "..." menu then "Push"

Step 7: Deploy to Vercel

Follow Option A, Step 7 (same process).

Cursor + Claude Code Setup Complete

You should now have:

• ✓ Cursor editor installed
• ✓ Claude Code working in Cursor terminal
• ✓ Visual file tree and code editor
• ✓ Next.js project created
• ✓ Website running at localhost:3000
• ✓ Code stored on GitHub
• ✓ Live website on Vercel

This option uses completely free tools (or tools with generous free tiers) for budget-conscious developers. Even with free tooling, you can still build a site that performs well for technical SEO.

Time Estimate: 60-90 minutes depending on your internet speed

Overview of Free Tools:

• Code Editor: VS Code (free, powerful)
• AI Assistant: ChatGPT Free or Cursor Free Tier
• Version Control: Git + GitHub (free)
• Hosting: Vercel (free tier) or Netlify (free tier)

Step 1: Install Prerequisites

Follow Option A, Step 1 (Node.js installation).

Step 2: Install VS Code

Download VS Code:

1. Visit https://code.visualstudio.com
2. Click "Download for Mac" or "Download for Windows"
3. Install the application (use default settings)

Install Helpful Extensions:

Click the Extensions icon (left sidebar, looks like 4 squares). Search and install:

• 1. ES7+ React/Redux Snippets - Code shortcuts
• 2. Tailwind CSS IntelliSense - Tailwind autocomplete
• 3. Prettier - Code formatter
• 4. GitLens - Git visualization
• 5. GitHub Copilot - AI assistance (optional, $10/month after free trial)

Step 3: Choose Your Free AI Assistant

Option 3A: ChatGPT Free

Web-based, no installation needed

Pros: Completely free, good for planning

Cons: Copy-paste workflow, no file context

Visit chat.openai.com

Option 3B: Cursor Free Tier

Visual editor with built-in AI

Pros: 50 AI requests/month, modifies files directly

Cons: Limited requests on free tier

Follow Option B setup (skip Pro subscription)

Option 3C: Continue Extension

Free and open source in VS Code

Pros: Completely free, multiple AI models

Cons: Requires API keys setup

Search "Continue" in VS Code Extensions

Step 4: Create Your Project

Open Terminal in VS Code:

In VS Code: Terminal then New Terminal

Navigate to Desktop:

Mac/Linux:

cd ~/Desktop

Windows:

cd %USERPROFILE%\\Desktop

Create Next.js Project:

npx create-next-app@latest my-business-website

Answer the prompts:

• TypeScript? Yes
• ESLint? Yes
• Tailwind CSS? Yes
• src/ directory? No
• App Router? Yes
• Import alias? No (or accept default)

Then open the project:

cd my-business-website
code .

Step 5: Test Your Setup

Start Development Server:

npm run dev

Open browser and go to: http://localhost:3000

Step 6: Setup GitHub (Free)

Create .gitignore File:

Create a new file named .gitignore in your project root with this content:

# dependencies
node_modules
.pnp
.pnp.js

# testing
coverage

# next.js
.next/
out/
build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local
.env

# vercel
.vercel

# typescript
*.tsbuildinfo

Initialize Git and Push:

git init
git add .
git commit -m "Initial commit"

Then follow Option A, Step 6.6 and 6.7 to create GitHub repository and push.

Step 7: Deploy to Vercel (Free Tier)

Follow Option A, Step 7. Vercel's free tier includes:

• Unlimited websites
• Automatic deployments
• Global CDN
• SSL certificates
• Custom domains (you just need to own the domain)
• 100GB bandwidth per month (plenty for small business sites)

Free Setup Complete

You should now have:

• ✓ VS Code installed as your code editor
• ✓ Free AI assistant chosen (ChatGPT, Cursor Free, or Continue)
• ✓ Next.js project created
• ✓ Website running at localhost:3000
• ✓ Code stored on GitHub
• ✓ Live website on Vercel (free tier)
• ✓ Zero monthly cost (or $10/month if using Copilot)

Workflow for Free Option

When this guide says "Use Claude Code," you will:

1. 1. Copy the prompt
2. 2. Paste into your chosen AI (ChatGPT, Cursor, Continue)
3. 3. Get the code response
4. 4. Manually create/edit files in VS Code
5. 5. Save and test

It takes longer, but it is completely free.

What is a development environment?

A development environment is the collection of tools, software, and configurations needed to write, test, and deploy code. It includes your code editor, programming language runtimes, version control, and hosting setup.

Do I need coding experience to follow this guide?

No. This guide is designed for complete beginners. The AI tools (Claude Code, Cursor, or ChatGPT) handle the technical coding while you focus on describing what you want to build.

What is the difference between Claude Code and Cursor?

Claude Code is a command-line tool that runs in your terminal and uses natural language to generate and modify code. Cursor is a visual code editor (like VS Code) with AI built in. You can use Claude Code inside Cursor for the best of both worlds.

Why is Node.js required?

Node.js is a JavaScript runtime that powers modern web development tools. Next.js, React, and most frontend frameworks require Node.js to run. It handles package management, builds, and local development servers.

What is Next.js and why use it?

Next.js is a React framework that makes building websites easier. It includes built-in routing, server-side rendering for SEO, automatic code splitting, and image optimization. It is the industry standard for professional websites.

What is Git and why do I need it?

Git is version control software that tracks changes to your code. It allows you to save snapshots of your work, undo mistakes, and collaborate with others. GitHub stores your Git repositories in the cloud.

Is Vercel really free?

Yes, Vercel offers a generous free tier that includes unlimited websites, automatic deployments, SSL certificates, and 100GB bandwidth per month. Most small business websites never exceed these limits.

Can I use a custom domain with Vercel free tier?

Yes. Vercel's free tier supports custom domains. You just need to purchase and own the domain name (typically $10-15/year from registrars like Squarespace Domains, Namecheap, or Cloudflare Registrar).

What if I get an error during Node.js installation?

First, restart your terminal or computer and try again. If the error persists, try downloading a different LTS version from the Node.js website. On Windows, ensure you run the installer as Administrator.

What does "command not found" mean?

This error means your terminal cannot find the program you are trying to run. Usually this happens when software was not installed correctly or your terminal needs to be restarted. Close and reopen your terminal, or restart your computer.

Can I switch between options later?

Yes. Your project files and code are the same regardless of which option you choose. You can start with the free option and upgrade to Claude Code later, or switch from Cursor to VS Code anytime.

How do I stop the development server?

Press Ctrl+C in your terminal (this works on both Mac and Windows). This sends an interrupt signal that stops the running process.

What is localhost:3000?

Localhost refers to your own computer. Port 3000 is like a door number. When you run npm run dev, it starts a local web server on port 3000. Only you can see this site - it is not on the internet yet.

Why does my Vercel deployment fail?

Common causes include: build errors in your code, missing dependencies, or incorrect project settings. Check the Vercel deployment logs for specific error messages. Make sure npm run build works locally before deploying.

What is a .gitignore file?

A .gitignore file tells Git which files and folders to ignore. You do not want to upload large folders like node_modules or sensitive files like .env to GitHub. The .gitignore file prevents accidental uploads.

How long will setup take?

Expect 30-60 minutes for Claude Code, 45-75 minutes for Cursor, or 60-90 minutes for the free option. Internet speed affects download times. Take breaks if needed - you can resume where you left off.

Can I cancel my Claude Pro subscription after finishing my website?

Yes. One month is usually enough for initial setup and building your website. You can cancel anytime and resubscribe later if you need AI assistance for updates or new features.

Congratulations! You have successfully set up your development environment. Your website is now live on the internet, and you are ready to start building. If you want a professional team to handle the web development or frontend work for you, we can help.

Your Project Structure

my-business-website/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── node_modules/
├── .gitignore
├── package.json
├── next.config.js
├── tailwind.config.ts
└── tsconfig.json

Ready for Phase 2: Keyword Research

In the next phase, you will research keywords and develop a content strategy that will help your local business rank higher on Google. Later phases cover content enhancement and advanced optimization strategies.

Continue to Phase 2 when ready.

Quick Reference Commands:

Start development server:

npm run dev

Stop development server:

Ctrl+C

Save changes to GitHub:

git add . && git commit -m "Your message" && git push

Use Claude Code:

claude "Your request here"

Need Help?

If you encountered any issues during setup, contact us at Luminous Digital Visions. We offer professional setup services and ongoing support for local businesses.