Nida Regita F SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Cara Upload File Nuxt.js di Hosting [Tutorial Lengkap dan Mudah!]

5 min read

[FI] Cara Upload File Nuxt.js di Hosting

Ingin upload file Nuxt.js di hosting, tetapi bingung bagaimana caranya? Tenang, kami punya tutorial lengkap cara upload Nuxt.js di hosting yang bisa membantu Anda.

Bagi yang belum tahu, Nuxt js adalah framework modern untuk membangun aplikasi web dengan Vue.js yang SEO friendly. Setelah membuat aplikasi, Anda perlu melakukan cara hosting Nuxt.js agar dapat diakses secara publik.

Pada artikel ini, kami akan menjelaskan apa itu Nuxt js serta tutorial Nuxt.js upload file dengan beberapa langkah mudah. Yuk langsung scroll ke bawah!

Apa Itu Nuxt.js?

logo apa itu nuxt js adalah

Nuxt.js adalah framework berbasis Vue.js untuk membuat aplikasi website modern yang dirender di server. Nuxt.js ini hadir untuk memperbaiki kekurangan yang dimiliki Vue.js.

Sebelumnya, Vue.js adalah framework JavaScript untuk membuat tampilan web lebih interaktif dengan teknologi Single Page Application (SPA). Namun, SPA pada Vue.js ternyata berdampak buruk terhadap performa SEO.

Alasannya, Single Page Application (SPA) menyulitkan Google maupun mesin pencari lain untuk melakukan crawling website. Akibatnya, aplikasi website dengan Vue.js agak sulit untuk bersaing di hasil pencarian.

Nah, munculnya Nuxt js mampu mengatasi masalah tersebut dengan fitur Server Side Rendering (SSR). SSR adalah metode populer dalam rendering Javascript yang dapat menghasilkan peningkatan dari sisi SEO dan kecepatan website. 

Alasannya, SSR melakukan render di sisi server dulu, baru mengirimkan HTML hasil render ke web browser. Dengan begitu, proses loading website dan proses crawling tidak menemui hambatan.

Kelebihan lain dari Nuxt.js adalah memudahkan pengembangan aplikasi web dengan konfigurasi dan pembaruan server secara otomatis. Hal ini berkat adanya webpack loader untuk mengkompilasi semua perubahan file.

Tak cuma itu, Nuxt js juga memiliki fitur-fitur menarik lain, seperti:

  • Memungkinkan pembuatan aplikasi web tanpa perlu konfigurasi dari sisi client (Zero Configuration).
  • Dukungan plugin dan library yang melimpah.
  • Tersedia dokumentasi yang lengkap.

Baca juga: Framework JavaScript Terbaik

Cara Upload File Nuxt.js di Hosting

Sebelum mempraktikkan cara upload Nuxt.js, pastikan layanan hosting Anda sudah mendukung deploy website dengan Nuxt.js, seperti layanan Hosting Cloud Niagahoster.

Jika sudah, berikut urutan langkah cara hosting Nuxt js selengkapnya:

  1. Login cPanel Hosting
  2. Tentukan Lokasi Upload
  3. Buat Aplikasi Node.js
  4. Upload File Nuxt.js
  5. Setting Port Nuxt.js
  6. Install Nuxt.js
  7. Setting File .htaccess
  8. Install pm2
  9. Nuxtjs Upload File Berhasil 

Langsung saja, mari mulai dari langkah yang pertama!

1. Login cPanel Hosting

Cara upload file Nuxt.js Anda awali dengan login cPanel hosting. Anda bisa mengakses cPanel melalui namadomain/cpanel ataupun melalui Member Area Niagahoster pada tab cPanel seperti ini: 

member area niagahoster untuk akses cpanel

Baca juga: Cara Install Express.js di Hosting

2. Tentukan Lokasi Upload

Cara upload Nuxt.js di hosting langkah berikutnya yaitu menentukan lokasi upload. Jika Anda ingin mengupload file Nuxt.js di domain utama, Anda bisa langsung beralih ke langkah berikutnya.

Namun jika Anda ingin mengunggahnya ke subdomain, silakan buat subdomain dulu pada menu Subdomains di cPanel. Masukkan nama subdomain yang akan Anda buat pada kolom Subdomain. Kemudian, pilih Domain utama Anda.

cara upload nuxt js buat subdomain

Pada kolom Document Root, masukkan nama folder untuk menyimpan file subdomain. Dalam Nuxt js tutorial ini, kami membuat folder dengan nama tutorial di direktori public_html. 

