Tutorial: Membuat aplikasi Node.js dan Express di Visual Studio

2025-06-12

Artikel ini menunjukkan cara menggunakan Visual Studio untuk membangun aplikasi web Node.js dasar yang menggunakan kerangka kerja Ekspres.

Node.js adalah lingkungan runtime JavaScript sisi server yang menjalankan kode JavaScript. Secara default, Node.js menggunakan pengelola paket npm untuk memudahkan penggunaan dan berbagi pustaka kode sumber Node.js. Manajer paket npm menyederhanakan penginstalan, pembaruan, dan penghapusan instalasi pustaka.

Express adalah kerangka kerja aplikasi web server yang Node.js gunakan untuk membangun aplikasi web. Dengan Express, ada banyak cara berbeda untuk membuat antarmuka pengguna. Implementasi yang disediakan dalam tutorial ini menggunakan mesin templat default generator aplikasi Express, yang disebut Pug, untuk merender frontend.

Dalam tutorial ini, Anda:

Membuat aplikasi Node.js dengan menggunakan templat JavaScript
Bangun aplikasi dan periksa proses yang sedang berjalan
Men-debug aplikasi di debugger Visual Studio

Prasyarat

Visual Studio 2022 versi 17.12 atau yang lebih baru dengan paket pengembangan ASP.NET dan web yang terinstal.
- Untuk menginstal Visual Studio secara gratis, buka halaman unduhan Visual Studio.
- Jika Anda sudah memiliki Visual Studio, Anda dapat menginstal beban kerja dari dalam Interactive Development Environment (IDE):
  1. Pilih Alat >Dapatkan Alat dan Fitur.
  2. Di Penginstal Visual Studio, pilih tab Beban Kerja.
  3. Pilih beban kerja ASP.NET dan pengembangan web, lalu pilih Ubah.
  4. Ikuti perintah dan selesaikan penginstalan.
Node.js dengan manajer paket npm dan paket npx.

Anda dapat memeriksa penginstalan Node.js dengan perintah node -v. Output perintah harus menampilkan versi Node.jsyang diinstal, seperti v23.4.0. Untuk informasi selengkapnya, lihat Mengunduh dan menginstal Node.js dan npm.
- Manajer paket npm disertakan dalam penginstalan Node.js. Verifikasi penginstalan dengan perintah npm -v. Hasil perintah harus menunjukkan versi pengelola paket yang diinstal, seperti 10.9.2.
- Paket npx adalah bagian dari CLI npm. Konfirmasikan penginstalan paket dengan perintah npx -v. Hasil perintah harus menunjukkan versi paket yang diinstal, seperti 10.9.2.

Membuat aplikasi Anda

Ikuti langkah-langkah ini untuk membuat aplikasi Node.js baru di Visual Studio:

Di jendela Mulai Visual Studio (Jendela Mulai>Jendela Mulai), pilih Buat proyek baru:
Di kotak Pencarian, masukkan Express, dan pilih templat Aplikasi JavaScript Express dalam daftar hasil:
Pilih Berikutnya untuk melanjutkan ke halaman konfigurasi.
Masukkan nama Project dan nama solusi untuk aplikasi baru Anda. Pilih Lokasi default atau telusuri ke jalur lain di lingkungan Anda.
Pilih Buat untuk membuat proyek Node.js baru.

Visual Studio membuat proyek baru Anda dan membuka hierarki proyek Anda di Solution Explorer.

Menampilkan properti proyek Anda

Pengaturan proyek default memungkinkan Anda untuk membangun dan men-debug proyek. Anda dapat mengubah pengaturan sesuai kebutuhan.

Di Penjelajah Solusi, klik kanan proyek dan pilih Properti. Anda juga dapat mengakses properti ini dengan memilih Project>ExpressProject Properties.
Di panel Properti Proyek, buka bagian Build dan konfigurasikan properti sesuai keinginan.
Untuk mengonfigurasi pengaturan debug, pilih Debug>Properti Debug ExpressProject.

Nota

File launch.json menyimpan pengaturan startup yang terkait dengan tindakan Mulai di toolbar Debug. Saat ini, launch.json harus terletak di folder .vscode.

Membangun proyek Anda

Bangun proyek Anda dengan memilih Build>Build Solution.

Memulai aplikasi Anda

Mulai aplikasi baru Anda dengan memilih Ctrl + F5 atau Mulai Tanpa Debugging (ikon panah hijau) di bilah alat.

Terminal terbuka dan menunjukkan perintah eksekusi:

> expressproject@0.0.0 start
> node ./bin/www

GET / 200 29342.066 ms - 170
GET /stylesheets/style.css 200 18.967 ms - 111

Nota

Periksa output terminal untuk pesan. Juga periksa panel Output di Visual Studio. Perhatikan petunjuk untuk memperbarui versi Node.jsAnda.

Saat aplikasi berhasil diluncurkan, jendela browser terbuka menampilkan aplikasi Ekspres:

Cuplikan layar yang memperlihatkan aplikasi Ekspres yang sedang berjalan di browser.

Men-debug aplikasi Anda

Sekarang Anda siap untuk menjelajahi cara untuk men-debug aplikasi Anda.

Jika aplikasi Anda masih berjalan, pilih Shift + F5 untuk mengakhiri sesi saat ini atau Hentikan (ikon persegi merah) di toolbar Debug. Anda mungkin melihat bahwa mengakhiri sesi menutup browser yang menampilkan aplikasi Anda, tetapi jendela terminal yang menjalankan proses Node tetap terbuka. Untuk saat ini, lanjutkan dan tutup jendela yang masih ada. Kemudian dalam artikel ini, Anda akan meninjau skenario kapan Anda mungkin ingin membiarkan proses Node tetap berjalan.

