Cara Menerapkan ExpressJS di Vercell (Tanpa Server)

mrfdn.com – Halo… Express JS adalah salah satu framework nodejs terbaik di dunia.

Ia dapat menjalankan aplikasi berbasis web dengan NodeJS sebagai backend untuk segala kebutuhan. Integrasi basis data bagus untuk penyajian file statis CRUD (buat, baca, perbarui, hapus) sederhana.

Jika Anda mempunyai aplikasi CRUD yang menggunakan Express JS, Anda dapat membuat aplikasi Anda online menggunakan Vercel.

Vercel adalah platform yang dapat digunakan untuk web hosting gratis.

Biasanya disana orang menghosting aplikasi statis, misalnya website 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 berjalan jika Node diinstal.
  • Aplikasi ekspres akan berjalan pada port tertentu yang ditetapkan.
  • Jika server Node dihentikan, aplikasi Express tidak akan berjalan.
  • Jadi ExpressJS harus berjalan selamanya karena ketergantungan pada server Node.

Cara membangun dan menerapkan Express JS di Vercel#

Ikhtisar akhir aplikasi. Hanya penghitung sederhana.

htmx mengungkapkan sebaliknya

struktur folder#

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

Paket File.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 instal dengan perintah npm install.

file indeks.js#

Jika kita menyajikan file statis baik itu html, css, gambar, dll. Tentukan nama folder di bawah ini:

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

Disini saya menggunakan folder public/ untuk menyajikan file index.html.

Lalu jangan lupa menambahkan di akhir baris,

Lebih 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#

Disini saya menggunakan HTML untuk berinteraksi langsung dengan server ExpressJS yang akan dijalankan nantinya

<!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#

Ketik saja npm run dev atau nodemon index.js atau npx run index.js

Tempatkan di Vercel#

Pertama buat file vercel.json Di folder root lalu tambahkan baris ini:


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

Selanjutnya, masuk ke akun Vercel Anda. Kemudian integrasikan repo tempat Anda menyimpan aplikasi Express 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.

Jasa Backlink

Download Anime Batch

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *