DEV Community: sumberweb

Deploy Python Flask to cPanel

sumberweb — Sun, 16 Mar 2025 18:55:59 +0000

Setup and Configuration Python Flask

1. Compress Folder / File Application

Langkah pertama untuk deploy aplikasi python flask pada cPanel adalah mempersiapkan file / folder aplikasi dari local komputer.

2. Setup Python App

Pada halaman ini, bisa dilakukan langsung untuk setup nya pada environment hosting / cPanel pada menu Setup Python App seperti gambar di bawah ini.

setelah setup aplikasi python nya sudah terbuat maka tampilan setup akan seperti gambar berikut.

3. Upload and Config file

Setelah aplikasi python pada cPanel sudah terbuat bisa dilanjutkan dengan melakukan upload file / folder project aplikasi yang sudah di compress sebelumnya pada step nomor 1

jika sudah terupload bisa di lanjutkan dengan konfigurasi pada file passenger_wsgi.py sebagai starter up aplikasi.

3. Config database

Salah satu hal yang perlu di perhatikan adalah konfigurasi database di karenakan untuk nama database, user database dan password akan berbeda ketika di lokal dengan di server / hosting cPanel.

4. CLI Install using pip

Step terakhir yang bisa dilakukan adalah menjalankan perintah / CLI untuk kebutuhan installasi library atau koneksi database yang di perlukan.

Pada gambar tersebut pastikan link path sudah di copy seperti instruksi gambar pada step nomor 2 dan paste pada terminal cPanel hal ini bertujuan agar perintah / command line yang akan di jalakan tepat pada tempat folder aplikasi berada.

Berikut ini adalah command line / perintah yang bisa dijalankan.

pip install --upgrade pip
pip install -r requirements.txt
flask db init
flask db migrate -m "entries table"
flask db upgrade

jika salah satu perintah ini sudah dijalankan bisa kembali ke halaman Python Setup App step no 2 untuk melakukan restart aplikasinya. Jika berhasil maka subdomain bisa dapat di akses dan aplikasi berjalan live seperti contoh berikut.

Demikian tutorial singkat deploy python flask pada cPanel dari local ke server cloud hosting.

Terima kasih.
Semoga bisa membantu.

Error yang sering di jumpai ketika Setup NodeJS App pada cPanel.

sumberweb — Wed, 25 Sep 2024 03:41:33 +0000

1. Cannot use import statment outside a module

Pada error log ini, menyampaikan bahwa tidak dapat menggunakan statement import diluar module. hal ini disebabkan karena file custom server nextjs yaitu server.js yang di dalamnya terdapat statement import yang merupakan karakteristik ES Modules.
Dalam case ini artinya secara default startup NodeJS yang digunakan untuk membaca script server.js nya pada environment hosting cPanel menggunakan sistem module CommonJs yang biasanya karakteristik module CommonJS penggunaannya menggunakan **require()** untuk mengimpor module dan module.exports atau exports untuk mengeskpor module.

untuk mengatasi masalah ini adalah bisa dengan berbagai cara yaitu salah satunya adalah dengan merubah extensi file server.js menjadi server.mjs yang menjadi startup aplikasinya menjadi seperti berikut :

jika extensi file server.js sudah direname menjadi server.mjs jangan lupa untuk update script pada file package.json yang semulanya adalah sebagai berikut :

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },

Menjadi seperti berikut :

"scripts": {
    "dev": "node server.mjs",
    "build": "next build",
    "start": "NODE_ENV=production node server.mjs",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },

kemudian dilanjutkan dengan pergi ke halaman cPanel > setup Node.js App > edit the application ( icon pencil )

2. Out Of Memory: Cannot allocate wasm memory for new instance

muncul karena aplikasi Node.js yang menggunakan WebAssembly (Wasm) tidak dapat mengalokasikan memori yang diperlukan saat dijalankan di cPanel. Hal ini biasanya terkait dengan keterbatasan sumber daya di server, seperti RAM atau batasan penggunaan memori yang diterapkan oleh hosting.

