📖 Overview

Before building our app, we need to set up the development environment. This guide covers installation for:

• macOS (recommended for iOS development)
• Windows (good for Android development)
• Ubuntu/Debian (Linux users)

🍎 macOS Installation

Step 1: Install Homebrew (Package Manager)

Open Terminal and run:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Step 2: Install Node.js

# Install Node.js LTS version
brew install node@20

# Verify installation
node -v  # Should show v20.x.x
npm -v   # Should show 10.x.x

Step 3: Install VS Code

Download from code.visualstudio.com or:

brew install --cask visual-studio-code

Recommended VS Code Extensions:

• React Native Tools
• ES7+ React/Redux/React-Native snippets
• Tailwind CSS IntelliSense
• Prettier
• ESLint

Step 4: Install Expo CLI

npm install -g expo-cli eas-cli

Step 5: Install Expo Go on iPhone/iPad

1. Open App Store
2. Search "Expo Go"
3. Install and create account

Step 6: (Optional) Install Xcode for iOS Simulator

# Install Xcode from App Store, then:
sudo xcode-select --switch /Applications/Xcode.app

# Install iOS Simulator
xcodebuild -downloadPlatform iOS

🪟 Windows Installation

Step 1: Install Node.js

1. Download LTS version from nodejs.org
2. Run installer, accept all defaults
3. Restart terminal/command prompt

Verify:

node -v
npm -v

Step 2: Install VS Code

Download from code.visualstudio.com and install.

Configure VS Code Terminal:

1. Open VS Code
2. Press Ctrl+Shift+P
3. Type "Terminal: Select Default Profile"
4. Choose "Command Prompt" or "PowerShell"

Step 3: Install Expo CLI

npm install -g expo-cli eas-cli

Step 4: Install Expo Go on Android

1. Open Google Play Store
2. Search "Expo Go"
3. Install and create account

Step 5: (Optional) Install Android Studio

For Android Emulator:

1. Download from developer.android.com/studio
2. Run installer
3. Open Android Studio → More Actions → SDK Manager
4. Install "Android SDK Platform 34"
5. Install "Android SDK Build-Tools 34.0.0"

Set Environment Variables:

Add to System Environment Variables:

Add to PATH:

🐧 Ubuntu/Debian Installation

Step 1: Update System

sudo apt update && sudo apt upgrade -y

Step 2: Install Node.js via nvm

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

# Restart terminal, then:
nvm install 20
nvm use 20
nvm alias default 20

# Verify
node -v
npm -v

Step 3: Install VS Code

# Download .deb from code.visualstudio.com or:
sudo snap install code --classic

Step 4: Install Expo CLI

npm install -g expo-cli eas-cli

Step 5: Install Expo Go

Install Expo Go on your Android phone from Play Store.

Step 6: (Optional) Install Android Studio

# Install Java
sudo apt install openjdk-17-jdk

# Download Android Studio from developer.android.com/studio
# Extract and run ./studio.sh

# Add to ~/.bashrc:
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

✅ Verify Installation

Run these commands to verify everything is installed:

# Node.js
node -v
# Expected: v20.x.x

# npm
npm -v
# Expected: 10.x.x

# Expo CLI
expo --version
# Expected: 6.x.x

# EAS CLI
eas --version
# Expected: 7.x.x

🎯 Create Test Project

Let's verify by creating a test project:

# Create new Expo project
npx create-expo-app@latest test-app --template blank

# Navigate to project
cd test-app

# Start development server
npx expo start

Open on Phone:

1. Make sure phone and computer are on the same WiFi
2. Open Expo Go app
3. Scan the QR code from terminal

If you see "Open up App.js to start working on your app!" on your phone, installation is successful! 🎉

🔧 Troubleshooting

Cannot connect to Metro Bundler

• Ensure phone and computer are on the same network
• Try pressing s in terminal to switch to Tunnel mode
• Disable VPN if active

Android Emulator not starting

• Enable VT-x in BIOS
• Increase emulator RAM to 2GB
• Use x86_64 system image

Expo Go crashes

• Update Expo Go to latest version
• Clear Expo Go cache
• Reinstall the app

🚀 Next Steps

In Part 3, we'll create our Expo project and configure NativeWind, folder structure, and base API services.

← Part 1: Introduction | Next: Project Setup →

This series is created to support the Casual Meetup #15 at LampungDev.