blank

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.

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,

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' directoryconst 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 serverconst 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=" /> <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>

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" } ]}

Setelah itu login ke akun vercel anda. Lalu integrasikan repo dimana 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

Leave a Reply

Your email address will not be published. Required fields are marked *

TOP