Debugging proses Node

Daftar pilihan di sebelah kiri tindakan Mulai menampilkan opsi mulai yang tersedia untuk aplikasi.

localhost (Edge)
localhost (Chrome)
Luncurkan ExpressProject
Luncurkan Node dan Peramban

Ikuti langkah-langkah ini untuk men-debug proses Node untuk aplikasi:

Pada daftar dropdown Mulai, pilih Luncurkan Node dan Browser.
Di Penjelajah Solusi, perluas folder rute dan buka file index.js.
Di editor kode, atur titik henti dalam file index.js:
1. Temukan pernyataan kode res.render('index', { title: 'Express' });.
2. Pilih di kolom kiri pada baris pernyataan tersebut. Visual Studio menambahkan lingkaran merah di gutter untuk menunjukkan titik henti yang ditetapkan.
Tips

Anda juga dapat menempatkan kursor pada baris kode dan memilih F9 untuk mengalihkan titik henti untuk baris tersebut.
Mulai aplikasi Anda di debugger dengan memilih F5 atau Mulai Debugging (ikon panah hijau) di toolbar Debug.

Visual Studio memulai eksekusi aplikasi Anda. Saat debugger mencapai titik henti yang Anda tetapkan, proses debugging akan dijeda.
Saat eksekusi dijeda, Anda dapat memeriksa status aplikasi Anda. Arahkan mouse ke atas variabel dan periksa propertinya.
Saat Anda siap untuk melanjutkan, pilih F5. Pemrosesan berlanjut dan aplikasi Anda terbuka di browser.

Kali ini, jika Anda memilih Hentikan, perhatikan bahwa browser dan jendela terminal ditutup. Untuk memahami mengapa perilakunya berbeda, lihat lebih dekat file launch.json.

Memeriksa file launch.json

Ikuti langkah-langkah berikut untuk memeriksa file launch.json untuk proyek:

Di Penjelajah Solusi, perluas folder .vscode dan buka file launch.json.

Tips

Jika Anda tidak melihat folder .vscode di Solution Explorer, pilih opsi Tampilkan Semua File di toolbar Solution Explorer.
Silakan lihat file di editor kode. Jika Anda memiliki pengalaman dengan Visual Studio Code, file launch.json mungkin terlihat akrab. File launch.json dalam proyek ini sesuai dengan file yang digunakan oleh Visual Studio Code untuk menunjukkan konfigurasi pemuatan yang digunakan untuk debugging. Setiap entri menentukan satu atau beberapa target untuk debug.
Periksa dua entri pertama dalam file. Entri ini menentukan perilaku untuk browser internet yang berbeda:
```
    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }
```
Browser yang didukung ditunjukkan dengan properti type. Jika Anda meluncurkan aplikasi hanya dengan jenis browser sebagai target debug satu-satunya, Visual Studio hanya men-debug proses browser front-end. Proses Node dimulai tanpa debugger terhubung. Visual Studio tidak menghubungkan titik henti apa pun yang sudah ditetapkan dalam proses Node.js.

Nota

Saat ini, edge dan chrome adalah satu-satunya jenis browser yang didukung untuk debugging.

Ketika Anda mengakhiri sesi, proses Node terus berjalan, berdasarkan desain. Proses ini sengaja dibiarkan berjalan ketika browser adalah target debug. Jika pekerjaan hanya dilakukan pada frontend, memiliki proses backend yang terus berjalan memudahkan alur kerja pengembangan.

Pada awal bagian ini , Anda menutup jendela terminal yang terbuka agar Anda dapat mengatur titik henti dalam proses Node. Untuk mengaktifkan Visual Studio untuk men-debug proses Node, proses harus dimulai ulang dengan debugger yang terpasang. Jika proses Node yang tidak dapat di-debug tetap berjalan, mencoba meluncurkan proses Node dalam mode debug (tanpa mengonfigurasi ulang port) gagal.

Tinjau entri ketiga dalam file launch.json. Entri ini menentukan node sebagai jenis debug:

    {
      "name": "Launch ExpressProject",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

Entri ketiga hanya meluncurkan proses Node dalam mode debug. Visual Studio tidak meluncurkan browser.

Periksa entri keempat dalam file launch.json, yang mendefinisikan konfigurasi peluncuran gabungan:
```
    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Launch ExpressProject",                   
        "localhost (Edge)"
      ]
    }
```
Konfigurasi gabungan ini sama dengan konfigurasi peluncuran gabungan di Visual Studio Code . Saat memilih konfigurasi ini, Anda dapat men-debug frontend dan backend. Perhatikan bahwa definisi hanya mereferensikan konfigurasi peluncuran individual untuk proses Node dan browser.

Ada banyak atribut lain yang dapat Anda gunakan dalam konfigurasi peluncuran. Misalnya, Anda dapat menyembunyikan konfigurasi untuk menghapusnya dari daftar dropdown Mulai, tetapi mengizinkan referensi ke konfigurasi dengan mengatur atribut hidden di objek presentation ke true:
```
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }
```
Konfigurasikan opsi dengan menggunakan atribut yang didukung untuk meningkatkan pengalaman debugging Anda. Saat ini, hanya konfigurasi peluncuran yang didukung. Setiap upaya untuk menggunakan konfigurasi lampiran mengakibatkan kegagalan penyebaran. Untuk informasi selengkapnya, lihat opsi .

Bagikan melalui