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

Dalam artikel ini, Anda akan mempelajari cara menggunakan Visual Studio untuk membuat aplikasi web Node.js sederhana yang menggunakan kerangka kerja Ekspres.

Sebelum memulai, berikut adalah Tanya Jawab Umum singkat untuk memperkenalkan Anda pada beberapa konsep utama:

• Apa itu Node.js?

  Node.js adalah lingkungan runtime JavaScript sisi server yang menjalankan kode JavaScript.

• Apa yang dimaksud dengan npm?

  Manajer paket memudahkan penggunaan dan berbagi pustaka kode sumber Node.js. Manajer paket default untuk Node.js adalah npm. Manajer paket npm menyederhanakan penginstalan, pembaruan, dan penghapusan instalasi pustaka.

• Apa yang dimaksud dengan Ekspres?

  Ekspres 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 front-end.

Prasyarat

Pastikan untuk menginstal hal berikut:

• Visual Studio 2022 versi 17.4 atau yang lebih baru dengan beban kerja ASP.NET dan pengembangan web terinstal. Buka halaman unduhan Visual Studio untuk menginstalnya secara gratis. Jika Anda perlu memasang beban kerja dan sudah memiliki Visual Studio, buka Alat>Dapatkan Alat dan Fitur..., yang akan membuka alat penginstal Visual Studio. Pilih beban kerja ASP.NET dan pengembangan web, lalu pilih Ubah.
• npm (https://www.npmjs.com/), yang disertakan dengan Node.js
• npx (https://www.npmjs.com/package/npx)

Membuat aplikasi Anda

1. Di jendela Mulai (pilih Jendela Mulai File>untuk dibuka), pilih Buat proyek baru.

   

2. Cari Express di bilah pencarian di bagian atas lalu pilih Aplikasi JavaScript Express.

   

3. Beri nama proyek dan solusi Anda.

Menampilkan properti proyek

Pengaturan proyek default memungkinkan Anda untuk membangun dan men-debug proyek. Tetapi, jika Anda perlu mengubah pengaturan, klik kanan proyek di Penjelajah Solusi, pilih Properti, lalu buka bagian Build atau Debugging.

Catatan

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

Bangun proyek Anda

Pilih Build>Solusi Build untuk membangun proyek.

Memulai aplikasi Anda

Tekan F5 atau pilih tombol Mulai di bagian atas jendela, dan Anda akan melihat prompt perintah:

• npm yang menjalankan perintah node ./bin/www

Catatan

Periksa output konsol untuk pesan, seperti pesan yang menginstruksikan Anda untuk memperbarui versi Node.js Anda.

Selanjutnya, Anda akan melihat aplikasi Express dasar muncul!

Men-debug aplikasi Anda

Kami sekarang akan melalui beberapa cara untuk men-debug aplikasi Anda.

Pertama, jika aplikasi Anda masih berjalan, tekan Shift + F5 atau pilih tombol berhenti merah di bagian atas jendela untuk menghentikan sesi saat ini. Anda mungkin melihat bahwa menghentikan sesi menutup browser yang menampilkan aplikasi Anda, tetapi meninggalkan jendela prompt perintah yang menjalankan proses Node. Untuk saat ini, lanjutkan dan tutup perintah yang berlama-lama. Kemudian dalam artikel ini, kami menjelaskan mengapa Anda mungkin ingin membiarkan proses Node berjalan.

Men-debug proses Node

Di menu dropdown di samping tombol Mulai , Anda akan melihat opsi mulai berikut:

• localhost (Edge)
• localhost (Chrome)
• Debug Dev Env
• Luncurkan Simpul dan Browser

Lanjutkan dan pilih opsi Luncurkan Simpul dan Browser . Sekarang, sebelum menekan F5 atau memilih tombol Mulai lagi, atur titik henti di index.js (di folder rute ) dengan memilih selokan kiri sebelum baris kode berikut: res.render('index', { title: 'Express' });

Tip

Anda juga dapat meletakkan kursor pada baris kode dan menekan F9 untuk mengalihkan titik henti untuk baris tersebut.

Kemudian, tekan F5 atau pilih Debug>Mulai Penelusuran Kesalahan untuk men-debug aplikasi Anda.

Anda akan melihat jeda debugger di titik henti yang baru saja Anda tetapkan. Saat dijeda, Anda dapat memeriksa status aplikasi. Mengarahkan mouse ke atas variabel akan memungkinkan Anda memeriksa propertinya.

Setelah selesai memeriksa status, tekan F5 untuk melanjutkan, dan aplikasi Anda harus dimuat seperti yang diharapkan.

Kali ini, jika Anda berhenti, Anda akan melihat bahwa browser dan jendela prompt perintah ditutup. Untuk melihat mengapa, lihat lebih dekat launch.json.

Memahami launch.json

Launch.json saat ini terletak di folder .vscode. Jika Anda tidak dapat melihat folder .vscode di Penjelajah Solusi, pilih Perlihatkan Semua File.

Jika Anda telah bekerja dengan Visual Studio Code sebelumnya, file launch.json akan terlihat akrab. Launch.json di sini berfungsi dengan cara yang sama seperti di Visual Studio Code untuk menunjukkan konfigurasi peluncuran yang digunakan untuk penelusuran kesalahan. Setiap entri menentukan satu atau beberapa target yang akan di-debug.

Dua entri pertama adalah entri browser, dan mereka akan terlihat seperti ini:

    {
      "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"
    }

Anda dapat melihat dalam entri di atas bahwa type diatur ke jenis browser. Jika Anda meluncurkan hanya dengan jenis browser sebagai target debug satu-satunya, Visual Studio hanya akan men-debug proses browser frontend, dan proses Node akan dimulai tanpa debugger terlampir, yang berarti bahwa setiap titik henti yang diatur dalam proses Node tidak akan mengikat.

Setelah menghentikan sesi, proses Node juga akan terus berjalan. Ini sengaja dibiarkan berjalan ketika browser adalah target debug, karena jika pekerjaan hanya dilakukan pada frontend, memiliki proses backend yang terus berjalan memudahkan alur kerja pengembangan.

Di awal bagian ini, Anda menutup jendela prompt perintah yang masih ada untuk mengatur titik henti dalam proses Node. Agar proses Node dapat di-debug, proses harus dimulai ulang dengan debugger yang terpasang. Jika proses Node yang tidak dapat di-debug dibiarkan berjalan, mencoba meluncurkan proses Node dalam mode debug (tanpa mengonfigurasi ulang port) akan gagal.

Catatan

Saat ini, edge dan chrome merupakan satu-satunya jenis browser yang didukung untuk penelusuran kesalahan.

Entri ketiga dalam launch.json menentukan node sebagai jenis debug, dan akan terlihat seperti ini:

    {
      "name": "Debug Dev Env",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

Entri ini hanya akan meluncurkan proses Node dalam mode debug. Tidak ada browser yang akan diluncurkan.

Entri keempat yang disediakan dalam "launch.json* adalah konfigurasi peluncuran campuran berikut.

    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Debug Dev Env",
        "localhost (Edge)"
      ]
    }

Konfigurasi majemuk ini sama dengan konfigurasi peluncuran senyawa vscode, dan memilihnya memungkinkan Anda untuk men-debug frontend dan backend. Anda dapat melihat bahwa itu 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 dari dropdown, tetapi masih dapat dirujuk, dengan mengatur hidden atribut dalam presentation objek ke true.

    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }

Klik Opsi untuk daftar atribut yang dapat Anda gunakan untuk meningkatkan pengalaman penelusuran kesalahan Anda. Harap dicatat bahwa saat ini, hanya konfigurasi peluncuran yang didukung. Setiap upaya untuk menggunakan konfigurasi lampiran akan mengakibatkan kegagalan penyebaran.