Pelajari MERN 2025: Bangun Aplikasi Full Stack dari Awal

Daftar Isi

Pengantar MERN Stack
Persiapan Lingkungan Pengembangan
Mengenal MongoDB dan Database NoSQL
Membangun Backend dengan Express.js
Membangun Frontend dengan React.js
Node.js dan Integrasi Server
Menghubungkan Frontend dan Backend
Deploy Aplikasi MERN ke Produksi
Source Code Lengkap dan Channel Pembelajaran

1. Pengantar MERN Stack

MERN adalah singkatan dari MongoDB, Express.js, React.js, dan Node.js. Ini adalah stack teknologi populer untuk membangun aplikasi web full stack modern. Dengan MERN, Anda dapat membuat aplikasi yang cepat, scalable, dan mudah dikembangkan.

MongoDB adalah database NoSQL yang menyimpan data dalam format JSON-like. Express.js adalah framework backend yang berjalan di Node.js untuk membuat API dan server. React.js adalah library frontend untuk membangun user interface yang interaktif. Node.js adalah runtime JavaScript di server yang menjalankan Express dan menghubungkan semuanya.

Diagram arsitektur MERN Stack yang menunjukkan MongoDB, Express.js, React.js, dan Node.js saling terhubung

Dalam ebook ini, Anda akan belajar langkah demi langkah membangun aplikasi full stack menggunakan MERN, mulai dari setup lingkungan, membuat backend, frontend, hingga deploy aplikasi.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menyiapkan beberapa tools berikut:

Node.js (versi terbaru) - runtime JavaScript untuk server
npm atau yarn - package manager untuk mengelola dependencies
Code editor seperti Visual Studio Code
MongoDB Atlas (cloud) atau MongoDB lokal untuk database
Postman atau Insomnia untuk testing API

Langkah instalasi Node.js dan npm:

Kunjungi https://nodejs.org dan download versi LTS terbaru.
Ikuti instruksi instalasi sesuai sistem operasi Anda.
Setelah selesai, buka terminal dan cek versi dengan perintah node -v dan npm -v .

Setup MongoDB Atlas:

Buka https://www.mongodb.com/cloud/atlas dan buat akun gratis.
Buat cluster baru dan buat user database dengan password.
Tambahkan IP address Anda ke whitelist.
Salin connection string untuk digunakan di aplikasi backend nanti.

Tampilan dashboard MongoDB Atlas dengan cluster dan user database yang sudah dibuat

3. Mengenal MongoDB dan Database NoSQL

MongoDB adalah database NoSQL yang menyimpan data dalam bentuk dokumen JSON (BSON). Ini berbeda dengan database relasional yang menggunakan tabel dan baris. MongoDB sangat fleksibel dan cocok untuk aplikasi modern yang membutuhkan skema data yang dinamis.

Contoh dokumen MongoDB untuk data pengguna:

{
  "_id": "507f1f77bcf86cd799439011",
  "nama": "Budi Santoso",
  "email": "budi@example.com",
  "umur": 28,
  "alamat": {
    "jalan": "Jl. Merdeka No.10",
    "kota": "Jakarta",
    "provinsi": "DKI Jakarta"
  }
}

Anda akan menggunakan mongoose sebagai ODM (Object Data Modeling) untuk memudahkan interaksi dengan MongoDB di Node.js.

Contoh struktur dokumen MongoDB yang berisi data pengguna dengan field nama, email, umur, dan alamat

4. Membangun Backend dengan Express.js

Express.js adalah framework minimalis untuk Node.js yang memudahkan pembuatan server dan API RESTful. Anda akan membuat server backend yang menangani request dari frontend dan berkomunikasi dengan database MongoDB.

Langkah membuat server Express sederhana:

import express from 'express';

const app = express();
const PORT = process.env.PORT || 5000;

app.use(express.json());

app.get('/', (req, res) => {
  res.send('Server MERN berjalan dengan baik!');
});

app.listen(PORT, () => {
  console.log(`Server berjalan di port ${PORT}`);
});

Anda juga akan membuat route API untuk operasi CRUD (Create, Read, Update, Delete) data pengguna.

Kode contoh server Express.js yang menangani route GET dan POST

5. Membangun Frontend dengan React.js

React.js adalah library JavaScript untuk membangun user interface yang interaktif dan responsif. Anda akan membuat komponen React untuk menampilkan data, form input, dan navigasi aplikasi.

Contoh komponen React sederhana:

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h2>Daftar Pengguna</h2>
      <ul>
        {users.map(user => (
          <li key={user._id}>{user.nama} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Contoh tampilan komponen React yang menampilkan daftar pengguna dengan nama dan email

6. Node.js dan Integrasi Server

Node.js memungkinkan Anda menjalankan JavaScript di server. Anda akan mengintegrasikan Express.js dengan MongoDB menggunakan Mongoose, serta mengatur environment variables untuk keamanan.

Contoh koneksi MongoDB dengan Mongoose:

import mongoose from 'mongoose';

const uri = process.env.MONGODB_URI;

mongoose.connect(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
.then(() => console.log('MongoDB connected'))
.catch(err => console.error('MongoDB connection error:', err));

Pastikan Anda membuat file .env untuk menyimpan MONGODB_URI dan variabel penting lainnya.

Kode contoh integrasi Node.js dengan MongoDB menggunakan Mongoose

7. Menghubungkan Frontend dan Backend

Setelah backend dan frontend siap, Anda akan menghubungkan keduanya dengan API. Frontend React akan melakukan fetch data dari backend Express dan menampilkan hasilnya.

Contoh fetch data dari API di React:

useEffect(() => {
  fetch('http://localhost:5000/api/users')
    .then(res => res.json())
    .then(data => setUsers(data))
    .catch(err => console.error(err));
}, []);

Anda juga akan belajar membuat form input di React yang mengirim data ke backend menggunakan method POST.

Tampilan aplikasi React yang menampilkan data pengguna yang diambil dari API Express

8. Deploy Aplikasi MERN ke Produksi

Setelah aplikasi selesai, saatnya deploy ke server produksi agar bisa diakses publik. Anda bisa menggunakan layanan seperti Heroku, Vercel, atau DigitalOcean.

Langkah deploy ke Heroku: