Skip to main content

Deployment React Typescript + Express API

NPM Install && NPM Run Build​

\ Custom Node JS Version Terminal Local

nvm use 22
npm install
npm run build

Akan muncul folder baru /dist

Buat File TsConfigServerJSON​

Buat file baru tsconfig.server.json di project anda, lalu isi dengan berikut :

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "outDir": "./dist-server",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "allowJs": true
  },
  "include": ["server.ts"]
}

Lalu jalankan script compiler :

npx tsc --project tsconfig.server.json

Kalau ada revisi

npx tsc --project tsconfig.server.json && mv dist-server/server.js dist-server/server.cjs

Nanti akan muncul folder baru dist-server/server.cjs

Struktur Upload cPanel​

/home/username/nama_project/
├── dist/          # Hasil build React (frontend)
├── dist-server/   # Hasil compile TypeScript backend
├── package.json
└── .env

Setup NodeJS App di cPanel​

  1. Buka cPanel → "Setup Node.js App"
  2. Klik Create Application

Isi:

Node.js version: 18.x atau 20.x
Application mode: Production
Application root: /public_html/apps
Application URL: domain kamu
Application startup file: dist-server/server.js (hasil compile)
  1. Klik Create

Atur Production & ENV​

Tambahkan penting node_env agar script jalan/

NODE_ENV = production

dan env lain, lalu di simpan.

Troubleshooting​

"Upgrade Required" = Port conflict di cPanel​

Fix server.ts: Ubah baris ini:

const PORT = 3000;

jadi

const PORT = process.env.PORT || 3000;