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.
Gambaran akhir aplikasi. Hanya counter sederhana saja.
├── index.js
├── package.json
├── public
│ └── index.html
└── vercel.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
.
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;
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>
cukup ketik npm run dev
atau nodemon index.js
atau npx run index.js
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"
}
]
}
Setelah itu login ke akun vercel anda. Lalu integrasikan repo dimana anda menyimpan aplikasi express anda di github/gitlab.
Semoga bermanfaat.