{"id":33587,"date":"2022-11-02T15:40:02","date_gmt":"2022-11-02T08:40:02","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=33587"},"modified":"2022-11-02T15:53:45","modified_gmt":"2022-11-02T08:53:45","slug":"cara-upload-laravel-dengan-frontend-reactjs-atau-vuejs","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-upload-laravel-dengan-frontend-reactjs-atau-vuejs\/","title":{"rendered":"Cara Upload Laravel dengan Frontend ReactJS atau VueJS"},"content":{"rendered":"\n

Setelah sebelumnya kami menjelaskan tentang upload Laravel ke hosting<\/a>, selanjutnya kami akan melanjutkan cara upload laravel dengan frontend ReactJS atau VueJS. <\/p>\n\n\n\n\n\n

Laravel sebagai Frontend<\/h2>\n\n\n\n

Seperti yang telah kita ketahui bersama, Laravel<\/a>\u00a0adalah salah satu framework populer yang banyak digunakan programmer dalam membuat aplikasi berbasis website. Pada rilis awal, frontend Laravel dibangun menggunakan PHP dan Blade Templates. Pada perkembangannya, Anda dapat membangun frontend website menggunakan framework Javascript populer seperti ReactJS dan VueJS.<\/p>\n\n\n\n

Bila Anda menggunakan ReactJS maupun VueJS sebagai frontend, ada hal yang perlu Anda lakukan seperti membuat bundle assets yang siap untuk digunakan dalam production mode. <\/p>\n\n\n\n

Di versi pendahulunya seperti Laravel 8, bundling asset dilakukan dengan menggunakan Laravel Mix. Sedangkan pada versi Laravel 9, bundling asset menggunakan Laravel Vite.<\/p>\n\n\n\n

Untuk saat ini, layanan shared hosting<\/a> dengan cPanel belum memungkinkan untuk digunakan development frontend berbasis NodeJS seperti ReactJS dan VueJS. Sehingga Anda perlu melakukan deploy\/build aplikasi webstenya terlebih dahulu di sisi localhost Anda.<\/p>\n\n\n\n

Setelah website berjalan dengan baik di localhost, selanjutnya Anda bisa mengupload file website dan databasenya ke control panel hosting agar dapat diakses secara online. <\/p>\n\n\n\n

Pada panduan ini, kami akan berbagi cara deploy frontend ReactJS dan VueJS menggunakan Laravel Mix dan Laravel Vite berikut ini!<\/p>\n\n\n\n

Laravel Mix<\/h2>\n\n\n\n

Laravel Mix adalah suatu package frontend yang berfungsi sebagai manajemen asset JS, CSS dan lainnya. Fitur Laravel Mix mulai diperkenalkan pada versi Laravel 5.4. <\/p>\n\n\n\n

Dalam proses development website, Laravel Mix membutuhkan npm<\/a> untuk melakukan compile asset JS dan CSS. Setelah website berbasis Laravel Mix selesai dibuat di localhost, langkah selanjutnya Anda perlu melakukan compile laravel terlebih dahulu sebelum diupload ke hosting. Anda bisa menjalankan perintah compile untuk production mode sebagai berikut:<\/p>\n\n\n\n

npx mix --production<\/code><\/pre>\n\n\n\n
Berikut adalah tampilan jika sudah berhasil menjalankan perintah compile Laravel Mix.<\/p>\n\n\n\n
\"cara<\/a><\/figure>\n\n\n\n
Saat ini Anda telah selesai melakukan compile project Laravel ReactJS atau VueJS yang siap untuk digunakan dalam production mode.<\/p>\n\n\n\n
Laravel Vite<\/h2>\n\n\n\n
Pada Laravel 9, secara default tidak lagi menggunakan Mix untuk melakukan bundle assets ReactJS atau VueJS. Di versi ini, Laravel menggunakan Vite untuk melakukan compile asset JS dan CSS tersebut. <\/p>\n\n\n\n
Karenanya sebelum Anda mengupload file website ke hosting, silahkan jalankan perintah compile berikut:<\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n
\"cara<\/a><\/figure>\n\n\n\n
Jika seluruh file assets telah berhasil di-compile<\/em>, Anda akan mendapatkan tampilan seperti di atas. Dapat dilihat untuk file JS yg telah di-build<\/em> terletak di dalam folder build.<\/em><\/p>\n\n\n\n
Upload Laravel ReactJS atau VueJS ke Hosting<\/h2>\n\n\n\n
Setelah berhasil melakukan compile asset dengan production mode<\/em> di localhost, selanjutnya Anda bisa melakukan pengecekan terlebih dahulu website yang dibuat. Coba lakukan test kembali, dan pastikan website dapat berjalan dengan baik di localhost. <\/p>\n\n\n\n
Selanjutnya, Anda bisa upload file laravel ke cPanel<\/a> maupun Plesk Panel<\/a> sesuai dengan layanan hosting yang Anda pesan. <\/p>\n\n\n\n
Demikian panduan untuk melakukan upload project Laravel dengan frontend ReactJS atau VueJS di hosting cPanel dan Plesk Panel, selamat mencoba!<\/p>\n","protected":false},"excerpt":{"rendered":"
Setelah sebelumnya kami menjelaskan tentang upload Laravel ke hosting, selanjutnya kami akan melanjutkan cara upload laravel dengan frontend ReactJS atau VueJS. Laravel sebagai Frontend Seperti yang telah kita ketahui bersama, Laravel\u00a0adalah salah satu framework populer yang banyak digunakan programmer dalam membuat aplikasi berbasis website. Pada rilis awal, frontend Laravel dibangun menggunakan PHP dan Blade Templates. […]<\/p>\n","protected":false},"author":337,"featured_media":33707,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[796,1855,1856],"class_list":{"0":"post-33587","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-laravel","9":"tag-reactjs","10":"tag-vuejs"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2022\/11\/Banner-Cara-Upload-Laravel-dengan-Frontend-ReactJS-atau-VueJS.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-8JJ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/33587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/337"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=33587"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/33587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/33707"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=33587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=33587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=33587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}