Apa itu Nuxt.js?
Nuxt.js adalah framework berbasis Vue.js untuk membuat sebuah website modern yang di render di server. Nuxt.js ini juga hadir untuk memperbaiki kekurangan yang ada pada Vue.js. Menurut website aslinya, Nuxt.js merupakan framework untuk membuat aplikasi Vue.js.
Vue.js sendiri merupakan sebuah framework Javascript yang dipakai untuk membuat user interface SPA (Single-Page Application). Nuxt.js memungkinkan membuat website yang mendukung Server Side Rendering dan PWA (Progressive Web App).
Dimana PWA dan Server Side Rendering inilah yang menjadi cara untuk menyelesaikan permasalahan pada aplikasi Vue.js
Kenapa Harus Nuxt.js
Ada beberapa alasan kenapa orang-orang menggunakan teknologi Nuxt.js ini untuk membuat sebuah website, diantaranya adalah sebagai berikut:
- Bisa merender aplikasi Vue.js tanpa harus memikirkan konfigurasi server.
- Anda bisa membuat website dengan mudah dan tidak perlu konfigurasi dari sisi server maupun client.
- Bisa mendapatkan project structure dengan kualitas yang baik secara otomatis atau default.
- Anda bisa memisahkan kode secara otomatis.
- Bisa menyajikan file-file yang berbentuk statis.
- Setup transisi route bisa dilakukan dengan mudah
Persiapan Sebelum Upload
Sebelum upload file Nuxt.js Anda ke cPanel hosting, ada beberapa persiapan yang harus dilakukan. Berikut beberapa hal yang harus Anda persiapkan:
- Anda harus tahu cara mengakses server lewat SSH. Hal ini sangat penting karena saat instalasi, semua dilakukan via SSH lewat terminal atau konsol. Nah, Anda bisa menggunakan SSH ini lewat terminal atau software PuTTy.
- Pastikan Anda familiar dengan CMD Linux. Karena proses instalasi kebanyakan menggunakan command Linux, pastikan Anda familiar dengan perintah-perintah di Linux.
- Sudah menginstall Node.js di server Hosting. Karena Nuxt.js ini hanya bisa berjalan di sisi server dengan bantuan Node.js, pastikan Anda sudah menginstal Node.js ini di server hosting.
Cara Upload File Nuxt.js di Hosting Lengkap
Setelah mengetahui apa itu Nuxt.js dan persiapan sebelum mulai upload file Nuxt.js. Sekarang kita lanjut ke tutorial cara upload file Nuxt.js di Hosting. Silahkan ikuti langkah-langkah berikut ini:
Login ke cPanel Hosting
Langkah pertama, silahkan login terlebih dahulu ke cPanel hosting Anda. Anda bisa mengakses cPanel lewat domainanda.com/cpanel atau bisa juga lewat member area di layanan hosting Anda.
Tentukan Lokasi Upload
Setelah login, selanjutnya Anda harus menentukan lokasi upload. Anda harus menentukan apakah file akan di upload ke domain utama atau subdomain. Jika domain utama, silahkan upload ke file public_html.
Namun jika subdomain, silahkan membuat subdomainnya terlebih dahulu supaya bisa mengupload file Nuxt.js nya. Contohnya disini kita membuat subdomain tutorial.domainanda.com.
Pada Document Root, silahkan masukkan nama folder untuk menyimpan file subdomain. Silahkan buat saja folder dengan nama tutorial di direktori public_html.
Membuat Aplikasi Node.js
Selanjutnya Anda harus membuat aplikasi Node.js untuk server, hal ini karena Nuxt.js merupakan framework yang membutuhkan JavaScript environment dalam pengembangannya. Jadi, silahkan buat aplikasi Node.js app terlebih dahulu.
Berikut langkah-langkahnya:
- Pilih menu Setup Node.js App di cPanel.
- Klik CREATE APPLICATION.
- Di bagian Node.js version, pilih versi Node.js yang direkomendasikan.
- Kemudian pada Application Mode, pilih Development.
- Masukkan nama folder yang dipakai untuk menyimpan file Nuxt di kolom Application Root.
- Setelah itu pilih domain atau subdomain yang akan digunakan untuk mengakses file Nuxt.js di bagian Application URL.
- Jika semua sudah diisi, silahkan klik CREATE.
- Tunggu sampai proses pembuatan selesai.
- Nantinya akan muncul perintah untuk instalasi Nuxt.js. Salin perintah tersebut di notepad Anda.
- Selesai.
Sekarang Anda bisa coba akses url website Anda. Sekarang Node.js telah terinstal di subdomain tutorial.domainanda.com.
Mengupload File Nuxt.js
Setelah menginstall Node.js, langkah berikutnya adalah mengupload file Nuxt.js ke web hosting. Proses upload ini bisa Anda lakukan lewat menu File Manager. Silahkan upload file Nuxt.js di folder yang telah Anda buat sebelumnya ketika mengisi Application Root.
Karena pada tutorial kali ini folder bernama nux-app, silahkan upload file Nuxt.js ke folder tersebut. Jika nama folder berbeda, silahkan sesuaikan dengan folder tersebut.
Setting Port di Nuxt.js
Nuxt.js secara default berjalan di port 3000. Namun supaya lebih aman, Anda bisa mengubah nilai port sesuai keinginan, misalnya port 8000. Kemudian tambahkan perintah berikut ini pada bagian dev di file package.json:
“dev”: “nuxt –hostname ‘0’ –port 8000”
Mengakses SSH Lewat Terminal atau PuTTy
Langkah berikutnya adalah mengakses SSH lewat PuTTy atau Terminal. Bagi Anda pengguna Windows bisa menggunakan PuTTy, sedangkan untuk pengguna Mac atau Linux bisa menggunakan Terminal. Silahkan tulis perintah berikut ini di Terminal / PuTTy:
ssh username@controlpanelURL -p 64000
Melakukan Instalasi Nuxt.js
Selanjutnya Anda harus melakukan instalasi Nuxt.js, caranya adalah dengan masuk ke virtual environment lewat Putty atau Terminal. Adapun perintah yang digunakan adalah:
- source /home/websites/nodevenv/nux-app/10/bin/activate
- cd /home/websites/nux-app
Silahkan sesuaikan perintah diatas dengan Virtual Environment yang sudah Anda buat di langkah ketiga.
Setelah itu mulai instalasi Nuxt.js dengan perintah berikut:
- npm install
- npm run dev
Langkah berikutnya adalah melakukan setting .httaccess supaya domain atau subdomain yang sudah ditentukan bisa menjalankan file Nuxt.js. Jika Anda menggunakan domain utama, silahkan tambahkan kode di folder public_html.
Sedangkan jika di subdomain, tambahkan kode di file .httaccess pada folder subdomain. Adapun kode yang harus Anda tambahkan adalah sebagai berikut:
Options +FollowSymLinks -Indexes
IndexIgnore *
DirectoryIndex
<IfModule mod_rewrite.c>
RewriteEngine on
# gunakan port yg sesuai seperti diatas
RewriteRule ^(.*)$ http://localhost:8000/$1 [P] #port sesuai yang ditentukan
</IfModule>
Melakukan Instalasi PM2
Supaya Node.js bisa berjalan otomatis dan prosesnya bisa dicek, Anda bisa memakai pm2. PM2 merupakan package process manager supaya Node.js bisa berjalan secara terus menerus. Sebelum install, jalankan perintah berikut:
- npm run build
- npm run start
Setelah itu tekan CTRL + C di Keyboard. Kemudian tulis perintah berikut ini untuk install pm2:
- npm install pm2
- npx pm2 start npm –name “nuxtjs” –interpreter bash — start #nuxt
Tunggu sampai selesai dan jalankan perintah berikut:
- npx pm2 status
Jika status online, maka instalasi pm2 berhasil dan Anda sudah berhasil mengupload File Nuxt.js di Hosting. Untuk mengecek hasilnya, Anda bisa coba mengakses domain atau subdomain di browser.
Nuxt.js Bisa Dimanfaatkan untuk Membuat Website Server Side Rendering dan PWA
Nah, itulah tadi tutorial lengkap cara upload file Nuxt.js di Hosting. Namun, sebelum Anda memilih layanan hosting untuk website Anda, penting untuk mempertimbangkan keamanan dan kehandalan penyedia layanan hosting tersebut.
Untuk itu, kami ingin merekomendasikan layanan hosting dari Exabytes Indonesia. Exabytes Indonesia adalah penyedia hosting terkemuka yang telah menyediakan layanan hosting berkualitas tinggi dengan berbagai fitur unggulan.
Salah satu aspek yang membuat Exabytes Indonesia menonjol adalah keamanan data yang tinggi, karena mereka telah berhasil meraih sertifikat ISO 27001.
Sertifikat ISO 27001 menegaskan komitmen Exabytes Indonesia dalam menjaga kerahasiaan dan keamanan data pelanggan. Dengan menggunakan layanan hosting dari Exabytes Indonesia, Anda dapat yakin bahwa data Anda akan terlindungi dengan baik.
Dengan Exabytes Indonesia, Anda bisa fokus pada pengembangan website Nuxt.js Anda tanpa khawatir mengenai keamanan dan kinerja hosting.
Selain itu, Exabytes Indonesia juga menyediakan dukungan teknis yang responsif dan handal, siap membantu Anda jika menghadapi masalah seputar hosting.
Jadi, jika Anda mencari hosting yang aman, handal, dan berkualitas tinggi untuk website Nuxt.js Anda, pertimbangkanlah layanan hosting dari Exabytes Indonesia dengan sertifikat ISO 27001. Dapatkan pengalaman hosting terbaik untuk website Anda dengan Exabytes Indonesia.
Good luck!