Cara Deploy ExpressJS ke Vercel (Serverless)

Rafi

Tutorial cara Deploy Aplikasi Express REST API ke Vercel serverless.

Daftar Isi

Penjelasan singkat tentang Express JS yang akan dijalankan di Vercel
Cara membuat dan deploy Express JS ke Vercel

mrfdn.com - Halo… Express js merupakan salah satu framework Nodejs terbaik yang ada di dunia.

Dia bisa menjalankan aplikasi berbasis web dengan NodeJS sebagai backend untuk segala kebutuhan. Baik untuk serve static file hingga CRUD (create, read, update, delete) sederhana dengan mengintegrasikan database.

Jika anda memiliki aplikasi CRUD yang menggunakan Express JS, anda bisa mengonlinekan aplikasi anda itu ke internet dengan menggunakan Vercel.

Vercel merupakan salah satu platform yang bisa digunakan untuk hosting web secara gratis.

Biasanya orang di sana hosting aplikasi secara statis, contohnya web statis, blog, dll.

Tapi selain itu Vercel juga bisa digunakan untuk menjalankan aplikasi ExpressJS.

Penjelasan singkat tentang Express JS yang akan dijalankan di Vercel

Pertama yang mesti diketahui adalah bahwa aplikasi Express hanya bisa berjalan jika terinstall Node.
Aplikasi Express akan berjalan di dalam PORT tertentu yang telah diset.
Apabila Node server berhenti maka aplikasi Express tidak akan berjalan.
Jadi Express JS harus berjalan selamanya karena dia ketergantungan dengan node server.

Cara membuat dan deploy Express JS ke Vercel

Gambaran akhir aplikasi. Hanya counter sederhana saja.

htmx express vercel

Folder structure

├── index.js
├── package.json
├── public
│   └── index.html
└── vercel.json

file Package.json

{
  "name": "jagotekno-express-htmx",
  "version": "1.0.0",
  "description": "aplikasi express js dengan htmx",
  "main": "index.js",
  "engines": {
    "node": "18.x"
  },
  "scripts": {
    "dev": "nodemon index.js"
  },
  "keywords": [],
  "author": "jagotekno.com",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }
}

Setelah itu install dengan perintah npm install.

File index.js

Jika kita serve sebuah file statis baik itu html, css, gambar, dll. Definisikan nama foldernya di bawah:

app.use(express.static(path.join(__dirname, 'public')))`

Di sini saya menggunakan folder public/ untuk serve file index.html.

Lalu jangan lupa menambahkan pada akhir baris,

module.exports = app;

Selengkapnya seperti ini:

const express = require('express');
const app = express();

// Must have setting to serve the public folder on vercel
// Serve static files from the 'public' directory
const path = require('path')
app.use(express.static(path.join(__dirname, 'public')))

let counter = 0;

app.get('/api/increment', (req, res) => {
  counter++;
  const updatedHTML = `<h2 id="counter">counter: <span>${counter}</span></h2>`;
  res.send(updatedHTML);
})

app.get('/api/decrement', (req, res) => {
  counter--;
  const updatedHTML = `<h2 id="counter">counter: <span>${counter}</span></h2>`;
  res.send(updatedHTML);
})

app.get('/api/reset', (req, res) => {
  counter = 0;
  const updatedHTML = `<h2 id="counter">counter: <span>${counter}</span></h2>`;
  res.send(updatedHTML);
})

// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

module.exports = app;

File HTML

Di sini saya menggunakan HTMX untuk berinteraksi langsung dengan server Express JS yang akan berjalan nanti

<!DOCTYPE html>
<html lang="en">

<head>
  <title>halo </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link href="css/style.css" rel="stylesheet"> -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
  <script src="https://unpkg.com/htmx.org@1.9.10"
    integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
    crossorigin="anonymous"></script>
</head>

<body>

  <h1>Halo from Express JS</h1>

  <h2 id="counter">Counter: <span>0</span></h2>

<div class="grid">
            <button hx-get="/api/decrement" hx-swap="innerHTML" hx-target="#counter">-</button>
            <button hx-get="/api/reset" hx-swap="innerHTML" hx-target="#counter">reset</button>
            <button hx-get="/api/increment" hx-swap="innerHTML" hx-target="#counter">+</button>
</div>

</body>
</html>

Menjalankan di localhost

cukup ketik npm run dev atau nodemon index.js atau npx run index.js

Deploy ke Vercel

Pertama buatlah file vercel.json di root folder lalu tambahkan baris ini:

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@now/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.js"
    }
  ]
}