Cara menggunakan ExpressJS di Vercel (Tanpa Server)
mrfdn.com – Halo… Express js adalah salah satu framework Nodejs terbaik di dunia.
Itu dapat menjalankan aplikasi web dengan backend NodeJS untuk semua tujuan. Berguna untuk menangani file statis secara CRUD sederhana (buat, baca, perbarui, hapus) dengan menambahkan ke database.
Jika Anda memiliki aplikasi CRUD yang menggunakan Express JS, Anda dapat menggunakan aplikasi Anda secara online dengan Vercel.
Vercel adalah platform yang dapat digunakan untuk web hosting gratis.
Biasanya itu ada untuk meng-host aplikasi statis, misalnya situs statis, blog, dll.
Namun selain itu Vercel juga bisa digunakan untuk menjalankan aplikasi ExpressJS.
Penjelasan singkat tentang Express JS untuk dijalankan di Vercel#
- Hal pertama yang perlu Anda ketahui adalah aplikasi Express hanya dapat dijalankan jika Node.js.
- Skrip Express akan berjalan pada PORT tertentu yang dikonfigurasi.
- Ketika server Node berhenti maka aplikasi Express tidak berjalan.
- Jadi Express JS harus selalu dijalankan karena bergantung pada node servernya.
Cara membuat dan mentransfer Express JS ke Vercel#
Informasi akhir aplikasi. Itu hanya angka sederhana.
desain file#
├── index.js
├── package.json
├── public
│ └── index.html
└── vercel.json
file Paket.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 load dengan perintah npm install.
File indeks.js#
Jika kami menyajikan file statis, itu adalah html, css, gambar, dll. Tentukan nama file di bawah ini:
app.use(express.static(path.join(__dirname, 'public')))`
Di sini, saya menggunakan direktori public/ untuk menyajikan file index.html.
Lalu jangan lupa menambahkan di akhir baris,
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;
Berkas HTML#
Di sini saya menggunakan HTML untuk berinteraksi dengan server Express JS yang berjalan di latar belakang
<!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=" />
<script src="
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>
Berjalan di localhost#
cukup klik npm run dev atau sebaliknya nodemon index.js atau sebaliknya npx run index.js
Masukkan Vercel#
Pertama buat file vercel.json di file sumber dan kemudian tambahkan baris ini:
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@now/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "index.js"
}
]
}
Setelah itu, login ke akun Vercel Anda. Kemudian tambahkan repo tempat Anda menyimpan aplikasi spesifik Anda di github/gitlab.
Semoga bermanfaat.
PakarPBN
A Private Blog Network (PBN) is a collection of websites that are controlled by a single individual or organization and used primarily to build backlinks to a “money site” in order to influence its ranking in search engines such as Google. The core idea behind a PBN is based on the importance of backlinks in Google’s ranking algorithm. Since Google views backlinks as signals of authority and trust, some website owners attempt to artificially create these signals through a controlled network of sites.
In a typical PBN setup, the owner acquires expired or aged domains that already have existing authority, backlinks, and history. These domains are rebuilt with new content and hosted separately, often using different IP addresses, hosting providers, themes, and ownership details to make them appear unrelated. Within the content published on these sites, links are strategically placed that point to the main website the owner wants to rank higher. By doing this, the owner attempts to pass link equity (also known as “link juice”) from the PBN sites to the target website.
The purpose of a PBN is to give the impression that the target website is naturally earning links from multiple independent sources. If done effectively, this can temporarily improve keyword rankings, increase organic visibility, and drive more traffic from search results.
