THE BASICS // VIBE CODER ESSENTIALS

01

.env FILES

Your secrets vault

WHAT GOES IN .env FILES

> API keys - Your access tokens for services like OpenAI, Anthropic, etc.
> Database URLs - Connection strings with credentials
> Secret keys - Encryption keys, session secrets
> Environment-specific values - Different configs for dev vs production

NEVER PUSH TO GIT

The .env file should ALWAYS be listed in your .gitignore. If someone gets your .env file, they have your keys to everything.

EXAMPLE FORMAT

.env

# API Keys
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxx
ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxx

# Database
DATABASE_URL=postgres://user:pass@host:5432/db

# App Settings
NODE_ENV=development
PORT=3000

02

npm run dev

Start your local server

WHAT IT DOES

Starts a local development server on your computer. This creates a mini web server that watches your files and automatically refreshes when you make changes (hot reload).

WHY YOU NEED IT

> See changes in real-time - No manual refresh needed
> Test before deploying - Catch errors locally first
> Hot reloading - Changes appear instantly in your browser

COMMON VARIATIONS

Terminal commands

npm run dev      # Generic/custom scripts
next dev          # Next.js projects
vite              # Vite projects
npm start         # Some older projects
yarn dev          # If using Yarn instead of npm

Check your package.json "scripts" section to see what commands are available.

03

package.json

Your project's manifest

WHAT IT IS

A JSON file that describes your project. It lists everything your project needs to run: its name, version, dependencies, and available commands.

SCRIPTS SECTION

Custom commands you can run with npm run [script-name]

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint ."
}

DEPENDENCIES VS DEVDEPENDENCIES

dependencies

Needed to RUN your app (React, Express, etc.)

devDependencies

Only needed to BUILD/TEST (ESLint, TypeScript, etc.)

VERSION NUMBERS EXPLAINED

// Format: MAJOR.MINOR.PATCH
"react": "^18.2.0"
         ^  = allows minor updates (18.x.x)
         ~  = allows patch updates only (18.2.x)
         18.2.0 = exact version, no updates

04

npm run build

Prepare for production

PRODUCTION VS DEVELOPMENT

DEVELOPMENT (npm run dev)

> Unoptimized, verbose
> Debug tools enabled
> Hot reload active
> Only you can see it

PRODUCTION (npm run build)

> Minified, optimized
> Debug tools removed
> Maximum performance
> Ready for real users

WHAT "SHIPPING" MEANS

When developers say "ship it," they mean deploy to production - make your code live on the internet where real users can access it.

OUTPUT FOLDERS

After building, your optimized code lands in one of these folders:

dist/      # Vite, Rollup (most common)
build/     # Create React App
.next/     # Next.js
out/       # Next.js static export
public/    # Some static site generators

This folder is what you upload to your hosting provider.

05

npm PACKAGES

Adding and managing dependencies

INSTALLING PACKAGES

# Install a package
npm install axios
npm i axios           # shorthand

# Install as dev dependency
npm install -D eslint

# Install all dependencies (from package.json)
npm install
npm i                  # shorthand

REMOVING PACKAGES

npm uninstall axios
npm un axios          # shorthand

UPDATING PACKAGES

# Update all packages
npm update

# Update specific package
npm update axios

# Check for outdated packages
npm outdated

node_modules EXPLAINED

The node_modules folder contains ALL your installed packages and their dependencies. It can get huge (hundreds of MB).

Always in .gitignore (never commit it)
Regenerate anytime with npm install
Delete and reinstall if things break

06

💀 git add .env NEVER DO THIS

The most dangerous mistake

💀

CRITICAL WARNING

This mistake can cost you thousands of dollars

WHY THIS IS DANGEROUS

> Bots scan GitHub constantly for exposed API keys
> Within minutes, attackers can use your keys to rack up charges
> Even if you delete it, git history preserves everything

HOW TO CHECK IF YOU DID IT

# Check if .env is tracked
git ls-files | grep .env

# If output shows .env, YOU HAVE A PROBLEM

# Check git history for .env
git log --all --full-history -- .env

HOW TO PREVENT IT

.gitignore

# Environment files - ALWAYS ignore these
.env
.env.local
.env.*.local
.env.development
.env.production

IF YOU ALREADY PUSHED IT

1. Immediately rotate ALL exposed keys - Generate new ones
2. Remove from git tracking: git rm --cached .env
3. Add to .gitignore and commit
4. Consider using BFG Repo-Cleaner to scrub history

Even after removal, consider those keys compromised forever.

07

localhost:3000 IS NOT REAL

Understanding local vs production

WHAT localhost MEANS

localhost is a special address that means "this computer". The number after the colon is the port (like different doors into the same building).

localhost:3000 = Your computer, port 3000
Only accessible from YOUR machine, in YOUR browser.

WHY OTHERS CAN'T SEE IT

> It's not on the internet - It only exists on your computer
> No domain name - There's nothing for browsers to look up
> Firewall blocked - Even if they had your IP, routers block it

DEV VS PRODUCTION URLs

DEVELOPMENT

http://localhost:3000

Only you can see this

PRODUCTION

https://yoursite.com

Anyone can see this

Pro tip: To share your local work with others, use services like ngrok, Vercel preview deploys, or GitHub Pages.

08

ENV VARS ≠ HARDCODED

Why you use environment variables

WHY USE ENV VARS

> Security - Secrets never touch your code
> Flexibility - Different values for dev/staging/production
> Team safety - Each person uses their own keys

THE WRONG WAY

NEVER DO THIS

// Hardcoded API key - DANGEROUS!
const apiKey = "sk-xxxxxxxxxxxxxxxxxxxxx";

fetch("https://api.openai.com/v1/chat", {
  headers: {
    Authorization: `Bearer ${apiKey}`
  }
});

THE RIGHT WAY

CORRECT APPROACH

// Read from environment variable
const apiKey = process.env.OPENAI_API_KEY;

fetch("https://api.openai.com/v1/chat", {
  headers: {
    Authorization: `Bearer ${apiKey}`
  }
});

Security implications

If you hardcode secrets and push to GitHub, you're essentially publishing your password to the world. Environment variables keep secrets separate from code.

09

TERMINAL ERRORS MATTER

Don't ignore the red text

DON'T IGNORE RED TEXT

Red text in your terminal is not decoration. It's your code telling you something broke. Every error message contains clues about what went wrong.

HOW TO READ ERROR MESSAGES

Example error

Error: Cannot find module 'express'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at /Users/you/project/server.js:1:17

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1. Error type: "Cannot find module" = missing package
2. What's missing: 'express'
3. Where it happened: server.js, line 1
4. Solution: npm install express

WHAT TO COPY WHEN ASKING AI FOR HELP

1.

The FULL error message

Not just the first line - copy everything in red

2.

What command you ran

"I ran npm run dev and got this error"

3.

The relevant code file

Usually mentioned in the error's file path

4.

What you expected to happen

Context helps AI understand the problem

COMMON ERROR TYPES

MODULE_NOT_FOUND Run npm install

ENOENT File or directory doesn't exist

EADDRINUSE Port already in use - close other servers

SyntaxError Typo in your code (missing bracket, comma, etc.)

THE_BASICS