untuk hal ini solusi alaternatifnya adalah dengan menaikan memory limit pada aplikasi nya biasanya settingan ini terdapat pada select php verison atau multiphp Manager editor pada fitur menu cPanel namun selain itu juga bisa diatasi dengan cara SSH dari local komputer atau remote server hosting dari komputer pribadi.
sebagai catatan jika melakukan SSH pastikan sudah berada di direktory yang benar dengan cara mencopy virtual environment pada halaman cPanel > Setup Node.Js App untuk berganti di direktory root aplikasinya.

3. Error: Could not find Prisma Schema that is required for this command

Jika pada aplikasi kalian menggunakan ORM seperti prima ketika menjalankan command npm install untuk menginstall package library node_modules biasanya akan muncul error tersebut namun error tersebut bisa diabaikan saja dan pastikan tambahkan script baru pada file package.json nya

setelah dilakukan update pada file package.json harus dilanjutkan dengan restart Node.js nya dengan kembali ke halaman cPanel > setup Node.js App > edit the application ( icon pencil ) > Restart . Melakukan restart aplikasi Node.Js pada cPanel sangat di perlukan ketika adanya perubahan script atau file pada root Aplikasinya.

setelah Restart aplikasi dilakukan bisa dilanjutkan dengan kembali ke terminal dan jalankan command npx prisma db push pastikan untuk konfigurasi databasenya pada file .env sudah benar.

Deploy NextJs to cPanel

sumberweb — Tue, 24 Sep 2024 17:05:53 +0000

Build dan Deploy CRUD, Search, dan Pagination Next.js 14

1. Setup Folder

konfigurasi custom server nextjs server.js yang akan di tambahkan pada project aplikasi nextJs nya, berikut ini adalah script yg bisa didapatkan dari website resminya.

https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'

