1.2 Setup Development Environment untuk MERN Stack

Setup Development Environment untuk MERN Stack

Sebelum memulai pengembangan aplikasi MERN stack, kita perlu menyiapkan development environment yang diperlukan. Berikut adalah panduan langkah demi langkah untuk menginstall semua tools yang dibutuhkan.

1. Instalasi Node.js dan npm

Node.js adalah runtime environment JavaScript yang akan kita gunakan untuk menjalankan server backend, sedangkan npm (Node Package Manager) adalah package manager untuk menginstall dependencies.

Windows

1. Kunjungi website resmi Node.js: https://nodejs.org

2. Download versi LTS (Long Term Support) terbaru

3. Jalankan installer dan ikuti wizard instalasi

4. Buka Command Prompt dan verifikasi instalasi:

   node --version
   npm --version

macOS

1. Install Homebrew jika belum ada:

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

2. Install Node.js menggunakan Homebrew:

   brew install node

3. Verifikasi instalasi:

   node --version
   npm --version

Linux (Ubuntu/Debian)

1. Update package list:

   sudo apt update

2. Install Node.js dan npm:

   sudo apt install nodejs npm

3. Verifikasi instalasi:

   node --version
   npm --version

2. Instalasi MongoDB Community Edition

MongoDB adalah database NoSQL yang akan kita gunakan untuk menyimpan data aplikasi.

Windows

1. Download MongoDB Community Server dari: https://www.mongodb.com/try/download/community

2. Jalankan installer dan pilih "Complete" installation

3. Install MongoDB Compass (GUI tool) jika ditawarkan

4. Verifikasi instalasi dengan membuka MongoDB Compass

macOS

1. Install menggunakan Homebrew:

   brew tap mongodb/brew
   brew install mongodb-community

2. Start MongoDB service:

   brew services start mongodb-community

3. Download dan install MongoDB Compass (opsional)

Linux (Ubuntu/Debian)

1. Import public key MongoDB:

   wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -

2. Buat file list untuk MongoDB:

   echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list

3. Update package list dan install MongoDB:

   sudo apt update
   sudo apt install mongodb-org

4. Start MongoDB service:

   sudo systemctl start mongod

3. Instalasi Visual Studio Code

VS Code adalah code editor yang akan kita gunakan untuk development.

1. Download VS Code dari: https://code.visualstudio.com/

2. Install sesuai sistem operasi

3. Install extensions yang direkomendasikan:

   • ESLint

   • Prettier

   • MongoDB for VS Code

   • GitLens

   • React Developer Tools

   • JavaScript (ES6) code snippets

4. Instalasi Postman

Postman adalah tool untuk testing API yang akan kita buat.

1. Download Postman dari: https://www.postman.com/downloads/

2. Install sesuai sistem operasi

3. Buat akun Postman (gratis) atau skip

4. Familiarisasi dengan interface Postman:

   • Collections

   • Requests

   • Environment variables

   • HTTP methods

5. Pengenalan Git Dasar

Git adalah version control system yang akan membantu mengelola kode.

Instalasi Git

Windows

1. Download dari: https://git-scm.com/download/win

2. Jalankan installer dengan pengaturan default

macOS

brew install git

Linux

sudo apt install git

Konfigurasi Git Dasar

1. Set user name dan email:

   git config --global user.name "Nama Anda"
   git config --global user.email "[e-mail]"

Perintah Git Dasar

• git init: Inisialisasi repository baru

• git add: Menambahkan file ke staging area

• git commit: Menyimpan perubahan

• git status: Melihat status repository

• git log: Melihat history commit

• git branch: Manajemen branch

• git checkout: Pindah branch

• git merge: Menggabungkan branch

• git push: Upload perubahan ke remote

• git pull: Download perubahan dari remote

Verifikasi Setup

Setelah semua instalasi selesai, verifikasi setup dengan:

1. Buat folder project baru:

   mkdir mern-attendance
   cd mern-attendance

2. Inisialisasi project Node.js:

   npm init -y

3. Buat repository Git:

   git init

4. Pastikan MongoDB berjalan:

   # Windows
   mongod
   
   # macOS/Linux
   sudo systemctl status mongod

5. Buka VS Code dan Postman untuk memastikan keduanya berfungsi dengan baik

Troubleshooting Umum

1. Node.js/npm

   • Pastikan PATH environment variable tersetup dengan benar

   • Coba restart terminal/command prompt

   • Uninstall dan install ulang jika perlu

2. MongoDB

   • Pastikan service MongoDB berjalan

   • Check port 27017 tidak digunakan aplikasi lain

   • Verifikasi firewall settings

3. VS Code

   • Update ke versi terbaru

   • Reset user settings jika ada masalah

   • Reinstall extensions bermasalah

4. Git

   • Verifikasi SSH key untuk remote repository

   • Check Git Credential Manager

   • Pastikan proxy settings jika dibelakang corporate network