Mengenal MERN Stack dan Cara Instalasinya di VPS Ubuntu!

Halo, DomaiNesians! Setelah sebelumnya kita banyak bahas tentang berbagai stack untuk membangun aplikasi web, kali ini kita akan belajar bareng bagaimana cara instal MEAN dan MERN Stack di VPS.

Meskipun kedua stack ini sama-sama menggunakan JavaScript di semua komponennya, ada perbedaan penting yang perlu kamu tahu, terutama di bagian front-end framework-nya.

Nah, kali ini kita akan belajar bagaimana cara instalasi MERN Stack di VPS terlebih dahulu. Penasaran bagaimana proses instalasinya? Yuk, kita pelajari bareng di tutorial kali ini!

Apa Itu MERN Stack?

Selain LAMP Stack dan LEMP Stack, ada juga software stack lainnya yang tidak kalah populer yaitu MERN Stack dan MEAN Stack. Nah, pada tutorial kali ini kita akan belajar tentang apa itu MERN Stack dan bagaimana cara instalasinya di server Ubuntu.

(Sumber: Ultrahost.com)

MERN stack adalah singkatan dari MongoDB, Express.js, React.js, dan Node.js. MERN Stack menggunakan React yang lebih fleksibel dan dinamis untuk membangun aplikasi. Karena arsitektur React berbasis komponen, kita bisa dengan mudah menggunakan kembali komponen UI yang sudah dibuat, sehingga sangat cocok untuk proyek yang membutuhkan update rutin dan tampilan yang interaktif.

Dengan MERN stack, kamu bisa mengelola database, menjalankan server, sampai membuat antarmuka pengguna (UI) yang interaktif. Berikut adalah komponen MERN Stack dan fungsinya:

1. MongoDB

MongoDB adalah database NoSQL yang super fleksibel untuk menyimpan data tanpa format tetap (schema-less). Database ini cocok untuk data yang beragam dan jumlah data yang besar.

2. Express.js

Express.js adalah framework web minimalis yang powerful. Framework ini dapat membantu kita untuk membuat aplikasi web atau mobile dengan lebih simpel dan efisien.

3. React

React adalah library front-end favorit banyak developer untuk membangun tampilan antarmuka yang interaktif, cepat, dan responsif, berkat Virtual DOM-nya.

4. Node.js

Node.js adalah platform server-side berbasis JavaScript yang kencang dan scalable. Menggunakan mesin V8 dari Google Chrome membuat kita bisa menjalankan aplikasi dengan cepat dan stabil.

Cara Instal MERN Stack di VPS Ubuntu

MERN stack terdiri dari empat tools open-source yaitu MongoDB, Express.js, React, dan Node.js. Tools ini biasa dipakai untuk membangun aplikasi web modern berbasis JavaScript. 

Dengan menginstal MERN Stack di server Ubuntu, kamu akan bisa membangun dan menjalankan aplikasi full-stack berbasis JavaScript, lengkap dengan database NoSQL, backend framework, dan frontend library dalam satu runtime Node.js.

Tapi, sebelum menginstal MERN Stack di server Ubuntu, kita membutuhkan server atau VPS terlebih dahulu. Jika kamu belum punya, tenang saja! Kamu bisa membeli Cloud VPS dari DomaiNesia dan memilih OS Ubuntu sesuai pada tutorial kali ini. 

Nah, jika kamu sudah memiliki VPS, berikut tutorial mudah instal MERN Stack di server Ubuntu:

1. Akses dan Update Server Ubuntu di VPS

Sebelum menginstal apapun di server, sebaiknya kita mengupdate server terlebih dahulu untuk memastikan package yang ada di server kita sudah menggunakan versi terbaru yang aman.

a. Buka terminal atau shell di perangkat kamu dan lakukan login ke server melalui SSH dengan perintah berikut:

Ganti username dan server_ip_address dengan akun VPS kamu. Contoh: ssh root@172.0.1.1

b. Masukkan kata sandi root. Pada saat memasukkan kata sandi, shell atau terminal biasanya tidak akan menampilkannya di layar untuk alasan keamanan. Jika sudah klik Enter pada keyboard.

c. Setelah itu, update semua paket di server dengan menjalankan perintah berikut ini:

Jika sudah, maka kita bisa lanjut untuk instalasi MERN Stack yang dimulai dengan instal Node.js terlebih dahulu.

2. Instal Node.js dan NPM

Node.js adalah fondasi utama dari MERN stack yang memungkinkan kita bisa menjalankan JavaScript di sisi server. Untuk menginstal Node.js dan NPM (Node Package Manager) sekaligus, kalian bisa menjalankan perintah berikut:

a. Pertama, instal Node.js dan NPM. Karena untuk membuat aplikasi React dalam MERN Stack dibutuhkan minimal Node.js versi 14, maka kamu perlu menginstal versi Node.js versi terbaru. Pertama, download Node.js versi 18 (versi terbaru) dari situs resmi NodeSource dengan perintah berikut ini:

