Cara Deploy Nuxt JS di Localhost

Deploy Nuxt JS – Selain deploy secara langsung di hosting, Nuxt JS juga bisa di-deploy di localhost. Prosesnya hampir sama dengan deploy secara langsung di hosting.

Hanya ada sedikit perbedaan dalam proses dan konfigurasinya. Buat kamu yang ingin melakukan deploy Nuxt JS di localhost, kamu bisa mengikuti panduan ini.

Apa itu Nuxt JS?

Sebenarnya Nuxt.js ini dibuat untuk menyelesaikan permasalahan pada Vue.js.

Vue.js sendiri adalah framework Javascript yang digunakan untuk membuat user interface dengan single-page application (SPA).

Masalah yang sering terjadi pada penggunaan Vue.js adalah dari sisi antara single-page application (SPA) dan search engine optimization (SEO).

Ketika aplikasi Vue.js berisi halaman yang kompleks dan banyak akan menimbulkan kendala pada bagian SEO.

Untuk itu penyelesaian dari permasalahan tersebut yaitu dengan bantuan Nuxt.js. Menurut website aslinya, Nuxt.js merupakan suatu framework yang digunakan untuk membuat aplikasi Vue.js.

Nuxt.js akan memungkinkan untuk membuat website yang mendukung Server Side Rendering dan Progressive Web App (PWA).

Progressive Web App dan Server Side Rendering inilah yang digunakan untuk menyelesaikan permasalahan di aplikasi Vue.js.

Kelebihan Menggunakan Nuxt JS

Sekarang ini pengguna Nuxt.js semakin banyak. Mulai dari kalangan pemula, pelajar hingga programmer.

Adapun kelebihan dari Nuxt.js sendiri adalah :

• Dapat membuat aplikasi web dengan mudah karena tidak perlu melakukan konfigurasi dari sisi server atau client
• Dapat me-render aplikasi Vue.js tanpa pusing memikirkan setting server
• Dapat memisahkan kode secara otomatis
• Setelah instalasi selesai, otomatis akan mendapatkan project structure dengan kualitas yang baik secara default
• Setup dapat dilakukan dengan mudah
• Dapat menyajikan file- file yang berbentuk statis

Tahap Persiapan

Untuk melakukan deploy Nuxt JS di localhost, ada beberapa yang harus kamu persiapkan. Pastikan kamu telah menyiapkan semua hal berikut ini ya.

Komputer harus sudah terinstall Node JS. Apabila kamu belum melakukan instalasi, kamu bisa jalankan perintah di bawah ini.

npm install

Menyiapkan username dan password cPanel hosting. Setelah semua langkah deploy Nuxt Js di localhost selesai, folder project tersebut akan di upload ke hoting.

Maka dari itu, untuk login cPanel hosting memerlukan username dan password.

Pastikan kamu tahu cara mengakses server via SSH. Saat konfigurasi akan dilakukan via SSH melalui konsol atau terminal.

Nah buat kamu yang belum terbiasa, silahkan baca Cara Akses SSH Melalui Terminal atau PuTTy.

Baca Juga : Belum tahu apa itu SSH, silahkan baca Apa itu SSH Server.

Cara Deploy Nuxt JS di Localhost

Melakukan deploy Nuxt JS bisa dilakukan di localhost dan di hosting langsung. Kedua cara ini sama- sama mudah, hanya sedikit berbeda pada lokasi deploy saja.

Apabila kamu ingin men-deploy Nuxt JS langsung di hosting, kamu bisa ikuti panduan Cara Upload File Nuxt.js di Hosting.

Buat kamu yang ingin melakukan deploy Nuxt JS di localhost terlebih dulu, yuk ikuti step by step berikut ini.

1. Membuat Folder Project

Langkah pertama pastinya kamu harus membuat project Nuxt JS terlebih dahulu.

Untuk membuat project Nuxt JS bisa dilakukan dengan berbagai macam cara yaitu dengan yarn, npx, atau npm.

