Apa itu Express.js dan Mengapa Anda Harus Menggunakannya?

Express.js (atau "Express") adalah kerangka kerja web NodeJS yang digunakan di back-end (atau sisi server) situs web dan aplikasi web. Express fleksibel dan minimalis, yang berarti tidak memiliki banyak koleksi library dan paket yang tidak perlu, juga tidak mendikte bagaimana Anda harus membangun aplikasi Anda.

Kerangka kerja Express membangun API yang memfasilitasi komunikasi melalui permintaan dan tanggapan HTTP. Salah satu hal luar biasa tentang Express adalah ia memberi pengembang kendali penuh atas permintaan dan tanggapan yang terkait dengan masing-masing metode aplikasinya.

Dalam tutorial ini, Anda akan belajar bagaimana dan mengapa Anda harus menggunakan Express dalam proyek Anda sendiri.

Memasang Express di Proyek Anda

Sebelum Anda dapat menggunakan kerangka kerja Express, Anda harus menginstalnya di direktori proyek Anda. Ini adalah proses langsung yang membutuhkan NodeJS dan npm.

Hal pertama yang harus Anda lakukan adalah membuat package.json file (dalam direktori/folder proyek Anda) menggunakan perintah berikut:

npm init

Menjalankan perintah di atas akan memulai proses yang akan meminta Anda memasukkan input berikut:

• Nama paket
• Versi: kapan
• Keterangan
• Titik masuk
• Perintah tes
• Kata kunci
• Pengarang
• Lisensi

Nama paket, versi, titik masuk, dan bidang lisensi semuanya memiliki nilai default yang dapat dengan mudah Anda timpa dengan memberikan nilai Anda. Namun, jika Anda ingin mempertahankan nilai default, Anda cukup menggunakan perintah berikut:

npm init -y

Menjalankan perintah di atas akan menghasilkan yang berikut: package.json file di direktori proyek Anda:

{
"nama": "aplikasi saya",
"versi": "1.0.0",
"keterangan": "",
"utama": "index.js",
"skrip": {
"test": "echo \"Kesalahan: tidak ada tes yang ditentukan\" && keluar 1"
},
"kata kunci": [],
"Pengarang": "",
"lisensi": "ISC",
}

Sekarang Anda dapat menginstal Express menggunakan perintah berikut:

npm install express --save

Menginstal Express akan menghasilkan paket-lock.json file serta simpul_modul map.

Memahami File package.json

Alasan Anda perlu membuat package.json file sebelum menginstal Express adalah bahwa package.json file bertindak sebagai repositori, menyimpan metadata penting tentang. Anda proyek NodeJS.Ketergantungan adalah nama salah satu bidang metadata ini, dan Express adalah ketergantungan.

Menginstal Express di direktori proyek Anda akan secara otomatis memperbarui. Anda package.json mengajukan.

File package.json yang Diperbarui

{
"nama": "aplikasi saya",
"versi": "1.0.0",
"keterangan": "",
"utama": "index.js",
"skrip": {
"test": "echo \"Kesalahan: tidak ada tes yang ditentukan\" && keluar 1"
},
"kata kunci": [],
"Pengarang": "",
"lisensi": "ISC",
"ketergantungan": {
"ekspres": "^4.17.1"
}
}

Sekarang Anda memiliki bidang "dependensi" yang memiliki satu dependensi—Express. Dan ketergantungan objek menyimpan perangkat lunak yang bergantung pada proyek Anda agar berfungsi dengan benar, yang dalam hal ini adalah kerangka kerja Express.

Membuat Server Dengan Express

Memiliki API yang menangani penyimpanan dan pergerakan data adalah persyaratan untuk aplikasi tumpukan penuh, dan Express membuat proses pembuatan server menjadi cepat dan mudah.

Lihat kembali package.json file di atas dan Anda akan melihat bidang "utama". Bidang ini menyimpan titik masuk ke aplikasi Anda, yaitu “index.js” pada contoh di atas. Saat Anda ingin menjalankan aplikasi Anda (atau dalam hal ini, server yang akan Anda bangun), Anda harus menjalankan index.js file menggunakan perintah berikut:

simpul indeks.js

Namun, sebelum Anda sampai ke tahap eksekusi, Anda harus membuat index.js (atau aplikasi server) di direktori proyek Anda.

Membuat File index.js

const ekspres = membutuhkan('ekspres');
aplikasi const = ekspres();
port konstan = 5000;
app.get('/', (permintaan, res) => {
res.send('Server Anda beroperasi')
})
app.listen (port, () => {
console.log(`Server berjalan di: http://localhost:${port}`);
})

File di atas mengimpor Express kemudian menggunakannya untuk membuat aplikasi Express. Aplikasi Express kemudian menyediakan akses ke Dapatkan dan mendengarkan metode yang merupakan bagian dari modul Express. Itu aplikasi.mendengarkan() metode adalah yang pertama Anda perlu mengatur. Tujuannya adalah untuk membuat daftar koneksi pada port tertentu dari komputer host, yaitu: pelabuhan 5000 dalam contoh di atas.

Tujuan dari aplikasi.get() metode adalah untuk mendapatkan data dari sumber daya tertentu. Metode ini memiliki dua argumen: jalur dan fungsi panggilan balik. Argumen path pada contoh di atas memiliki garis miring yang mewakili posisi root. Oleh karena itu, menavigasi ke http://localhost: 5000 URL (yang merupakan root aplikasi Anda), saat aplikasi index.js Anda di atas sedang berjalan, akan menghasilkan output berikut di browser Anda:

