MERN Stack
Express
Setup

Setup Express.js dan TypeScript

Instalasi

Inisialisasi Project

Kita perlu menjalankan perintah ini npm init -y. Untuk membuat inisialisasi dari project.

npm init -y

Init the tsconfig

Pastikan kamu sudah meng-install library TypeScript secara global, jika belum bisa jalankan perintah berikut,

sudo npm i -g typescript

Jika sudah, kita bisa mengecek apakah sudah ter-install dengan menjalankan,

tsc -v

Kemudian, baru kita bisa melakukan inisialisasi (init) untuk tsconfig.

tsc --init

Setup tsconfig dan buat folder src

Buka file tsconfig.json, kemudian lakukan seperti berikut, cari rootDir lalu isikan,

tsconfig.json
"rootDir": "./src"

Selanjutnya, buat folder src di dalam src buat file index.ts.

Install Nodemon dan ts-node

npm i -D nodemon ts-node

Kemudian, atur pada package.json di scripts buat baru seperti berikut,

package.json
"scripts": {
  "dev": "nodemon src/index.ts"
}

Install Express

npm i express

Lalu, coba import library Express yang sudah di-install, import express from "express". Di sana menunjukkan belum bisa digunakan karena kita belum install untuk TypeScript. Jalankan perintah di bawah ini untuk install @types/express.

npm i -D @types/express

Handling Header

Buat file index.ts di dalam folder src. Kemudian tambahkan script untuk handling header.

src/index.ts
import express, { Request, Response, NextFunction } from "express";
 
const app = express();
const port = 8000; // port yang nanti digunakan untuk menjalankan server
 
// Middleware untuk menambahkan header ke semua respons
app.use((req: Request, res: Response, next: NextFunction) => {
  res.setHeader("Express.js dan TypeScript", "|", "Devscale Indonesia");
  next();
});

Handling Body

Contoh handling body untuk menampilkan pesan method get.

src/index.ts
// Route untuk menangani permintaan GET
app.get("/", (req: Request, res: Response) => {
  res.json({
    message: "Belajar Express.js dan TypeScript di Bootcamp Devscale Indonesia",
  });
});

Contoh handling body untuk menampilkan nama dan umur dengan method post.

src/index.ts
// Route untuk menangani permintaan POST
app.post("/data", (req: Request, res: Response) => {
  const { name, age } = req.body;
  if (!name || !age) {
    return res.json({ error: "Nama dan umur diperlukan" });
  }
  res.json({ message: `Data diterima: ${name}, ${age}` });
});

Contoh kasus jika router/rute tidak ditemukan.

src/index.ts
// Penanganan rute yang tidak ditemukan
app.use((req: Request, res: Response) => {
  res.json({ error: "Rute tidak ditemukan" });
});

Status

Kamu dapat menambahkan status dari handling body yang sudah kamu buat sebelumnya.

Contoh pada handling body method get. Tambahkan status(200) yang artinya OK atau permintaan yang dilakukan oleh client telah berhasil diproses oleh server.

src/index.ts
// Route untuk menangani permintaan GET
app.get("/", (req: Request, res: Response) => {
  res.status(200).json({
    message: "Belajar Express.js dan TypeScript di Bootcamp Devscale Indonesia",
  });
});

Contoh pada handling body method post. Tambahkan status(400) dan status(200). Status 400 (Bad Request) yang artinya server tidak dapat memproses permintaan dari client karena terdapat kesalahan pada permintaan.

src/index.ts
// Route untuk menangani permintaan POST
app.post("/data", (req: Request, res: Response) => {
  const { name, age } = req.body;
  if (!name || !age) {
    return res.status(400).json({ error: "Nama dan umur diperlukan" });
  }
  res.status(201).json({ message: `Data diterima: ${name}, ${age}` });
});

Contoh pada handling body router/rute yang tidak ditemukan. Tambahkan status(404). Status 400 (Not Found) yang artinya server tidak dapat menemukan konten yang diminta oleh client.

src/index.ts
// Penanganan rute yang tidak ditemukan
app.use((req: Request, res: Response) => {
  res.status(404).json({ error: "Rute tidak ditemukan" });
});

Dan masih banyak HTTP status-status codes yang lain.

Menjalankan Server/Proyek

src/index.ts
app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});

Kemudian, jalankan perintah,

npm run dev // using npm
pnpm dev // using pnpm

Lalu, buka http://locahost:8000 dan tambahkan /data untuk membuka halaman data http://locahost:8000/data di website kamu.

IntroMongoDB