Membuat Route Api Seperti Next.js Dengan Vite.js Dan Vue.js

October 20, 2021 (3y ago)

Jika sudah ada yang pernah pakai Next JS, pasti sudah tau dong fitur route API yang dimiliki oleh Next JS, disana kamu bisa membuat backend API untuk aplikasi frontend kamu, nantinya API itu bisa kamu akses dengan cara menambahkan route /api. Nah sekarang Saya akan membagi tahu cara membuat fitur tersebut dengan menggunakan Vue.js 3 dengan bantuan Vite.js 2 dan plugin Vite Plugin Mix yang dibuat oleh Egoist. Simak selengkapnya disini

Instalasi

Hal pertama yang dilakukan adalah melakukan penginstalan aplikasi vite + vue di terminal console kalian masing-masing. Untuk cara penginstalannya tidak akan saya jelaskan karena caranya bisa lihat di dokumentasi vite.js nya langsung, bisa klik disini. Jika sudah instal semua projek vite tersebut, sekarang saat nya menginstall plugin vite-plugin-mix di terminal console kalian, caranya bisa dengan menjalankan perintah dibawah ini

npm i vite-plugin-mix --save-dev

Mulai mengkoding

Daftarkan plugin di vite.config.js

Hal pertama yang dilakukan adalah memasang plugin ini ke file yang bernama vite.config.js, buka file tersebut dan tambahkan beberapa kode, kode-nya bisa dilihat dibawah ini

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import mix from 'vite-plugin-mix'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    mix({
      handler: './handler.js'
    })
  ]
})

Berikut akan saya jelaskan apa maksud dari kode diatas. Pertama-tama kita import lib vite-plugin-mix tersebut setelah itu, masukkan function mix tersebut kedalam array plugins yang ada didalam option defineConfig dari vite, setelah itu tambahkan option object didalam function mix yang bernama handler yang dimana object tersebut memiliki nilai yaitu nama file js dari handler tersebut, disini saya menamakan handler.js.

Membuat API

Setelah mendaftarkan plugin tersebut didalam file vite.config.js, selanjutnya kita akan membuat satu file di root folder, dengan nama handler.js sesuai dengan yang sudah didaftarkan sebelumnya. Setelah dibuat, saatnya mulai mengkoding untuk membuat route API nya hehe.

export const handler = (req, res, next) => {
  if (req.path === '/hello') {
    return res.end('hai');
  }
  next();
};

Berikut akan saya jelaskan maksud dari script diatas, script diatas merupakan script untuk membuat route API nya dengan endpoint yang bernama /hello yang dimana ketika nanti endpoint tersebut dipanggil, akan mengembalikan sebuah response dan response nya itu adalah hai, yang pertama dilakukan adalah membuat sebuah function yang bernama handler(btw disini nama function-nya bebas ya bisa selain handler seperti dicontoh) yang dimana harus diexport. Setelah itu kita bisa membuat enpointnya, caranya bisa dilakukan dengan cara membuat pengujian jika path url itu adalah /hello maka akan mengembalikan sebuah response berupa text hai.

Eksekusi API

Setelah sudah membuat API-nya di file handler.js, saatnya kita mengeksekusi API-nya, cara yang pertama itu adalah, sebagai berikut:

  1. Nyalakan server vite terlebih dahulu, bisa dengan cara
npm run dev # Akan membuat server localhost dengan port 3000 secara default

atau

npx vite --port=4000 # Akan membuat server localhost dengan port 4000
  1. Jalankan endpoint Setelah server vite sudah berjalan, saatnya kita memanggil endpoint tersebut, memanggilnya bisa di browser kalian atau di postman dan sejenisnya dengan cara hanya menambahkan endpoint /hello setelah base url kalian seperti berikut

Disini saya menggunakan Stackblitz, saya menggunakan ini agar saya tidak perlu lagi menginstall projek ini di laptop saya.

Nah sudah berhasil kan? sekarang kalian sudah bisa menggunakan route API seperti di Next.js di aplikasi Vue.js kalian dengan bantuan vite dan vite-plugin-mix. Oh ya, selain itu kalian bisa menggabungkannya dengan Express.js dan sejenisnya, selengkapnya bisa cek disini.

Kesimpulan

Vite.js merupakan sebuah frontend tooling yang bisa membantu para developer untuk mengembangkan suatu website dengan lebih cepat lagi salah satunya pada saat mengembangkan website dengan menggunakan framework Vue.js. Vite.js juga memiliki banyak sekali ekosistem mengingat ini sebuah projek open source dan salah satunya adalah vite-plugin-mix yang dimana kalian bisa menambahkan sebuah backend API di aplikasi Vite.js kalian, atau dengan kata lain, jika kalian sudah pernah menggunakan Next.js pastinya tidak akan asing dengan istilah route API, dengan menggunakan plugin ini, kalian bisa menambahkan route API sebagaimana mestinya yang ada di Next.js.

Penutup

Wah akhirnya sudah dipenghujung tulisan saya :D, sekali lagi terima kasih buat kalian yang sudah membaca blog saya kali ini dari awal sampai akhir, semoga bermanfaat buat kalian semua serta mohon maaf kalau ada yang kurang dan kesalahan kata😁. Oh ya akhir kata, sampai jumpa lagi diblog saya selanjutnya ya :D

Oh ya hampir lupa kalau terima kasih harus pakai emoji ini 🙏 ya kalau zaman sekarang.

LinkedIn
X