Itu aplikasi.get() fungsi panggilan balik metode menghasilkan output di atas. Fungsi panggilan balik ini memiliki dua argumen—permintaan dan respons. Tanggapan (yaitu res dalam contoh di atas) adalah objek HTTP yang dikirim oleh aplikasi Express setelah permintaan HTTP (yang Anda lakukan dengan mengetikkan URL di atas di browser Anda).

Melayani Situs Web Statis Dengan Server Ekspres Anda

Server memainkan peran penting dalam pengembangan API yang membantu menyimpan dan mentransfer data dinamis, dan di situlah kemungkinan besar Anda akan menggunakan server Express dalam proyek Anda sendiri.

Namun, server Express juga dapat melayani file statis. Misalnya, jika Anda ingin membuat situs web statis (seperti untuk pelatih pribadi, pelatih kehidupan, atau penata gaya), Anda dapat menggunakan server Express untuk menghosting situs web tersebut.

Contoh Situs Web HTML Statis

 rumah 







Selamat datang

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sequi khas!

Lihat Layanan

Kode HTML di atas membuat halaman beranda statis yang menyenangkan dari situs web penata gaya pribadi dengan menautkan ke file style.css berikut:

*{
margin: 0;
bantalan: 0;
ukuran kotak: kotak perbatasan;
}
tubuh {
font-family: 'Lato', sans-serif;
tinggi garis: 1,5;
}
sebuah {
warna: #333;
dekorasi teks: tidak ada;
}
ul {
gaya daftar: tidak ada;
}
P {
margin: .5rem 0;
}
h1{
margin-kiri: 2rem;
}
/* Kegunaan */
.wadah {
lebar maks: 1100 piksel;
margin: otomatis;
bantalan: 0 2rem;
melimpah: tersembunyi;
}
.btn {
tampilan: blok sebaris;
perbatasan: tidak ada;
latar belakang: #910505;
warna: #ff;
bantalan: 0.5rem 1rem;
batas-radius: 0.5rem;
}
.btn: arahkan {
opasitas: 0,9;
}
/* Navbar */
#bar navigasi {
latar belakang: #fff;
posisi: lengket;
atas: 0;
indeks-z: 2;
}
#navbar .wadah {
tampilan: kisi;
grid-templat-kolom: 6fr 3fr 2fr;
bantalan: 1 rem;
align-item: tengah;
}
#navbar h1 {
warna: #b30707;
}
#navbar ul {
membenarkan-diri: akhir;
tampilan: fleksibel;
margin-kanan: 3.5rem;
}
#navbar ul li a {
bantalan: 0.5rem;
font-berat: tebal;
}
#navbar ul li a.current {
latar belakang: #b30707;
warna: #ff;
}
#navbar ul li a: arahkan {
latar belakang: #f3f3f3;
warna: #333;
}
#navbar .sosial {
membenarkan-diri: pusat;
}
#navbar .social i {
warna: #777;
margin-kanan: .5rem;
}
/* rumah */
#rumah {
warna: #ff;
latar belakang: #333;
bantalan: 2 rem;
posisi: relatif;
}
#rumah: sebelum {
isi: '';
latar belakang: url ( https://source.unsplash.com/random) pusat/penutup pusat tanpa pengulangan;
posisi: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 100%;
opasitas: 0,4;
}
#home .showcase-container {
tampilan: kisi;
grid-template-columns: ulangi (2, 1fr);
justify-content: pusat;
align-item: tengah;
tinggi: 100vh;
}
#home .showcase-content {
indeks-z: 1;
}
#home .showcase-content p {
margin-bawah: 1rem;
}

Melayani Situs Web Dengan Server Ekspres

const ekspres = membutuhkan('ekspres');
aplikasi const = ekspres();
port konstan = 5000;
app.use (express.static('public'));
app.get('/', (permintaan, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Server berjalan di: http://localhost:${port}`);
})

File HTML dan CSS di atas berada dalam folder publik di direktori proyek utama. Lokasi file HTML membuatnya dapat diakses oleh server Express dan fungsinya.

Salah satu fungsi baru pada server Express di atas adalah aplikasi.penggunaan() metode. Ini memasang ekspres.statis() middleware, yang melayani file statis. Hal ini memungkinkan untuk menggunakan res.sendFile() berfungsi untuk melayani statis index.html berkas di atas.

Menavigasi ke http://localhost: 5000 location di browser Anda akan menampilkan sesuatu yang mirip dengan output berikut:

Jelajahi Pengembangan Backend

Kerangka kerja Express memungkinkan Anda membuat permintaan HTTP tertentu dan menerima respons yang sesuai menggunakan serangkaian metode yang telah ditentukan sebelumnya. Ini juga salah satu kerangka kerja backend paling populer saat ini.

Mempelajari cara menggunakan kerangka kerja Express adalah langkah yang bagus. Tetapi jika Anda benar-benar ingin menjadi pengembang backend profesional, masih banyak lagi yang perlu Anda pelajari.

Pelajari Cara Menjadi Pengembang Backend pada tahun 2021

Jika Anda ingin berkarir di bidang TI, Anda dapat melakukan yang lebih buruk daripada mempelajari keterampilan yang Anda butuhkan untuk menjadi pengembang backend.

Baca Selanjutnya

Tentang Penulis