Pada panduan kali ini akan menggunakan npx untuk membuat project Nuxt JS. Silakan membuat project dengan menjalankan perintah berikut melalui cmd atau terminal.

npx create-nuxt-app [project-name]

Misalnya nama folder nuxtCoba maka kamu bisa jalankan perintah npx create-nuxt-app nuxtCoba.

Lalu kamu akan diberikan beberapa pilihan. Agar lebih cepat, kamu bisa klik Enter hingga proses selesai.

2. Deploy Nuxt JS di Folder Project

Setelah membuat project, langkah selanjutnya adalah melakukan deploy Nuxt JS di localhost.

Kamu bisa menuju ke folder project yang telah dibuat tadi dengan command berikut ini.

cd [project-name]

Kemudian untuk men-deploy-nya langsung saja jalankan perintah ini.

npm run dev

Jika muncul seperti gambar di bawah ini, itu artinya proses deploy berhasil.

Setelah itu karena Nuxt JS merupakan bagian dari Node JS, kamu harus melakukan build app Node JS terlebih dahulu.

Kamu bisa menjalankan perintah di bawah ini untuk build app Node JS di localhost.

npm run build
npm run generate
npm run start

Catatan : Jalankan ketiga perintah di atas sau per satu secara berurutan.

Jika muncul seperti gambar di bawah ini, itu artinya proses build berhasil.

3. Konfigurasi File nuxt.config.js

Dalam proses deploy di localhost ada yang perlu kamu perhatikan yaitu keberadaan file hasil deploy tersebut.

Pada Windows biasanya terletak pada folder .nuxt. Namun di Linux dan Mac, kamu tidak akan menemukan folder .nuxt.

Untuk itu, kamu harus melakukan sedikit konfigurasi pada file nuxt.config.js. Kamu bisa menambahkan command berikut di dalam export default. Jangan lupa untuk menyimpan konfigurasi.

buildDir: ‘build-nuxt’

Lebih jelasnya seperti gambar di bawah ini.

Setelah menyimpannya, pada folder project akan muncul folder baru dengan nama build-nuxt. Folder itulah yang menyimpan file hasil deploy.

Nantinya folder build-nuxt harus diupload ke hosting.

4. Upload Folder Project ke Hosting

Kamu telah selesai melakukan deploy Nuxt JS di localhost. Pada langkah keempat ini bersifat opsional.

Apabila kamu ingin mengupload ke hosting, silakan login cPanel hosting terlebih dahulu.

Kamu bisa mengakses https://namadomain/cpanel, lalu masukan username dan password. Buat kamu yang belum tahu cara login cPanel, silahkan baca di Cara Login cPanel Hosting.

Untuk upload file Nuxt JS, kamu bisa memilih menu File Manager. Silakan upload semua isi dari folder project kecuali folder node_modules.

Sebelum upload, kamu bisa simpan dulu menjadi bentuk .zip agar lebih mudah dalam proses upload. Kemudian upload folder .zip ke home hosting (bukan masuk ke domain atau subdomain).

5. Membuat Node JS App di Hosting

Selanjutnya kamu harus menentukan file Nuxt.js yang akan ditampilan ke domain atau subdomain.

Jika di subdomain, silakan membuat subdomain terlebih dahulu. Untuk lebih jelasnya, kamu bisa baca Cara Membuat Subdomain di Hosting.

Setelah itu kamu bisa memilih menu Setup Node.js App dengan cara mengetik Setup Node.js App pada kolom pencarian.

Lalu silakan klik Create Application di sebelah kanan atas. Kamu bisa pilih versi NodeJS yang digunakan. Akan lebih baik jika kamu menggunakan NodeJS terbaru karena sudah stabil.

Pada Application mode, silahkan pilih mode Development. Dan bagian Application root isikan nama folder yang akan kamu gunakan untuk menyimpan file Nuxt JS. Misalnya nuxtCoba. Selanjutnya pada Application URL pilih domain atau subdomain. Lalu klik Create.

