Anda di halaman 1dari 14

Membuat Aplikasi Node.

js Baru
Waktu baca: 30 menit

Dalam artikel ini kami akan mengajarkan cara membuat aplikasi Express baru dalam
environment local-mu.

Gambar di artikel ini menampilkan tampilan Windows, tapi kamu bisa


mengikuti proses yang sama di macOS.
Yang Perlu Kamu Lakukan

 Komuter yang sudah diinstal Node.js


 Pengalaman menggunakan Node.js (Progate Node.js Study I atau yang setara)

1. Membuat Aplikasi Baru


Pertama, buat folder untuk aplikasi baru.
Buat folder bernama "list-app" di mana saja di komputer kamu.

Dalam contoh ini, folder baru dibuat di dalam folder progate, tapi sebenarnya
bisa di mana saja.
Lalu buka folder ini di editor. Dalam artikel ini, kita akan menggunakan editor bernama
Atom. (Cara instalasi Atom sudah diajarkan di 1. Text Editor dalam [Artikel Cara
Membuat Website dengan HTML & CSS di Komputer (https://progate.com/docs/html-
env )).
Pilih tab File, lalu klik "Open" untuk macOS dan "Open Folder" untuk Windows.
Kemudian klik folder "list-app" yang baru dibuat.
Persiapan untuk Menjalankan Perintah
Kemudian, mari kita buat agar bisa menjalankan perintah dari dalam folder list-app.
Pertama, klik-kanan list-app dari dalam Atom, lalu klik Copy Full Path.
Kemudian buka Terminal untuk macOS dan Command Prompt untuk Windows, dan
jalankan perintah berikut.
Kamu bisa tempelkan Path yang disalin dengan shortcut berikut ini:

 Windows:Ctrl + V atau Ctrl + Shift + V


 Mac:Command + V

cd [Path yang baru disalin]


Perintah cd dapat digunakan untuk merubah antar directory. Baca lebih lanjut
tentang operasi perintah dengan mengeklik link berikut.
Pelajaran Baris Perintah
Sekarang kamu bisa menjalankan perintah dari dalam folder list-app!
Periksa
Apakah kamu berhasil menjalankan perintah dari dalam folder list-app?

Selesai?

2. Menjalankan Perintah dan Menginstal Paket


Mari kita mulai menjalankan beberapa perintah!
Pertama, jalankan perintah berikut:

npm init --yes

Ini adalah perintah yang digunakan untuk membuat  package.json , yang merupakan
file konfigurasi npm. Informasi pengaturan paket npm dijabarkan didalam
file  package.json .
Kemudian instal paket npm. Dalam artikel ini kita akan menginstal  express  dan ejs .
Untuk melakukannya, jalankan perintah berikut:

npm install express ejs

*Kamu bisa menjalankan setiap perintah  npm install express  dan  npm install
ejs , secara terpisah. Tapi dengan menulis  npm intall Package1 Package2... , kamu
akan bisa menginstal beberapa paket dengan satu perintah. Ini adalah cara yang berguna
dan sangat mudah, jadi cobalah untuk menghapalkannya.
Jika kamu melihat gambar seperti di bawah ini, artinya instalasi sudah selesai.
Mari Mulai dari Server dan Halaman Tampilan
Sekarang kamu punya semua paket yang dibutuhkan! Mari mulai dari server dan
halaman tampilan.
Pertama, siapkan file yang dibutuhkan. Buat file dan folder yang mengelilingi batas
hijau, seperti gambar di bawah. Jika kamu berhasil mengikuti langkah sampai di sini,
file lainnya akan dibuat.
Selanjutnya, mari kita tulis code di dalam file yang kamu buat.
Salin code di bawah ini dan tempelkan ke setiap file.

 app.js

const express = require('express');

const app = express();

app.get('/', (req, res) => {


res.render('hello.ejs');

});

app.listen(3000);

 views/hello.ejs

<h1>Hello World</h1>

Sekarang kamu telah selesai menyiapkan file. Mari coba memulai server.

node app.js

Jika "Hello World" ditampilkan sebagai berikut, kamu berhasil menyelesaikan langkah
ini!
Mohon diingat, kamu harus me-restart server setelah memodifikasi file js, agar
perubahannya bisa diterapkan.
Kamu bisa me-restart server dengan mematikan, lalu memulai server lagi.
Untuk menerapkan perubahan dalam file, pertama-tama hentikan server dengan   Ctrl +
C  lalu restart server dengan  node app.js .

Periksa
Apakah Hello World berhasil ditampilkan dalam browser?

Selesai?

3. Membuat agar Server Restart Otomatis setelah


Meng-update File
Kita sudah berhasil menampilkan halaman, tapi setiap ada perubahan di situ,
kita harus me-restart server untuk menerapkannya.
Agar tidak me-restart server secara manual, mari instal nodemon , suatu paket
npm yang dapat me-restart server secara otomatis saat ada perubahan dalam
file.
npm install nodemon

Berikutnya, mari kita coba memulai server menggunakan nodemon. Untuk


menjalankan nodemon, jalankan perintah berikut. (Kamu bisa salin lalu
tempelkan perintah ini dengan Ctrl + V atau Ctrl + Shift + V).

 Windows

.\\node_modules\\.bin\\nodemon app.js

 macOS

./node_modules/.bin/nodemon app.js

Jika layar berikut ditampilkan, artinya kamu berhasil memulai server


menggunakan nodemon.
Ada Cara Mempermudah Proses Memulai nodemon
Menulis  .\\node_modules\\.bin\\nodemon app.js  setiap kali ingin menjalankan
server terkesan agak repot. Mari kita pelajari cara agar proses ini jadi lebih
mudah.
Buka file  package.json  di dalam "list-app." Kamu akan menemukan kolom
bernama  scripts  di dalam file  package.json .

Kamu bisa mendaftarkan perintah yang sering digunakan sebagai tugas di


dalam  scripts , dan kamu dapat membukanya dengan mudah.
Mari coba mendaftarkan tugas.
Di sini kita akan menghapus tugas bernama  test  yang sudah ditulis
dalam  scripts , dan sebagai gantinya kita akan mendaftarkan tugas
bernama  start . Hapus baris `"test": 〜 dan masukkan perintah berikut.
 Windows

"start": ".\\node_modules\\.bin\\nodemon app.js"

 macOS

"start": "./node_modules/.bin/nodemon app.js"

Mari jalankan tugas  start  yang baru kita daftarkan.


Syntax yang digunakan untuk ini adalah  npm run   taskname .
Jalankan perintah berikut dan periksa apakah kamu bisa memulai server
menggunakan nodemon.

npm run start


Sekarang kamu bisa memulai server dengan cepat!