Tutorial Setup Project Express.js - Pewrira Learning Center

 

1. Latar Belakang

    Setelah kita kenalan dengan Express.js, selanjutnya kita akan fokus pada Setup Project Express.js. Sebelum bisa membangun aplikasi backend yang canggih, kita harus menguasai cara menyiapkan environment development dengan benar. Ibarat mau masak rendang, kita harus siapkan dulu dapurnya, kompornya, dan bahan-bahannya. Express.js adalah "kompor" kita, Node.js adalah "gas"-nya, dan npm adalah "tukang sayur" yang kasih bahan-bahan yang kita butuhkan.

 

2. ALAT DAN BAHAN

2.1 Perangkat Lunak

1. Visual Studio Code - dengan extension Node.js dan REST Client
2. Node.js - Runtime environment untuk JavaScript server-side
3. Postman - Untuk testing API endpoints
4. Git - Untuk version control
5. npm - Untuk manajemen dependencies

2.2 Perangkat Keras

1. Laptop - dengan lingkungan pengembangan yang sudah terkonfigurasi 

 

3. Pembahasan

3.1 Konsep Dasar Setup

Analogi Sederhana:

• Node.js = Mesin mobil
• npm = Pom bensin + bengkel
• Express.js = Stir, rem, gas mobil
• Project kita = Mobil yang siap dipakai

Kenapa Setup Penting?

1. Supaya terorganisir - Kode rapi, mudah dicari
2. Supaya bisa kerja tim - Orang lain bisa lanjutin project kita
3. Supaya mudah develop - Auto restart, error langsung ketahuan
4. Supaya siap deploy - Sudah pakai struktur standar

3.2 Langkah-langkah Praktik

Langkah 1: Cek Node.js

bash

# Buka terminal/CMD
node --version
# Harus muncul: v18.x.x
# Kalo muncul error, berarti belum install Node.js

Cara Install Node.js:

1. Buka website: https://nodejs.org
2. Klik tombol hijau "Get Node.js" 
3. Kamu bisa pilih versi yang berapa, tapi pilih yang LTS aja, bisa intall via curl atau bisa juga download via installernya
   
4. Install seperti biasa
5. Restart komputer

Langkah 2: Bikin Folder Project

bash

# Buka folder tempat mau simpan project
# Misal: di Documents/GitHub
cd Documents/GitHub

# Bikin folder baru
mkdir belajar-expressjs

# Masuk ke folder itu
cd belajar-expressjs

Langkah 3: Inisialisasi Project

bash

# Ketik di terminal:
npm init -y

File package.json yang terbentuk:

Penjelasan:

• name: Nama project kita
• version: Versi project (1.0.0 = versi pertama)
• main: File utama yang akan dijalankan
• scripts: Perintah-perintah yang bisa kita panggil

Langkah 4: Install Express dan Nodemon

bash

# Install Express (bahan utama)
npm install express

# Install Nodemon (tools bantu untuk live update)
npm install nodemon --save-dev

Perbedaan:

• npm install express → Untuk production (akan dipakai user)
• npm install nodemon --save-dev → Hanya untuk development (kita pakai saat coding)

Langkah 5: Update Scripts di package.json

Setelah install express dan nodemon, bisa masuk ke code editor dengan mengetikkan 'code  .'  otomatis akan diarahkan ke VSCode sesuai direktori saat ini, lalu ubah file package.json pada bagian scripts jadi gini:

json

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js",
  "test": "echo \"Error: no test specified\" && exit 1"
}

Artinya:

• npm run dev → Jalanin server mode development (pake nodemon)
• npm start → Jalanin server mode production (tanpa nodemon)

Langkah 6: Bikin File Server.js

Buat file baru dengan nama server.js:

Langkah 7: Jalankan Server!

bash

# Di terminal, ketik:
npm run dev

Output yang harus muncul:

Langkah 8: Test di Browser

1. Buka Chrome/Firefox
2. Ketik: http://localhost:3000
   
   

3. Lihat homepage yang muncul

3.3 Fitur Nodemon yang Keren

Apa itu Nodemon?

• Tools yang auto restart server saat kita save file
• Jadi gak perlu stop-start manual
• Error langsung keliatan di terminal

Coba buktikan:

1. Biarkan server jalan (npm run dev)
2. Buka file server.js
3. Edit teks di route /about
4. Save file (Ctrl+S)
5. Lihat terminal → server auto restart!
6. Refresh browser → perubahan langsung kelihatan!

3.4 Struktur Project Kita Sekarang

text

belajar-express/          ← Folder project kita
├── node_modules/         ← Semua library yang diinstall
├── server.js             ← Kode utama kita
├── package.json          ← Konfigurasi project
├── package-lock.json     ← Daftar versi library
└── .gitignore            ← (nanti kita buat)

3.5 Troubleshooting Umum

Problem 1: Port 3000 sudah dipakai

bash

Error: listen EADDRINUSE: address already in use :::3000

Solusi:

javascript

// Ganti port di server.js
const PORT = 3001; // atau 3002, 3003, dst

Problem 2: "Cannot find module 'express'"

bash

Error: Cannot find module 'express'

Solusi:

bash

# Pastikan sudah di folder yang benar
cd belajar-express

# Install ulang
npm install

Problem 3: Nodemon tidak auto restart

Solusi:

1. Pastikan pakai npm run dev bukan npm start
2. Cek di package.json script "dev" harus pake nodemon
3. Restart terminal

3.6 Bonus: Tambahan Keren

Buat file .env untuk setting:

Update server.js:

javascript

// Tambah di paling atas
require('dotenv').config();

// Install dotenv dulu
// npm install dotenv --save-dev

// Ganti const PORT = 3000; jadi:
const PORT = process.env.PORT || 3000;

// Tambah di route /
app.get('/', (req, res) => {
  res.send(`
    <h1>${process.env.APP_NAME}</h1>
    <p>Dibuat oleh: ${process.env.AUTHOR}</p>
    ...
  `);
});

jadi gini:

4. Daftar Pustaka

1. Node.js Documentation (n.d.). Getting Started Guide. https://nodejs.org
2. Express.js Official Guide (n.d.). Hello World Example. https://expressjs.com/en/starter/hello-world.html
3. npm Documentation (2024). Creating a package.json file. https://docs.npmjs.com
4. nodemon GitHub Repository (n.d.). nodemon - Monitor for any changes. https://github.com/remy
5. W3Schools Node.js Tutorial (n.d.). Node.js Introduction. https://www.w3schools.com
6. Express.js Official Guide (n.d.). Routing. https://expressjs.com