Jika semua detail sudah diisi, selanjutnya klik tombol Create. Nantinya file Nuxt.js bisa diakses pada URL tutorial.websiteseowriter.com

3. Buat Aplikasi Node.js

Nuxt.js adalah framework yang memerlukan JavaScript environment dalam pengembangannya. Oleh karena itu, Anda membutuhkan server Node.js untuk menjalankan aplikasi Nuxt.js.

Sebelum melanjutkan cara upload file Nuxt.js di hosting, Anda perlu membuat Node.js app terlebih dulu. Caranya, pilih menu Setup Node.js App di cPanel.

nuxtjs upload file setup node.js app

Kemudian, klik tombol CREATE APPLICATION untuk menampilkan halaman pembuatan Node.js app. 

membuat aplikasi node.js dengan klik create application

Pada bagian Node.js version, pilih versi Node.js yang direkomendasikan agar lebih stabil. Lalu, pilih Development pada bagian Application mode

Selanjutnya, masukkan nama folder yang akan digunakan untuk menyimpan file Nuxt.js pada kolom Application root. Hindari penggunaan nama folder seperti nuxt, nuxt-dom dan nux-scripts untuk menghindari crash saat proses instalasi. 

Berikutnya, pilih domain atau subdomain yang akan Anda gunakan untuk mengakses file Nuxt.js pada bagian Application URL. Jika semua detail sudah diisi, klik tombol CREATE.

isi form pembuatan aplikasi node.js

Tunggulah beberapa saat hingga tampilan berubah menjadi seperti ini:

command untuk masuk terminal dalam cara hosting nuxt js

Akan muncul perintah yang nantinya akan digunakan untuk instalasi Nuxt.js. Salinlah perintah tersebut pada catatan pribadi Anda.

Sampai sini, Anda sudah berhasil membuat Node.js app. Coba akses URL website Anda.

setting aplikasi node.js berhasil

It works! Sekarang, Node.js sudah terinstall pada subdomain tutorial.websiteseowriter.com kami. Ayo lanjut ke langkah upload Nuxt.js hosting!

Baca juga: Cara Hosting Node.js

4. Upload File Nuxt.js

Langkah selanjutnya dalam cara upload file Nuxt.js adalah mengunggah file Nuxt.js di hosting. Proses upload file ini bisa Anda lakukan pada menu File Manager di cPanel.

buka menu file manager di cpanel

Silakan upload Nuxt.js di folder yang telah dipersiapkan pada langkah sebelumnya. Pada tutorial ini, kami menggunakan folder nux-tutor sebagai tempat untuk menyimpan file Nuxt.js.

buka folder subdomain dalam nuxt js tutorial

Bagi Anda yang belum memiliki project Nuxt.js, Anda bisa menggunakan source code berikut ini untuk melakukan testing. Upload project tersebut, kemudian ekstrak file zip ke direktori /nux-tutor seperti ini:

ekstrak file zip pada folder untuk melanjutkan cara upload nuxt js

5. Setting Port Nuxt.js

Cara hosting Nuxt.js langkah berikutnya yaitu mengkonfigurasi port untuk Nuxt.js. Secara default, Nuxt.js akan berjalan di port 3000. Namun, lebih baik Anda menggantinya menjadi port baru demi alasan keamanan.

Nah, penggantian port ini dapat Anda lakukan dengan mengedit file package.json.

edit file htaccess untuk nuxtjs upload file

Tambahkan baris kode berikut ini pada bagian dev di file package.json:

"dev": "nuxt --hostname '0' --port 8000"

Kode tersebut akan mengganti port default Nuxt.js dengan port 8000. Sedikit info, Anda dapat mengubah nilai port dengan bebas. 

edit script file htaccess

Jika sudah seperti gambar di atas, klik Save Changes untuk menyimpan perubahan.

Baca juga: Apa itu Next.js

6. Install Nuxt.js

Cara upload file Nuxt.js di hosting masih berlanjut. Kali ini, waktunya Anda menginstall file Nuxt.js. Untuk melakukannya, Anda memerlukan akses ke SSH. Caranya, masuklah ke menu Terminal pada cPanel.

buka menu terminal di cpanel

Jika terminal sudah bisa diakses, jalankan perintah yang sudah Anda salin pada langkah nomor tiga untuk masuk ke virtual environment dan folder instalasi Nuxt.js. Contohnya seperti berikut:

source /home/u1301713/nodevenv/nux-tutor/12/bin/activate && cd /home/u1301713/nux-tutor
masuk terminal untuk melanjjutkan nuxtjs upload file

Selanjutnya, mulai instalasi Nuxt.js dengan menjalankan perintah di bawah ini:

npm install
npm run dev

Jika muncul tampilan seperti gambar berikut ini, artinya proses instalasi Nuxt.js berhasil dilakukan:

cara install nuxt js di hosting berhasil

7. Setting File .htaccess

Tutorial Nuxt.js upload file langkah selanjutnya yaitu melakukan pengaturan di file .htaccess. Tujuannya agar domain atau subdomain yang telah Anda tentukan dapat menjalankan file Nuxt.js dengan benar. 

Jika Anda menggunakan domain utama, Anda bisa menemukan file .htaccess langsung di folder public_html. Sedangkan, jika Anda menggunakan subdomain, Anda dapat menemukan file .htaccess di dalam folder subdomain Anda.

buka file htaccess di file manager

Pada tutorial ini, kami melakukan pengaturan pada file .htaccess pada direktori public_html/tutorial. Tambahkan kode berikut ini pada file tersebut:

Options +FollowSymLinks -Indexes
    IndexIgnore *
    DirectoryIndex
     
    <IfModule mod_rewrite.c>
    RewriteEngine on
    # gunakan port yg ditentukan di package.json
    RewriteRule ^(.*)$ http://localhost:8000/$1 [P]
    </IfModule>

Nah, nantinya file .htaccess Anda akan menjadi seperti berikut:

edit file htaccess untuk bisa melakukan cara upload nuxt js

Jangan lupa, klik tombol Save Changes untuk menyimpan perubahan.

Baca juga: Apa itu Express.js

8. Install pm2

Pada cara upload file Nuxt.js langkah nomor delapan, Anda perlu melakukan instalasi pm2. Bagi yang belum tahu, Pm2 adalah package process manager yang membantu agar aplikasi Node.js berjalan terus menerus secara otomatis. 

Sebelum melakukan instalasi pm2, simpan pointer mouse di bagian paling bawah terminal, lalu tekan Ctrl + C pada keyboard.

nuxtjs upload file install pm2

Selanjutnya, jalankan perintah berikut ini:

npm run build
npm run start

Kemudian, tekan CTRL + C lagi pada keyboard dan jalankan perintah berikut ini untuk melakukan instalasi pm2:

npm install pm2
npx pm2 start npm --name “nuxtjs” --interpreter bash -- start #nuxtjs adalah nama prosesnya

Tunggulah hingga proses instalasi pm2 selesai dan muncul tampilan seperti gambar di bawah ini:

instalasi pm2 selesai

Jika statusnya sudah online, artinya proses instalasi pm2 selesai dan  statusnya sudah aktif.

9. Nuxt.js Upload File Berhasil

Nuxt.js tutorial sudah memasuki langkah yang terakhir. Jika semua proses sudah dilakukan, akses URL website Anda melalui web browser. 

Kalau tampilannya sudah seperti ini, berarti cara upload Nuxt.JS di hosting sudah berhasil. Selamat!

cara upload file nuxt js di hosting berhasil

Sudah Tahu Cara Upload Nuxt js di Hosting, kan?

Nuxt.js adalah framework berbasis Vue.js untuk mengembangkan aplikasi web. Di artikel ini, Anda sudah mempraktikkan cara upload file Nuxt.js di hosting. Langkahnya mungkin agak panjang, tapi tetap mudah untuk diikuti, kok.

Yang perlu diingat, sebelum mengupload file Nuxt.js ke hosting, pastikan layanan hosting Anda support Node.js agar aplikasi Nuxt.js Anda bisa dijalankan.

Nah, Cloud Hosting Niagahoster sudah mendukung Node.js. Layanan ini juga terintegrasi penuh dengan PHP 8 dan Python, sehingga Anda dapat mengonlinekan berbagai jenis aplikasi web lewat dengan mudah.

Dengan kapasitas sumber daya besar dan jaringan super cepat Network 10Gig/s, Cloud Hosting membuat website Anda tangguh dan gesit, bahkan saat menerima trafik tinggi sekalipun.

Menariknya, semua keunggulan di atas dapat Anda dapatkan dengan harga mulai dari Rp122 ribuan/bulan saja. Jadi tunggu apa lagi, yuk upload file Nuxt.js di hosting dengan layanan Cloud Hosting Niagahoster!

Nida Regita F SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Leave a Reply

Your email address will not be published. Required fields are marked *