b. Setelah itu, instal Node.js dan NPM dengan menjalankan perintah berikut:

c. Selanjutnya, cek versi Node.js untuk memastikan proses instalasi sudah sukses:

Jika respon sudah mengeluarkan angka versi Node.js dan NPM yang terbaru, berarti proses instalasinya sudah selesai dan kita bisa lanjut ke proses selanjutnya.

3. Instal MongoDB

Karena di server Ubuntu kita belum ada MongoDB versi terbaru di repository default-nya, maka kita perlu menambahkan repo resmi MongoDB terlebih dahulu.

a. Pertama, tambahkan GPG key MongoDB dengan perintah berikut:

Catatan: Jika saat kamu mengeksekusi perintah tersebut keluar error “sudo: unable to resolve host localhost.localdomain: Name or service not known”, maka kamu bisa menyelesaikannya dengan langkah-langkah berikut:

– Cek nama hostname terlebih dahulu dengan ketik perintah berikut:

Jika hasilnya localhost.localdomain, berarti itu adalah nama server kamu sekarang

– Buka file /etc/hosts:

– Edit file tersebut dengan mencari baris yang isinya seperti ini:

– Arahkan pointer ke ujung baris kemudian klik Enter. Tambahkan script berikut di file tersebut:

Ganti localhost.localdomain dengan hasil perintah hostname kamu di langkah pertama sebelumnya.

• Jangan hapus baris 127.0.0.1 localhost ya, script tersebut tetap harus ada.
• Simpan dan keluar dengan tekan CTRL + X untuk keluar, kemudian tekan Y untuk menyimpan file, dan terakhir tekan Enter untuk keluar dari file.
• Sekarang coba ulangi perintah curl … sebelumnya.

b. Jika keluar error masalah dependensi, selesaikan dengan perintah berikut:

c. Selanjutnya, tambahkan repository MongoDB ke daftar sumber paket dengan perintah berikut:

d. Kemudian reload daftar paket menggunakan perintah berikut:

e. Nah, setelah itu kita bisa lanjut untuk menginstal MongoDB dengan perintah berikut:

f. Setelah proses instalasi berhasil, jalankan MongoDB menggunakan perintah berikut ini:

g. Agar MongoDB kalian bisa berjalan otomatis saat sistem dinyalakan, kalian bisa mengeksekusi perintah berikut ini:

h. Terakhir, cek status MongoDB yang sudah kita instal dengan perintah berikut:

Jika statusnya “active (running)”, berarti MongoDB sudah siap dipakai.

4. Instal Express.js

Express.js adalah framework yang memudahkan pembuatan API backend di Node.js. Sebelum kita menginstal Express.js, kita perlu melakukan setup environment Node.js terlebih dahulu dengan membuat file package.json.

a. Pertama, inisialisasi project Node.js:

b. Setelah itu, instal Express.js dengan perintah berikut:

Nah, Express.js sudah berhasil terpasang di server kita.

5. Instal React.js

React adalah library frontend populer yang digunakan untuk membangun tampilan atau antarmuka yang interaktif. Untuk menginstal React.js, kita akan menggunakan create-react-app untuk membuat project React baru.

a. Install React App (ganti toko-online dengan nama project kamu sendiri):

b. Setelah itu, masuk ke direktori aplikasi:

c. Kemudian, jalankan aplikasi tersebut dengan perintah berikut:

d. Aplikasi React akan dikompilasi dan server development akan berjalan. Untuk mengetahuinya, biasanya kita bisa mengakses aplikasi lewat browser di URL:

Jika halaman default React sudah muncul, berarti instalasi MERN Stack kalian sudah berhasil. Karena kita menginstal MERN di VPS, maka untuk mengakses project React yang sudah kita buat adalah menggunakan http://ip-server-kamu:3000 (Contoh: http://127.0.0.1:3000)

Nah, kalau kalian ingin mengganti nama project, kalian bisa mengulangi perintah npx create-react-app dengan nama lain sesuai kebutuhan.

Kesimpulan

Bagaimana, mudah bukan tutorialnya? Dengan mengikuti tutorial ini, sekarang kamu sudah berhasil menginstal MERN Stack di VPS berbasis Ubuntu. Mulai dari setup Node.js, MongoDB, Express.js, sampai React.js, semuanya siap untuk membangun aplikasi web modern dan keren.

Yuk, sekarang waktunya berkreasi! Mau buat aplikasi toko online, sistem reservasi, atau sosial media kecil-kecilan? Semuanya bisa kalian mulai dari sini. Jangan lupa, sebelum berkreasi, pastikan kalian sudah punya server Cloud VPS dari DomaiNesia agar aplikasi kalian bisa berjalan lancar, cepat, dan stabil!