const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    handle(req, res, parsedUrl)
  }).listen(port)

  console.log(
    `> Server listening at http://localhost:${port} as ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})

kemudian tambahkan scripts berikut pada file package.json di bagian “scripts”

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

setelah penyisipan file server.js dan update isi file package.json di lakukan, jalankan perintah berikut npm run build untuk setup folder project aplikasinya sebelum di upload ke environtment hosting cPanel.

setelah proses build telah selesai biasanya ditandai dengan terbuatnya folder .next yang tergenerate secara otomatis kemudian dilanjutkan dengan compress file project aplikasinya kecuali folder node_modules. jika folder .next tidak muncul pastikan kembali agar tampilan view pada file manager komputer atau finder ( pada mac ) saat ini settingan hidden file sudah di matikan.

2. Setup Nodejs pada cPanel

pada setup ini url website akan menggunakan subdomain dimana root folder project aplikasinya akan di simpan pada folder nextjs-crud

setelah nodeJs telah berhasil di setup silahkan upload file project aplikasi yang berada di lokal komputer ke environtment hosting yaitu direktory folder nexjs-crud sesuai dengan setup nodeJs sebelumnya.

ini adalah struktur folder dari project aplikasinya sesuai dengan direktori yang telah di setup sebelumnya.

3. Setup Database & User Database

pada case tutorial ini akan menggunakan database postgreSQL dimana gambar di bawah ini akan menampilkan database sudah terbuat beserta user yang sudah di tambahkan ke databasenya jika perlu lakukan juga synchronize Grants pada users aktif.

setelah database dan user nya telah tersetup bisa dilanjutkan dengan konfigurasi file .env pada project aplikasinya agar menyesuaikan dengan database yang telah di buat pada environment hosting.

4. Setup Application

silahkan dilanjutkan ke terminal pada cPanel atau bisa menggunakan ssh agar lebih optimal ketika mejalankan perintah-perintah yang dibutuhkan untuk setup aplikasinya. Jika sudah berada di terminal, bisa kembali ke halaman Setup NodeJs App dan copy virtual environment nya dan paste kan pada CLI terminalnya untuk memastikan sudah berada direktory yang benar.
jalankan perintah yang dibutuhkan seperti ( sesuai dengan case ini )

npm install
npx prisma db push

4. Setup Done

Jika semua langkah-langkah telah selesai di jalankan website telah berhasil di deploy pada hosting cPanel, untuk pengecekannya silahkan open Application URL nya sesuai pada Setup Node.JS App yang telah di buat.

https://nextjs-crud.codesync.id/

https://nextjs-crud.codesync.id/contacts

Semoga mudah di pahami dan bisa membantu.
Terima kasih :)

Deploy Laravel to cPanel v.2

sumberweb — Sun, 01 Sep 2024 14:49:34 +0000

Pada tutorial ini saya akan membagikan cara lain untuk deploy project laravel ke cPanel melalui git clone pada github repository. berikut adalah link git reponya example-app

https://github.com/98hub/example-app

1. Create subdomain

Pertama siapkan domain atau subdomain yang akan di gunakan sebagai alamat website yang bisa diakses nantinya. Login cPanel > Domains > Create A New Domain pada tutorial ini akan menggunakan alamat subdomain yaitu example-app.sumberweb.com

2. Menuju direktory aplikasi

Setelah subdomain terbuat bisa di lanjutkan dengan ke menu terminal pada cPanel.
Halaman utama cPanel > Search Tools (/) > ketikan Terminal.
Jika halaman terminal sudah terbuka jalankan command ls pada terminal

jika sudah berada di direktory folder subdomain.
silahkan jalankan perintah berikut : git clone https://github.com/98hub/example-app.git

3. Move Files

git clone terlah berhasil folder aplikasi laravel berhasil tercopy pada cPanel. silahkan kembali ke halaman utama cPanel untuk memindahkan isi folder example-app ke folder subdomainnya.
cPanel > file manager > folder example-app.sumberweb.com > example-app > select all > Move [ masukan path menjadi /example-app.sumberweb.com ] > move files.

4. setup file .env

setelah file terpindahkan sesuai dengan tujuan folder yang kita inginkan bisa dilanjutkan dengan mengcopy file .env.exampe dengan cara klik kanan pada file tersebut kemudian copy atau bisa dengan cara kembali ke halaman utama jalankan command cp ( copy ) cPanel > terminal > cd example-app.sumberweb.com > cp .env.example .env jika sudah tercopy bisa di sesuaikan untuk isi dari file .env tersebut.

ini adalah file .env yang telah di sesuaikan dengan database.

5. command

selanjutnya adalah jalankan composer install. silahkan kembali ke halaman utama cPanel.
cPanel > Terminal > cd example-app.sumberweb [ masuk ke direktori folder aplikasi ] kemudian jalankan command-command berikut ini.
- composer install - php artisan key:gen - php artisan migrate:fresh - php artisan about

6. akses url

https://example-app.sumberweb.com/public
seteleah semua command berhasil dijalankan silahkan akses subdomainnya pada browser dengan path folder /public sehingga menjadi seperti ini https:example-app.sumberweb/public

7. Ubah URL

merubah url aplikasi https://example-app.sumberweb/public menjadi https:/example-app.sumberweb tanpa path folder /public
halaman utama cPanel > file manager > folder aplikasi example-app.sumberweb.com > buat file dengan nama .htaccess dan isikan script berikut :

<IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^(.*)$ public/$1 [L] </IfModule>

8. Finish

Tutorial Deploy Laravel to cPanel v.2 semoga bisa membantu. Have a Nice day :)

https://example-app.sumberweb.com/

Deploy Laravel to cPanel v.1

sumberweb — Thu, 25 Jul 2024 09:43:29 +0000

Thanks to GitHub Repository [laravel-todo-list](https://github.com/benzuri/laravel-todo-list)

Simple Todo List app with Api-Rest made with Laravel.

Tech Stack : Laravel 10.25.1, MySql, User registration ( Jetstream ), Dynamic interface ( Livewire, Alpine Js, Token based API ( Sanctum ), Design ( Tailwind )

Bisa menggunakan link tutorial ini jika aplikasi laravel tidak menggunakan library node_modules
https://dev.to/sumberweb/deploy-laravel-to-cpanel-v2-5c7a

1. Setup Struktur Folder Pada Hosting

Berikut ini adalah struktur folder project aplikasi laravel yang masih di lokal komputer / leptop. lakukan compress pada files yang sudah di pilih kecuali module node_modules karena nantinya untuk library tersbut kita intallasi / setup pada cPanel.

silahkan akses hosting / cPanel kemudian arahkan ke menu file manager. buat folder laravel-todoapp di luar folder subdomain atau public_html yang nantinya menjadi entry point folder aplikasinya.

pertama buat folder name laravel-todoapp
kedua pastikan path folder sudah empty ( kosong ) yang artinya folder baru akan terbuat di home direktory
ketiga create new folder

Upload hasil compress files yang dipilih sebelumnya ke folder yang baru saja di buat laravel-todoapp

setelah di compress files berhasil diupload ke hosting pada folder laravel-todoapp, bisa dilanjutkan dengan mengekstract file .zip tersebut sehingga hasil nya akan seperti berikut :

files project aplikasi sudah berada di direktory laravel-todoapp

langkah selanjutnya adalah pindahkan semua isi files yang ada di dalam folder public ke folder subdomain laravel-todoapp.codesync.id kemudian jika files sudah berhasil di pindahkan isinya akan seperti berikut :

pilih semua files yang ada di laravel-todoapp/public
move ke folder tujuan yaitu subomain laravel-todoapp.codesync.id
move files

2. Setup Node Js

[ skip step ini jika tidak diperlukan / tidak menggunakan library node_module pada project laravel ]

Dibutuhkan untuk mengakses NPM ( node package manager ) sehingga bisa installasi package javascript nantinya. Terutama tailwindcss dan package lainnya yang dibutuhkan pada environtment project aplikasi ini.

Pertama silahkan pilih NodeJs Version dan Application mode nya di Production atau Development.
Kedua adalah Application root yang mana ini adalah root dari folder project aplikasinya. sebagai catatan : Nama Application rootnya harus sama dengan folder yang sudah di buat sebelumnya. silahkan periksa kembali pada step pertama sebelum melakukan Setup Node Js nya.
Ketiga adalah Application URL ini adalah URL dimana aplikasi nantinya bisa diakses atau alamat website aplikasinya.
Keempat adalah Application startup file ini adalah path file dimana file project aplikasi nya menjadi entry point. untuk laravel sendiri biasanya di routes/web.php

3. Create Database, Import, configurasi file .env dan configurasi file index.php

Dimulai dengan pembuatan database pada menu cPanel > MySQL® Databases / Manage My Database kemudian dilanjutkan dengan Add User To Database sehingga tampilan akan seperti berikut.

Dilanjutkan dengan import database pada menu cPanel > PhpMyAdmin dan tampilan akan seperti gambar berikut :

Jika import database sudah berhasil bisa dilanjutkan dengan configurasi file .env untuk mengkoneksikan database yang baru saja telah di setup, dimana kita bisa akses pada menu cPanel > File Manager > Folder laravel-todoapp > .env [ edit ]

setelah koneksi database pada file .env telah selesai di konfigurasi bisa di lanjutkan penyesuaian pada file index.php yang berada di folder subdomain laravel-todoapp.codesync.id dan arahkan path folder ke folder dimana project aplikasi di dimpan yaitu laravel-todoapp yang sebelumnya sudah di buat dan diinputkan file project aplikasinya.

4. NPM Install dan Composser Install

Silahkan ke menu cPanel > Setup NodeJs App > pilih setup yang sudah di buat sebelumnya dan copy link env nya.

pastekan link yang sudah dicopy tersebut dan jalankan command berikut :

npm install
composer install
php artisan key:gen

Notes : setiap perubahan yang sudah dilakukan selalu refresh halaman setup nodejs app nya kemudian restart.

Berikut adalah error yang mungkin muncul :

1. `php artisan migrate:fresh --seed`

jika ingin memulai database dari 0 jalankan command ini
Syntax error or access violation: 1071 Specified key was too long : error terselesaikan ketika menambahkan script berikut pada : laravel-todoapp/app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
/**
   * Register any application services.
*/
public function register(): void
{
//
}

/**
  * Bootstrap any application services.
 */
public function boot(): void
{
    Schema::defaultStringLength(191);
}
}

2. Error `npm run build`

pastikan pada isi file .gitignore path folder /public/build sudah di comment seperti berikut # /public/build jika masih terdapat error npm run build pada tampilan website silahkan lanjutkan step di bawah ini.

3. `npm run build - Fail 0r Error timeout or Out of memory`

pastikan untuk menjalankan command ini sudah menggunakan ssh dari lokal komputer jika masih belum berhasil, silahkan jalankan command npm run build pada environment lokal komputer. Kemudian hasil build, yang biasanya dalam bentuk folder dengan nama dist atau build folder tersebut di upload pada direktori project aplikasi pada hosting / cPanel ( laravel-todoapp/public )

Selesai sudah tutorial ini.
Semoga bisa membantu :)

Deploy Frontend Web Application with React to cPanel.

sumberweb — Thu, 18 Jul 2024 02:54:22 +0000

Tech stack: Complete CRUD NodeJs, swr, react-router-dom, react-dom, react, axios

Melanjutkan tutorial sebelumnya dimana kita sudah melakukan Deploy Backend API NodeJs to cPanel. Di tutorial ini kita akan deploy aplikasi frontendnya yang nantinya hasilnya akan di url https://todoapp.codesync.id

1. Setup Application

Persiapkan aplikasi frontend nya terlebih dahulu karena pada case ini aplikasi harus di build terlebih dahulu sebelum di upload ke Hosting / cPanel.

Pada komponen tersebut memiliki fungsi untuk menambahkan tugas baru dengan mengirim permintaan ke server serta memperbarui data setelah tugas ditambahkan. Namun pada script tersebut masih berjalan pada lokal komputer http://localhost:5001 yang seharusnya ketika nantinya berjalan di server production / hosting URL diganti menjadi https://api-todoapp.codesync.id/ sehingga menjadi seperti berikut:

Pastikan URL pada semua komponen yang melakukan fetch data atau update data ke server lokal diganti menjadi URL yang sudah di setup pada hosting https://api-todoapp.codesync.id/

2. Build Aplikasi

Jika semua script code sudah disesuaikan bisa dilanjutkan dengan build aplikasinya jalankan command berikut pada terminal untuk melakukan build pada aplikasinya npm run build

command npm run build akan menghasilkan folder baru dengan nama dist yang nantinya isi folder tersebut yang akan di upload ke hosting.

3. Compress file dist hasil Build

Select isi file yang berada di dalam folder dist kemudian compress dalam bentuk .zip

4. Upload file ke cPanel > File Manager

Kali ini project aplikasi frontend akan di upload pada subdomain di folder todoapp.codesync.id pastikan path folder upload sudah sesuai dan benar.

pada gambar tersebut file telah berhasil di upload dan berada di folder atau path folder yang diinginkan kemudian bisa dilanjutkan dengan extract file .zip tersebut.

5. Done

Setelah file .zip tersebut selesai di extract hasilnya akan di ketahui dengan mengakses URL aplikasi frontend nya. https://todoapp.codesync.id/
ini adalah tampilan bahwa aplikasi frontend berjalan dengan baik data telah berhasil diambil dari API https://api-todoapp.codesync.id/

Dengan ini selesai sudah tutorial deploy aplikasi frontend dengan React library yang melakukan fetch data API publik yang sudah di setup sebelumnya.

Semoga tutorial ini bisa membantu.
Terima kasih 😊

Deploy Backend API with Express Js to cPanel

sumberweb — Tue, 16 Jul 2024 15:34:41 +0000

Tech Stack : NodeJs, Express, Prisma, @prisma/client, cors, dotenv and Mysql

1. Pertama

Siapkan file project yang sudah berjalan di local komputer dan lakukan compress pada file project yang di butuhkan, untuk folder node_modules tidak perlu ikut serta dalam compress file dikarenakan nantinya akan di setup melalui menu Setup Node.Js App pada cPanel.

2. Kedua

Login cPanel Hosting dan navigasikan ke menu Setup Node.Js App > Create Application sehingga tampilanya akan menjadi seperti berikut :

Pertama pilih Node.Js Version dan Application mode ( production atau development )
Kedua tentukan Application root - dalam tampilan di atas api-todoapp merupakan application rootnya ( berbentuk folder ) yang nantinya akan menyimpan file project aplikasinya.
Ketiga tentukan Application URL nya - dalam tampilan diatas nantinya project backend akan diakses dengan url subdomain https://api-todoapp.codesync.id artinya API tidak lagi diakses dengan http://localhost untuk melakukan request data seperti ketika pengaplikasian pada local komputer.
Keempat tentukan Application startup file. Dalam project ini startup file yang akan di jalankan adalah index.js disesuaikan dengan aplikasi masing masing.
Kelima adalah CREATE.

Sebagai testing Node.Js berjalan dengan baik atau tidak bisa di cek dengan akses URL https://api-todoapp.codesync.id yang jika berkerja dengan baik tampilanya akan seperti berikut:

3. Ketiga

Upload Project aplikasi ke cPanel > File Manager Hosting.

Folder api-todoapp merupakan Application root yang sebelumnya sudah buat ketika melakukan Setup Node.Js App, di folder tersebut adalah tempat dimana kita akan upload file project aplikasinya.

Setelah file upload selesai, hasil upload bisa langsung di extract dan hasilnya akan seperti berikut.

4. Keempat

Setup Database. cPanel > MySQL® Databases, Create New Database sesuai dengan nama database yang ada di lokal komputer dan Add New User > setup untuk username dan password [ pastikan username dan password sudah di save di note pribadi ] kemudian Add User To Database pilih user yang sudah di buat dan database yang baru di buat dilanjutkan dengan Manage User Privileges seperti tampilan berikut :

5. Kelima

Import Database. Lakukan export database project pada lokal komputer dan import ke hosting dengan cara ke menu cPanel > phpMyAdmin dan tampilan import database akan seperti berikut :

5. Keenam

Konfigurasi file .env - cPanel > File Manager > api-todoapp > .env

konfigurasi file .env ini sangat diperlukan dikarenakan untuk menyesuaikan environtment baru yang mana sebelumnya konfirgurasi koneksi database berjalan pada lokal komputer dan saat ini koneksi database terhubung dengan environtment hosting.

7. Ketujuh

Jalankan Setup Node.Js App - setelah melakukan konfigurasi pada file .env dilanjutkan dengan menjalankan setup nodeJs nya. Pastikan sebelum mejalankan aplikasi halaman browser sudah di refresh dan lakukan Restart pada Setup Node.Js App nya. Jalankan Run NPM Install dan hasilnya akan seperti message hijau Node.js NPM install completed successfully.

8. Kedelapan

Muncul Error 503 ketika mengakses URL API ***https://api-todoapp.codesync.id/*** setelah semua setup project sudah berhasil di install pada hosting dan pesan error logs pada file stderr.log

Dalam case project contoh ini terdapat error 503 dari hasil setup project aplikasinya.

Error terjadi karena Node.js mencoba menggunakan require() untuk mengimpor modul ES (ECMAScript Module) yang tidak didukung dalam konteks CommonJS. Modul ES diidentifikasi dengan menggunakan ekstensi .mjs atau memiliki kunci "type": "module" di file package.json.

sehingga ada penyesuaian pada file startup pada Setup Node.Js App nya untuk file index.js diganti menjadi index.mjs yang mana dari awal untuk project aplikasinya script / codenya dibuat dengan dengan Modul ES (import).

9. Kesembilan

Berikut ini adalah tampilan ketika URL API backend bekerja. https://api-todoapp.codesync.id/tasks yang mana data sudah tampil dalam bentuk json file dan siap digunakan sebagai API data consume oleh aplikasi frontend.

Dengan ini tutorial Setup NodeJs untuk aplikasi backend telah selesai dan bisa berjalan dengan normal pada hosting. Untuk tutorial selanjutnya adalah Deploy aplikasi frontend https://todoapp.codesync.id yang mana nantinya aplikasi frontend ini akan melakukan fetch data ke aplikasi backend.