Catatan: hindari penggunaan nama folder seperti nuxt, nuxt-dom dan nuxt-scripts. Mengapa? Karena akan ada crash dan nuxt js tidak dapat terinstall dengan sempurna

Tunggu sebentar hingga muncul seperti gambar. Selanjutnya yang harus kamu lakukan adalah menyalin/ mengcopy path yang ada di Enter to the virtual environment.

Keterangan:

• Perintah source /home/websites/nodevenv/cobaNuxtLocal/10/bin/activate digunakan untuk masuk ke virtual environment
• Perintah cd /home/websites/cobaNuxtLocal digunakan untuk masuk ke folder instalasi

6. Melakukan Setting Port

Secara default, Nuxt.js akan berjalan di port 3000. Namun demi keamanan kamu bisa mengubah nilai port secara bebas.

Misalnya port 8000. Lalu ubah perintah menjadi di bawah ini pada bagian dev di file package.json.

“dev”: “nuxt --hostname ‘0’ --port 8000”

Contoh setting port seperti gambar berikut.

Untuk proses upload file Nuxt.js ini disarankan untuk mengganti port default menjadi port baru

7. Konfigurasi File .htaccess

Konfigurasi pada file .htaccess ini dilakukan agar domain atau subdomain yang telah ditentukan dapat menjalankan file Nuxt JS.

Jika di domain utama, kamu bisa tambahkan kode di bawah ini di folder public_html. Sedangkan jika di subdomain, tambahkan perintah di file .htaccess pada folder subdomain.

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>

Contoh penambahan kode diatas seperti gambar di bawah ini :

8. Menjalankan Nuxt JS di Hosting

Untuk menjalankan Nuxt JS di hosting, kamu bisa mengakses SSH terlebih dahulu.

Buat kamu pengguna Linux atau Mac, bisa menggunakan Terminal. Buat kamu pengguna Windows, bisa menggunakan Software PuTTy. Apabila kamu belum mengetahui caranya, silahkan baca di Panduan Cara Akses SSH.

Setelah berhasil masuk SSH, silakan masuk ke virtual environment yang telah di copy tadi melalui Terminal/PuTTy dengan perintah berikut.

source /home/websites/nodevenv/cobaNuxtLocal/10/bin/activate

cd /home/websites/cobaNuxtLocal

Catatan : Sesuaikan perintah diatas dengan Virtual Environment yang telah kamu buat pada langkah ke 3

Selanjutnya kamu bisa menjalankan perintah berikut ini untuk menjalankan Nuxt JS di hosting.

npm install
npm run start

9. Melakukan Instalasi PM2

Agar aplikasi Node.js dapat berjalan secara otomatis dan prosesnya dapat dicek, maka kamu bisa gunakan PM2.

PM2 adalah sebuah package process manager dari Keymetrics yang bertujuan agar project Node.js dapat berjalan terus menerus.

Untuk melakukan instalasi pm2, kamu bisa jalankan command di bawah ini.

npm install pm2

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

Silakan tunggu hingga proses instalasi pm2 selesai. Untuk mengecek apakah pm2 sudah aktif, kamu bisa jalankan command di bawah ini.

npx pm2 status

Jika muncul status : online seperti seperti di bawah ini , itu artinya instalasi pm2 berhasil dan sudah aktif.

Terakhir jika semua proses telah dilakukan, kamu bisa cek apakah file Nuxt.js berhasil dijalankan dengan mengakses domain atau subdomain di address bar browsermu.

Kesimpulan

Men-deploy secara langsung di hosting atau di localhost sebenarnya sama saja. Jika pada akhirnya Nuxt JS akan diupload ke hosting lebih baik deploy di hosting secara langsung. Karena lebih cepat dan mudah.

Untuk sebagian dari kamu yang terbiasa mengedit program via localhost kamu bisa gunakan panduan ini. Panduan ini tidak hanya menjelaskan deploy Nuxt JS di localhost saja, namun hingga cara upload ke hosting.