Cara Gampang Upload Project Ke Hosting Dengan VS Code Sftp, sekali Save langsung Ter-Upload

Cara Gampang Upload Project Ke Hosting Dengan VS Code Sftp – Haloo semuanya, Assalaamualaikum wr wb..

Pada saat kita sedang mengerjakan suatu project, baik itu saat mengerjakan modul baru atau pada saat merevisi suatu modul.. Maka langkah selanjutnya yaitu mengupload project tersebut kedalam server hosting..

Tujuan nya agar apa yang telah kita kerjakan, dapat dirasakan juga oleh si pengguna dari sistem yang sedang kita kembangkan..

Baca Juga : Free Download Web Nikah dengan fitur Buku Tamu Laravel

Untuk proses upload ke hosting nya sebetulnya terdapat beberapa cara, bisa melalui cara manual dengan mengcompress ke extension zip terlebih dahulu, kemudian baru di upload ke file manager nya..

Bisa melalui git action seperti pada github..

Atau bisa juga dengan menggunakan FTP..

Daftar Isi

Toggle

Cara Gampang Upload Project Ke Hosting Dengan VS Code Sftp

Nah untuk cara kali ini sebetulnya kita menggunakan FTP, akan tetapi kita tidak menggunakan aplikasi ftp client seperti filezilla atau sejenis nya..

Kita akan coba menghubungkan koneksi FTP tersebut dengan text editor Visual Studio Code..

Bagi temen-temen yang belum menginstall nya, silahkan didownload saja pada link berikut.. Tenang saja, VS Code ini free kok..

Jadi nanti pada saat kita sedang mengedit suatu file, kemudian file tersebut kita save, maka vs code secara otomatis akan mengirim file tersebut kedalam server.. Yups, trigger nya hanya dengan saat save data saja, (Ctrl + S)..

Sehingga kita bisa melihat langsung perubahan nya pada live system tersebut..

Persiapan Pembuatan Akun FTP

Ada beberapa hal yang perlu kita persiapkan terlebih dahulu, salah satunya yaitu dengan membuat akun FTP terlebih dahulu pada server hosting yang kalian miliki..

Silahkan login ke akun cpanel kalian, dan klik menu FTP Accounts seperti pada gambar berikut:

Kemudian nanti akan muncul halaman seperti berikut, silahkan kalian isi form nya..

Kemudian klik button Create FTP Account..

Jangan sampai lupa yaa dengan akun ftp yang sudah kalian buat, username login dan password nya, karena ini nanti akan kita gunakan..

Install Extension SFTP pada Visual Studio Code nya..

Pada tab extensions, silahkan kalian ketikkan sftp..

Kemudian jika sudah muncul hasil pencarian nya, kalian pilih sftp yang dibuat oleh liximomo..

Kalian klik install seperti biasa, jika proses instalasi nya sudah selesai, sekarang kita konfigurasi sftp nya..

Konfigurasi Sftp

Pada keyboard, kalian tekan tombil Ctrl+Shift+P (Windows), atau jika kalian pengguna Mac, tekan Cmd+Shift+P..

Kemudian ketikkan sftp, dan pilih SFTP: Config..

Nanti akan terbuka sebuah file konfigurasi seperti berikut:

{
    "name": "Sangcahaya ID",
    "host": "sangcahaya.id",
    "protocol": "ftp",
    "port": 21,
    "username": "fadly@sangcahaya.id",
    "password": "passwordnya",
    "remotePath": "/public_html/bisnis",
    "uploadOnSave": true
}

• name adalah judul untuk konfigurasinya..
• host adalah domain server kita..
• protocol kalian isi ftp
• port kalian isi 21
• username adalah username login akun ftp kalian yang sebelumnya sudah kita buat..
• password adalah password akun ftp kalian
• remotePath adalah path/letak folder project kalian di server hosting nya..
• uploadOnSave diisi true jika kalian ingin mengupload project ke server secara otomatis saat dokumen nya di save..

Cara Mengetahui remotePath folder project di server..

Untuk mengetahui lokasi path folder project kita di server, caranya gampang banget..

Kalian tinggal buka saja file manager pada cpanel nya, terus masuk ke direktori project nya, maka nanti dibagian atas, kalian tinggal copy path folder project nya saja.. seperti pada gambar dibawah ini:

Tinggal kalian copy saja, kemudian paste pada bagian konfigurasi sftp nya..

Upload Per Folder..

Kalo kalian ingin upload project ke server per folder, kalian tinggal klik kanan saja pada bagian folder nya, kemudian klik Sync Local -> Remote..

Maka nanti vs code akan mengupload folder App kedalam server hosting..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..